Introduction

This guide explains how to quickly install the Simon Data JavaScript SDK ("Simon Signal") on your website using Tealium. The guide includes the following information:

• Requirements for Installation
• Installation Steps
• Troubleshooting Guidance

Installation Requirements

• The permissions to add tags using Tealium
• Working knowledge of JavaScript

The Main Tag

To drop our main tag (and other custom scripts) you must use a Tealium Custom Container, a Javascript Template that allows you to drop arbitrary Javascript onto a page managed by Tealium.

Create a Tealium Custom Container Tag

👍

Tealium Learning Center

To familiarize yourself with Tealium's Tag creation and field definitions, please also review their documentation.

1. From your Tealium dashboard, navigate to Tags, then click Add Tag.
2. Search for Custom Container, then click +Add.

Configure the Main Tag

3. Enter Simon Main Tag in the title, then Click Next.

4. Click Next.
5. Under Load Rules, choose Load on All Pages.

Edit the container Template to Run the Main Tag

6. From the dropdown by your user name select Manage Templates:

7. Search for the Simon Main Tag you just created:

8. Edit the template syntax:

   • Set the u.ev value to {'view': 1); this ensures that the tag runs on page views (not click events).
   • In the Start Tag Sending Code section edit it to have the value from the Signal installation page (eg. https://simondata.simondata.com/simon-signal)
   • Edit _sd variable value to include a window. prefix. This ensures we are setting a global variable on the page. See lines 75-79 in the screenshot below. Note that line 75 does not have the var prefix anymore as we are referencing the window variable not creating a new one.

9. Click Apply to save the template.

Set Up the Event Tracking Scripts

You need to set up an Event Tracking Script in addition to a Custom Container. We can set up the event tracking in Tealium in two ways, either one tag per event or one event tracking tag for all events. The advantage of one tag per event is that you can specify different load rules per event. The downside is that that comes with a lot more Tealium Custom Container Tags to manage.

Review Simon Signal Events here.

Create a Tealium Custom Container Tag

1. Create the tag as you did for the main tag above, with these differences:

Edit the Container Template

2. From the dropdown next to your user name, select Manage Templates (see above).
3. Search for the event tag you're editing. The example below is a tag per event for Cart Events:

4. Edit the template syntax:

• Set the u.ev value to the one of three values for three different scenarios:
  • {'view': 1); - if your tag should only be triggered on page load and will NOT need to be triggered when a user clicks something on a page
  • {'link': 1); - if your tag should only be triggered when user clicks something on a page and NOT need to be triggered on page load
  • {'all': 1); - if your tag should be triggered always; when a user clicks on something on the page or the user goes to a new page and loads it (this is what we use for tags that capture multiple events)
• In the Start Tag Sending Code section edit it to send the event that needs to be triggered:

Proper Event Tracking Configuration

Editing the tag sending code can be a daunting task. Here are a few tips to make it easier:

• Always wrap the code in a check for the existence of the Simon Data main variable. In the above screenshot we have all of our code in a if (window.sd) { check. This ensures that the code won’t even fire if the Simon Main Tag has not finished loading.
• The a variable tells us how the tag is being fired. It is either view or link.
• The b variable contains the full contents of the data layer.
• The b.tealium_event variable allows us to see what kind of event was fired. This will take some experimentation to see what events come across for different types of clicks and page loads in a Tealium setup for an organization. Review all the Tealium documentation on Tealium events.
• Make use of lines 74-77. If we're running in dev mode we can see the full output of the a and b variables to help us set things up:

if (b.tealium_environment == 'dev') {
    console.log(a);
    console.log(b);
}

• Always reference sd by using window.sd.
• Check that the variables you are using in your event exist before making use of them in the event
• See the Tealium documentation on the custom container.
• Check in the Data Layer section of Tealium to see what variables may exist in the data layer (b variable).