Tealium ®

University

Fundamentals of Tealium iQ
Contents
Getting Started with Tealium iQ………1
Username and Password………1
Lab Resources………1
Logging into Tealium iQ console………1
Summary Tab………2
Web Companion………3
Using Web Companion………4
Understanding the Data Layer………6
What is a Data Layer………6
How to Implement it………6
Defining Your Data Layer………6
Building Your Data Layer in Tealium iQ………8
Data Layer Tab………8
Adding a Single Data Source………8
Adding Data Sources in Bulk………9
Adding Common Data Sources………10
Adding Common E-Commerce Data Sources………11
Adding Data Sources via Web Companion………12
Code Center………13
Adding the Data Layer to Your Webpage………13
Saving a Profile Version………15
Tag Management Fundamentals………16
Use case 1: Google Universal Analytics (GUA) Tag………16
Adding Google Universal Analytics (GUA) Tag………16
Adding “Load on All Pages” Load Rule………17
Mapping a data source to GUA………18
Reviewing E-commerce Extension………20
Publishing Use Case 1………22
Use Case 2: Google Adwords Conversion Tag (GAC)………23
Adding a Cookie data type………23
Adding a Querystring Parameter data type………23
Adding Google Adwords Conversion Tag.………23
Creating a new Load Rule………25
Adding Persist Data Value Extension………25
Publishing Use Case 2………26
Advanced Load Rules………27
Loading Tags on Cart Page Only………27
Loading Tags on Conversion Pages only………28
Loading Tags with Time-Based Rules………29
Nested Load Rule………30
Load Rule Helper - Web Companion………31
jQuery onHandler (1.7 and above) Extension………33
Adding Event Tracking Data Sources………33
Using jQuery onHandler Extension for Navigation Tracking………33
Publishing jQuery onHandler Extension………35
Using jQuery onHandler for tracking Button Clicks………36
Content Modification Extension via Web Companion………37
Adding Content Modification Extension………37
Publishing a new version………39
Versions………40
Rollback to a previous version………41
 Page 1

Getting Started with Tealium iQ

Username and Password
Each lab participant is provided with a username and password to log into Tealium iQ console. The
“biz###“ indicates a unique login such as biz001, biz002, etc. where ### is the unique training ID.

Tealium iQ console URL: https://tmu-my.tealiumiq.com

Username: biz###@tealium.com
Password: Biz###@tealium.com

Lab Resources
To go through the lab exercises, you will need three resources:
• Lab Companion (PDF)
• The sample Universal Data Object (UDO) for your demo site
To download lab resources,
1. Navigate to your demo site at http://biz.tagthis.co/biz### (where ### is your unique training ID).

2. Click the button on the top-right corner of your demo site. This will open the README
page where you’ll find all the resources required to complete the lab exercises.
3. Under the Guides section, click on Tealium iQ Fundamentals Lab Guides to download this lab
guide.
4. Under the Templates section, click on Sample Universal Data Object CSV to download the .csv
UDO file.

Logging into Tealium iQ console

1. Navigate to the login screen of the console at https://tmu-my.tealiumiq.com

2. Enter your username and password. Click the button.

Tealium University Getting Started with Tealium iQ

 Page 2

Summary Tab
The Summary tab summarizes the Tag configurations in your profile. Upon logging into Tealium iQ
console, click the My iQ tab and select Summary.

a. Snapshot of the currently published version(s).

b. A summary that contains the number of Data Sources, Tags, Load Rules, Extensions, and
Versions for the profile. Clicking on the boxes will navigate you to that particular tab.
c. A summary that shows you which Tags you’ve added to this configuration and whether they’re
active or disabled.
NOTE: Since you have not added Tags or made any changes to your profile, the Data Sources
summary and Tag summary will appear blank.

Tealium University Getting Started with Tealium iQ

 Page 3

Web Companion
Web Companion is a simple and versatile tool that allows you to inspect and modify the contents of
your website on the fly.

NOTE: You must install the Web Companion in your browser (see instructions below) before you can
launch it in your environment. However, we have embedded the very tool in your demo site for the
purpose of this lab. Simply click the button on the top-right corner to launch the
tool.

Adding Web Companion

1. Click on your name/email in the upper-right corner of the console to drop down the Account
Admin menu.

2. Click Web Companion.

3. A pop-up message box with instructions will appear. Drag the “Tealium Web Companion” link from
the message box on to the bookmarks bar of your browser.
NOTE: The bookmarks bar of your browser must be enabled before you perform this step. We also
recommend you install the Web Companion in Chrome or Firefox.

The Web Companion bookmarklet will appear in the bookmarks bar of your browser.

Tealium University Getting Started with Tealium iQ

 Page 4

Using Web Companion

1. Navigate to your site/environment that you wish to inspect. From your browser’s bookmarks bar,
click on the newly-created Web Companion bookmarklet. This will open the Overview tab of the
Web Companion.
Take a quick look at the tools within Web Companion:

Overview Tab contains a summary of your Tealium iQ

account, profile, version, and environment. Use this tab to
verify if the Tags and Extensions in your profile have loaded
successfully.

Data Tab (in the figure below) contains an array of

variables that can be added as data sources in Tealium iQ.
You can choose from 5 types of variables: HTML Metadata,
Querystring Parameters, Cookies, JavaScript Variables,
and Universal Data Object.

NOTE: Universal Data Object, also termed UDO or the

utag_data object, is made up of variables which store
the data that you wish to capture for your site. This
arrangement makes it possible for Tealium to send that
data to third-party vendor Tags.

Tealium University Getting Started with Tealium iQ

 Page 5

Tools Tab, with its assortment of tools like Extensions and Load Rules, gives you the capability to
target and manipulate an element on the webpage. Here’s a brief description of the tools:

ØØ On-Page Element Selector: Select an element on the

webpage and apply Content Modification Extension
and (or) jQuery Live Handler Extension to it.
ØØ Load Rule Helper: Create a new load rule to
determine when and where a Tag should load.
ØØ Custom Target Environment: Publish to a custom
environment in addition to the three default
environments (Dev, QA, Prod).
ØØ Adobe Test and Target: Add this extension to modify
targeted content on the webpage.

Tealium University Getting Started with Tealium iQ

 Page 6

Understanding the Data Layer

What is a Data Layer
The Data Layer contains all the data points (JavaScript variables, cookie values, query string
parameters, and more) that you need to collect to meet your business needs. Contained within the
Data Layer is the Universal Data Object (UDO), also called utag_data. It is a collection of variables
that store the data you wish to capture for your website.
More than a repository for information, the UDO acts as a one-stop-shop for other third-party
vendor Tags to access this information for their own purposes. Without the UDO, you would have
to represent the same information in different ways to accommodate different Tags. By placing that
information in the UDO, Tealium can send it to the third-party Tags without requiring you to include
Tag-specific code on your site.

How to Implement it
By coordinating with the stakeholders, such as your marketers, developers, and analytics personnel,
you determine what pieces of data you wish to capture on your site. These variables are listed in the
utag_data object. You place the utag_data object right above the utag.js file in your site’s code.

Defining Your Data Layer

Before you start using Tealium iQ, you must define your Data Layer variables. Determine what data
you want to capture based on your business needs and name the variables appropriately. To add this
data to Tealium iQ easily, develop the data beforehand using a spreadsheet program, such as Excel
or Numbers.

Tealium University Understanding the Data Layer

 Page 7

1. Build your Data Layer in your preferred spreadsheet program. Each data source entry must
contain four values: Source, Type, Description, and Alias. For example, a page name variable,
must be defined in this order: page_name,UDO Variable,Used to capture page name,Page Name
Note: The Description and Alias are optional but recommended.
2. When finished, save the spreadsheet file as a CSV (comma separated values) file. This formats
the data so you can easily add it to Tealium iQ later.
3. Open the CSV file in a text editor to verify if proper formatting was applied.

Tealium University Understanding the Data Layer

 Page 8

Building Your Data Layer in Tealium iQ

Data Layer Tab
Once you have established what data you want your Data Layer to contain, add them to the Tealium
iQ console using its Data Layer tab. This allows Tealium to map those data sources to the third-party
Tag vendors. Click on a data source to reveal more information about the Tags, Extensions and
Load rules that use it. You can also edit or delete a data source from the tab. Depending on your
preference, you can choose to arrange the data sources in a grid view or switch to the List view. If a
data source is not added to this tab, Tealium won’t know to look for it, and it won’t be available for use
by other Tags.

Let us now proceed to learn how to add data sources to this tab.

Adding a Single Data Source

1. Navigate to the Data Layer tab and click the button. The ‘Add Data
Source’ dialog box will appear.

2. In the Source field, enter the data source’s name, “page_name”.

Tealium University Understanding the Data Layer

 Page 9

3. Select the Type from the drop-down list. The default selection is “UDO Variable”. Leave it as is.
4. Enter a suitable description for this data source. A good description is important later, when you’re
trying to quickly select the correct data source for mappings.
5. Enter an alias, such as “Page Name”, with which to display this data source in the Data Layer tab.
Without an alias, this data source will surface as “page_name”.
6. Click Apply. The data source is now added to the Data Layer tab.

Adding Data Sources in Bulk

To add large quantities of data sources at once,

1. Navigate to the Data Layer tab. Click the arrow of the button to drop-
down more options.

2. Click the Bulk Import from CSV button. This will open the Import Data Source text box.
3. Enter the CSV (comma-separated values) formatted data in the text field.

4. For this lab exercise, use the Sample Universal Data Object CSV that you downloaded earlier
from your demo site. Open the CSV file in your preferred text editor.
5. Copy and paste the formatted data in the Import Data Sources text-box.
Tealium University Understanding the Data Layer
 Page 10

6. Click Apply to import the data to the Data Layer tab.

NOTE: If you check the box next to ‘Replace All Data Sources’, Tealium replaces the Data Layer with
the new data sources listed in the Import Data Sources text field.

Adding Common Data Sources

If you want to quickly build your Data Layer using a group of commonly-used Data Sources, the Data
Layer wizard is just the tool for you. The wizard contains bundles of commonly used data sources,
organized according to their utility. You can select a bundle to import all the enclosed data sources in
to the Data Layer tab. Read the Description and Data Sources List listed on the right side and decide
which bundle best suits your needs.

1. Navigate to the Data Layer tab. Click the arrow of the button to drop down
more options.
2. Click the Add Common Data Sources button. This will open a dialog box with the same label.
3. From the categories on the left of the dialog box, select the bundle that you want to import into

your Data Layer tab. For this exercise, select Base Data Sources under the Standard Bundles.

4. Click the button. Then navigate to the Data Layer tab to view the new data
sources.

Tealium University Understanding the Data Layer

 Page 11

Adding Common E-Commerce Data Sources

The E-Commerce Data Source Bundle has been designed with your E-Commerce needs in mind.
Commonly-used E-Commerce variables—Product, Order, and Customer—are available at your
fingertips and can be imported to your Data Layer in a single click. And, Tealium offers a specialised
E-Commerce Extension (see Reviewing E-Commerce Extension) that allows you to send out your
E-Commerce data to any number of Tags.

NOTE: This bundle is designed to automatically add the E-commerce Extension to your profile
and set all the mappings. The importing action will not overwrite any existing data sources in your
Data Layer. If the E-Commerce Extension already exists, you will need to map the appropriate data
sources.

1. Follow Steps 1 and 2 from the previous exercise (see Adding Common Data Sources).
2. Under the Standard Bundles, click on E-Commerce Data Sources.

3. Click the button. This will import the E-Commerce data sources into your Data
Layer.
4. Navigate to the Data Layer tab and review the newly added data sources.

Tealium University Understanding the Data Layer

 Page 12

Adding Data Sources via Web Companion

1. Navigate to the demo site at http://biz.tagthis.co/biz###/ (where ### is your unique training ID).

2. Click the button on the top-right corner to launch the Web Companion. By default,
this action will open the Overview tab.
NOTE: To launch the Web Companion in your environment, you will need to install the bookmarklet in
your browser.

3. Click the Data tab. Here you can see all the data points
that are available on the webpage, both the ones you are
currently capturing in Tealium iQ and the ones you are
not.
4. Click the JavaScript Variables bar to drop down various
data points contained in it.
5. Scroll down through the list of data points and click
the utag_data bar. The view will expand to display all
variables nested under utag_data.

6. Click the button next to the data source you want

to add to the Data Layer.
7. The data source will queue for approval at the bottom of
the Web Companion tool.

8. Click the button.

9. Web companion will prompt you to enter your login
details. Enter your username and password to login in to
Tealium iQ. Click the Login button.
10. Upon logging into Tealium iQ, you can navigate to the
Data Layer tab to see the new data source that you
added using Web Companion.

Tealium University Understanding the Data Layer

 Page 13

Code Center
You have defined your Data Layer in Tealium iQ. Next, you need to combine it with Tealium’s
utag.js code and generate a script code. This is where Code Center comes in. Depending on
its configuration settings and the variables you added to the Data Layer tab, the Code Center
dynamically generates a block of script code that you can later add to your webpage’s code.

Adding the Data Layer to Your Webpage

1. Click on your name on the upper-right corner of the console to drop-down the Account Admin
menu.
2. Click Code Center. This action will open up the Code Center pop-up menu.

3. Select the environment that you will add your code to. This example has the “Prod” environment
selected.

Tealium University Understanding the Data Layer

 Page 14

4. Under the Tealium Script tab, you will notice the dynamically-generated script code. Mouse over
the code and click Select All button.
5. Copy the script code and paste it into your webpage’s code. Our best practices indicate that you
should place it after the opening <body> tag in your webpage’s HTML. Remember that the UDO
must go right above utag.js.
6. Take this opportunity to compare the code in the Code Center to the Data Layer you developed
in the CSV file. The code should contain everything from the CSV file that you plan to implement.
Make certain there are no discrepancies between the two.

Tealium University Understanding the Data Layer

 Page 15

Saving a Profile Version

At this point, you have generated a script code, using your Data layer and utag.js, and placed it on
your webpage with the objective of implementing Tealium’s Tag Management System. During this
process, you have made certain changes to your profile. Any change made to the profile triggers the
button to turn orange, indicating that it is time to save the changes.

To save and publish the changes to an environment,

1. Click the button. This action will open the Save/Publish pop-up menu.
2. Select the Save As button.
NOTE: A simple “Save” overwrites the current version to append the changes, making it impossible to
retrive previous settings or Tag configurations. On the other hand, “Save As” preserves a copy of the
current version and generates a new version to record the changes. The “Save As” feature provides
you with the opportunity to roll-back and retrive any of the older version.

3. Enter notes describing this save.This is a required field; you cannot save the version without
entering notes.
4. Select the Dev, QA, and Prod environments.
5. Click the Publish button at the lower corner of the console. This version is now published as a
new version.

6. Navigate to the Summary tab in the console and review the changes you made to the profile.

Tealium University Saving a Profile Version

 Page 16

Tag Management Fundamentals

In the preceding exercise, you determined what data you wished to capture and built a Data Layer
around it. Next, you installed the Web Companion tool to inspect and modify your site’s elements.
With the required tools and data in place, you will now learn how to implement Tag Management
System on your website. Before diving in to the details, it is essential to understand the building
blocks of Tag Management System:

• Tag: Adding a Tag is the first order of business. Tealium supports hundreds of third-party vendor
Tags in a variety of categories, including analytics, email, advertising, and much more.
• Load Rule: A logical condition that determines when and where a Tag should load. It operates like
a logic statement; if certain conditions are met, then the Tag loads.
• Extension: Tools to manipulate data before it is sent to your third-party vendor Tags. An Extension
can be scoped to a specific tag or applied to all Tags in your profile.

Use case 1: Google Universal Analytics (GUA) Tag

In this exercise, you will add an Analytics Tag from the Tags markeplace and configure it to load on
all pages of the demo site. Next, you will review the E-Commerce Extension you added in the earlier
exercise. Finally, you will publish the changes to an environment and create a new version.
Adding Google Universal Analytics (GUA) Tag
1. Log into Tealium iQ console and navigate to the Tags tab.
2. Click the button. The Tags Marketplace will appear.

Tealium University Tag Management Fundamentals

 Page 17

3. There are two ways to look up a Tag in the Marketplace: enter the Tag name in the Search bar or
click the appropriate category on the left and locate your desired Tag from the listing.

4. Look up the Google Universal Analytics Tag using either methods and click the button.
This will add it to the Tags tab.
5. The Tag Creation Wizard opens to guide you through the Tag configuration process. The
configurations are provided by Google, but for this lab you will enter placeholder values.

a. Look at the title for the GUA Tag. Entering a descriptive title will make it easy to determine the
purpose of the Tag at a glance. For this exercise, you can leave the default title as is.
b. For the Tracking ID field, enter your Google Analytics account number, “UA-23498230”.
c. The Domain and Tracker Name will be auto-detected; you can leave them blank.
d. Leave the other configuration options as their defaults.

Adding “Load on All Pages” Load Rule

1. In the Tag Creation wizard, click Next or click the Load Rules tab.
2. You do not currently have any special load rules set up, so leave the default ‘Load on All Pages’
option checked.

Tealium University Tag Management Fundamentals

 Page 18

Mapping a data source to GUA

1. In the Tag creation window, click Next or select Data Mappings tab.
2. From the Data Sources drop-down list, select the data source ‘page_name’.

3. Click the button. A mapping toolbox will open.

Tealium University Tag Management Fundamentals

 Page 19

4. Click Standard tab in the mapping toolbox and select ‘Title’.

5. Click Apply. The mapping you set up will appear in the Data Mappings window.

Take a moment to review the Tag configurations you set up for GUA.

Tealium University Tag Management Fundamentals

 Page 20

Reviewing E-commerce Extension

In this exercise, you will review the configurations of the E-Commerce Extension—which was
automatically added while importing the corresponding data source bundle (see Adding Common
E-Commerce Data Sources)—and map the appropriate Order and Product variables.

1. Navigate to the Extensions tab and click on the E-commerce Extension to expand its view. At this
point, all the mappings are automatically set.
2. Enter a suitable title in the Title field.
3. To map the Order and Product variables, click on the adjacent drop-down list and select the
appropriate data source.
NOTE: If you don’t wish to map a variable, set it to ‘Not Used’.

4. For the Order Values:

a. Order ID: Set order_id(js) to _corder
b. Order Total: Set order_total(js) to _ctotal
c. Sub-Total: Set order_subtotal(js) to _csubtotal
d. Shipping Amount: Set shipping(js) to _cship
e. Tax Amount: Set tax(js) to _ctax
f. Currency: Set currency(js) to _ccurrency
g. Customer City: Set city(js) to _ccity
h. Customer State: Set state(js) to _cstate
i. Customer Zip: Set zip(js) to _czip
j. Customer Country: Set ctry(js) to _ccountry

NOTE: Set the “Calculate Order Total (_ctotal)” option to “Yes”.

Tealium University Tag Management Fundamentals

 Page 21

For the Product Values:

a. List of Names: Set product_name(js) to _
cprodname
b. List of SKUs: Set product_sku(js) to _csku
c. List of Quantities: Set product_qty(js) to
_cquan
d. List of Prices: Set product_price(js) to _cprice
e. List variables Type: Set to Array type

NOTE: Make certain that the “Prices are in” option is set to ‘Unit Price’.

You have successfully mapped the appropriate data sources to their E-Commerce equivalents.
Now any Tags (GUA in this case) that use the E-Commerce Extension will automatically receive
E-Commerce data without the need for additional mapping.

Tealium University Tag Management Fundamentals

 Page 22

Publishing Use Case 1

In Use Case 1, you added an analytics Tag, a load rule and an Extension. Now it’s time to publish
your new version.

1. Click the button in the upper right corner of the console.

2. When the Save/Publish dialog appears, select .

3. Enter notes for this version.This field is mandatory; you cannot publish without adding notes for
the version.
4. Select the environments you wish to publish to. You can select any combination of the three
default publish environments: Dev, QA, or Prod. If you do not select an environment, you will not
be able to publish the saved changes.
5. Click Publish. You will have to wait a few seconds while the new version is published.
6. Navigate to the Versions tab to review the published version.

Tealium University Tag Management Fundamentals

 Page 23

Use Case 2: Google Adwords Conversion Tag (GAC)

In this exercise, you will begin by adding some data sources to the Data Layer tab. Next, you will add
a Google Adwords Conversion Tag and configure it load on the checkout page of the demo site. Later,
you will apply Extensions to set up a default data source value and store it in a persistent cookie.

Adding a Cookie data type

1. Navigate to the Data Layer tab in Tealium iQ
console.

2. Click the button.

3. Enter “adwords_campaign_id” in the Source
field.
4. Select “First Party Cookie” from the Type drop-
down list.
5. Enter “Cookie for Adwords Campaign” in the Description field.
6. Enter “Adword Campaign Cookie” in the Alias field.

Adding a Querystring Parameter data type

1. Open the Add Data Source dialog box, just like
you did above for adding the cookie.
2. Enter “utm_campaign” in the Source field.
3. Select “Querystring Parameter” from the Type
drop-down list.
4. Enter “Querystring Value Identifying AdWords
Campaign” in the Description field.
5. Enter “Adwords Campaign Parameter” in the Alias field.

Note: The Description and Alias fields are optional but recommended.

Adding Google Adwords Conversion Tag.

1. Navigate to the Tags tab in Tealium iQ console and click the button. This will bring up
the Tags marketplace.

2. Locate Google Adwords Conversion Tag and click the button. The Tag configuration
wizard will appear.

Tealium University Tag Management Fundamentals

 Page 24

3. Enter the following details pertinent to the Tag.

a. In the Title field, enter “Google Adwords Conversion”.
b. In the Conversion ID field, enter the placeholder value “1234567890”.
c. Enter a value for the Conversion Label, such as “fCbrCI-NjgUQqfGT0wM”
d. Leave the Conversion value field blank. This value is dynamically populated.

4. Click Next or click the Load Rules tab open the Load Rules creation wizard.

Tealium University Tag Management Fundamentals

 Page 25

Creating a new Load Rule

5. In the Load Rules tab, click the button to create a new load rule.
6. Enter “AdWords Checkout Page Only” in the Title field.
7. You want to load the GAC Tag only if the visitor comes from a Google AdWords campaign and is
on the order confirmation page. This requires two statements in the Load Rule:
a. Set up the condition: ‘url (dom)’ ‘contains’ “/checkout”. This statement uniquely identifies the
order confirmation page.
b. Click the plus button to add the AND condition: ‘adwords_campaign_id(cp)’ ‘is defined’.
8. Click the Apply button. The new Load Rule is automatically selected.

9. Click Finish in the Tag configuration wizard. The Google Adwords Conversions Tag is now added
to your profile and will only load when a visitor has come from a Google AdWords campaign and is
on the checkout page.

Adding Persist Data Value Extension

1. Navigate to the Extensions tab in the console and open the Extensions marketplace.
2. Add the Persist Data Value Extension located under the Standard Data tab in the Extensions
marketplace. This will open a configuration window.
3. Enter “AdWords Campaign” in the Title field.
4. You are persisting a query string parameter, so select ‘Variable’ from the Persist drop-down.
5. Select “utm_campaign(qp)” from the data source drop-down list next to it.
6. Set the Duration to ‘Session’.
7. Leave Update set at ‘Allow Update on Page View’.
8. Set the Condition to ‘utm_campaign’ ‘is populated’.
9. You will set up a cookie to persist the “utm_campaign” data value. Click the plus icon next to Store
in Cookie and select the cookie “adwords_campaign_id”.
Tealium University Tag Management Fundamentals
 Page 26

You have now set up the Persist Data Values Extension to store the value of the “utm_campaign”
querystring parameter whenever it detects it on a page.

Publishing Use Case 2

Follow this step-by-step procedure to publish a new version.

1. Click the button in the upper right corner of the console.

2. When the Save/Publish dialog appears, select .

3. Enter notes for this version.This field is mandatory; you cannot publish without adding notes for
the version.
4. Select the environments you wish to publish to. You can select any combination of the three
default publish environments: Dev, QA, or Prod.
5. Click Publish. You will have to wait a few seconds while the new version is published.
6. Navigate to the Versions tab to see the newly-deployed version.

Tealium University Tag Management Fundamentals

 Page 27

Advanced Load Rules

Here, you will brush up on Load Rules and learn how they can be customized for loading Tags on
specific pages and/or within a date range. Remember, you may apply a custom Rule to any number
of Tags in your profile.

By default, every profile starts with one load rule, called ‘All Pages’, which means the Tag loads on
all pages (that contain utag.js). Most tags load based on this load rule when they are first added to
Tealium iQ. To load a Tag under unique conditions, create a new load rule.

Loading Tags on Cart Page Only

You will build a new Rule to check if the url in the visitor’s browser contains “cart”, then apply it to your
desired Tag(s). The Tag(s) will load on the cart page if the Rule condition evaluates to ‘true’.

1. In Tealium iQ, go to Load Rules tab and click .

2. In the Load Rules wizard, enter ‘Cart Page Only’ in the Title field.
3. Set up the Rule conditions like so,
a. Select “url” from the first dropdown.
b. Select “contains” from the second dropdown.

c. Enter “cart” in the adjacent textbox.

4. Click Apply.
5. Go the Tags tab and edit the settings of your desired Tag(s). Then check the Cart Rule to apply it.

Tealium University Custom Load Rules

 Page 28

Loading Tags on Conversion Pages only

This exercise is very similar to the one above, only this Rule will check the url for three different
conversion pages: cart, checkout, and welcome. You will create three conditions and combine them
with OR logic so that fulfilling any one—without waiting to evaluate the others—is adequate to load
the Tag(s) on the relevant page only.

1. Add a new Rule and title it “Conversion Pages Only”.

2. Follow step #3 above to set up the cart page condition.

3. Click on and set up: “url” contains “checkout”

4. Repeat the OR logic to add: “url” contains “welcome”.

5. Click Apply.
6. Go to the Tags tab and apply this Rule to the Tag(s) of your choice.
7. Save/Publish the changes.

What happens next? The Rule will test the three conditions until atleast one holds ‘true’. For example,
the instant a visitor lands on the cart page, the ‘cart’ condition holds ‘true’ and your Tag(s) will load
only on that page. The remaining two conditions will not be evaluated. In the event none of the three
conditions are met, the Rule will fail to load the Tag(s).

Tealium University Custom Load Rules

 Page 29

Loading Tags with Time-Based Rules

A time-based Rule functions just like any other Rule, except that it will load your Tag(s) within the date
and/or time range you specify. To create one, you must insert a ‘Date Range’ besides adding other
logical conditions (as discussed in the exercise below).
NOTE: The time range is NOT based on the server’s or the visitor’s time zone. Instead, it follows the
the time zone set in the visitor’s browser.

Imagine you are running a 30-day spring campaign during which you’d like to load one or more Tags
when visitors apply the promo code “summer” towards their final order. The goal is for the Tag(s) to
load only when the campaign is active between May 1 to June 1, 2015.

Before getting started, add the ‘promo_code’ Source in your Data Layer so it easily available when
creating the Rule.

Now, begin creating the Rule:

1. Add a new Rule and enter “Spring Promo Code Campaign” in the Title field.
2. Set up the promo code condition: “promo_code” equals(ignore case) “summer”

3. Click and specify the exact dates and times:

a. Click on the Start field and select May 1 from the calendar.
b. Click on the adjacent field and set the time to 12:00 AM.
c. Repeat #a and #b to set the End range: 06/01/2015 at 12:00 AM.
4. Click Apply.
5. Go to the Tags tab and apply this Rule to the Tag(s) of your choice.
6. Save/Publish the changes.

Tealium University Custom Load Rules

 Page 30

Your new Rule will look something like this:

As soon as a visitor applies the ‘summer’ promo code, the Rule will proceed to check the browser’s
time zone. If the time zone falls within the date range you specified, the Rule is met and your Tag(s)
will load on the corresponding page. If the promo code is not “summer”, the Rule will fail and so will
the Tag.

Nested Load Rule

Combine AND and OR conditions within a single load rule to allow a Tag to load when the first of
multiple AND conditions is satisfied.

1. Click the ‘Add Load Rule’ button to open the Load Rules Creation Wizard.
2. Enter ‘Conversion Pages with Order Information’ in the Title field.
3. Create the first AND condition where the ‘url(dom)’’contains’”cart” AND ‘product_sku’’is populated’
4. Select the OR condition button
5. Create the second AND condition where ‘url(dom)’’contains’”checkout” AND ‘order_id’’is defined’
AND ‘order_id’’does not equal (ignore case)’”0”
6. Click the Apply button and the new Load Rule is created.

Tealium University Custom Load Rules

 Page 31

Load Rule Helper - Web Companion

If you prefer to work in a visual environment, the Web Companion Load Rule Helper will assist you in
creating load rules in a simulated environment and add them directly to your Tealium iQ profile.

1. Navigate to your Swell Prints Web Site

2. Add an item to your cart and checkout.
3. Launch Web Companion. (Note which Version and Environment you are simulating)

4. Click on ‘Tools Tab’ of Web Companion

5. Select Load Rule Helper. The Load Rule Wizard will pop up on your screen, along with a blue
banner at the top of the screen.

6. Enter in a title of “Checkout Page – Order greater than $100”

7. Select ‘url(dom)’’equals’ and allow the Load Rule Helper to generate the page information.
8. Select the AND condition
9. Create the condition that ‘_csubtotal’’is greater’”100”

Tealium University Custom Load Rules

 Page 32

10. Click the ADD QUEUE button

11. Select the Queue at the bottom of the Web Companion Screen.
12. Click SAVE, enter your Tealium iQ credentials, then click LOGIN.
13. Click SAVE TO PROFILE

14. Return to the Tealium iQ Console and refresh your screen.

15. Navigate to the Load Rules tab to see the load rule you created in Web Companion.
16. To Activate the load rule, toggle the load rule to ON

17. Save/Publish

Tealium University Custom Load Rules

 Page 33

jQuery onHandler (1.7 and above) Extension

Tealium’s Extension marketplace features a wide variety of Event Tracking tools and jQuery
onHandler is one of them. Before you begin using this Extension, be aware that it requires jQuery
(version 1.7 and above) installed on your page. For this exercise, you will use the Extension to track
clicks received by the carousel button on the homepage of your demosite (SwellPrints).

Adding Event Tracking Data Sources

Begin this exercise by importing the Event Tracking data sources, located under the Standard
Bundles (see Adding Common Data Sources). You will require these data sources for tracking events
such as page views or link clicks on your demo site.

Using jQuery onHandler Extension for Navigation Tracking

1. Navigate to the Extensions tab and add the jQuery onHandler (1.7 and above) Extension, located
under the Events tab in the marketplace. This will open the Extension’s configuration window.
2. Enter a title for the Extension, such as “Carousel Navigation”.
3. Next you will determine the attributes associated with the carousel button. Right-click on the
carousel button (either left or right) and select “Inspect Element”. This will open the Developer
Tools screen of your browser.

Tealium University jQuery onHandler Extension

 Page 34

4. Under the Elements tab of the screen, notice that the class attribute of the carousel button is
“carousel-control”. Enter “.carousel-control” in the jQuery Selector field. Leave the Primary
Selector field blank.
5. For Trigger On, select “mousedown” as the triggering action.
6. For Tracking Event, select “link”, so you can treat the event as a link click.
7. Decide which event-tracking data you want to send to Google Universal Analytics. Now is the time
to select the data sources from the Event Tracking bundle you added earlier.
8. To set the event’s type/category,
a. Select the “event_type” data source from the Set drop-down.
b. Leave the To field set at ‘Text’. Enter “Navigation” in the adjacent text bar.
9. Click the plus button at the far right to add another Set expression.
10. For the event’s target/action,
a. Select the “event_target” data source.
b. Leave the To field set at ‘Text’. Enter “Carousel” in the adjacent text bar.
11. Click the plus button and add another Set expression for the event’s label/attribute.
a. From the Set drop-down, select the “event_attr1” data source.
b. Set the To field to ‘JS Code’.
c. Enter this expression in the adjacent text bar: jQuery(this).attr(“data-slide”);

What does the jQuery expression do? It sets the “event_attr1” value to that of the carousel button’s
“data-slide” attribute.

Tealium University jQuery onHandler Extension

 Page 35

Here’s a screenshot of the Extension’s configuration window.

Publishing jQuery onHandler Extension

1. Click the button in the upper right corner of the console.

2. When the Save/Publish dialog appears, select .

3. Enter notes for this version.This field is mandatory; you cannot publish without adding notes for
the version.
4. Select the environments you wish to publish to. You can select any combination of the three
default publish environments: Dev, QA, or Prod. If you do not select an environment, you will not
be able to publish the saved changes.
5. Click Publish. You will have to wait a few seconds while the new version is published.
6. Navigate to the Versions tab to review the published version.

Tealium University jQuery onHandler Extension

 Page 36

Using jQuery onHandler for tracking Button Clicks

Now you will set up another jQuery onHandler Extension to track whenever a visitor clicks on the ‘Get
This Pic!’ button for the products displayed in the carousel. To do this:

1. Navigate to the Extensions tab and click on the jQuery onHandler Extension to expand it.

2. Click on the button in the upper-right corner of the Extension details.

3. A copy of the Extension is created, down to the last detail. Notice that it has a unique ID however.
The first thing you need to do is distinguish it from the original. Change its title to “Carousel Item
Click”.
4. Now you will identify the jQuery Selector of the ‘Get This Pic!’ button. Inspect the element, as you
did earlier for tracking the carousel button. Examine its attributes and the div container that it’s
wrapped in.
5. Enter this expression into the jQuery Selector field: div.carousel-caption > p > a.btn.
6. Modify the Set expressions as below.
a. For the event_target data source, change the ‘Text’ to “Carousel Products”.
b. For the event_attr1 data source, change the ‘JS Code’ to this expression: jQuery(this).attr(‘id’);
7. Save and publish your profile.

Tealium University jQuery onHandler Extension

 Page 37

Content Modification Extension via Web Companion

The Content Modification Extension is designed to serve specific content to each group. In this
exercise, you will use the Web Companion tool to access Content Modification Extension and modify
an HTML element on the demo site.

Adding Content Modification Extension

1. Navigate to the demo site at http://biz.tagthis.co/biz### (where ### is your unique training ID).

2. Click the button at the top-right corner to launch the tool.

NOTE: To launch the Web Companion in your environment, you need to install the bookmarklet in
your browser (see Adding Web Companion).
3. Select the Tools tab and click On Page Element Selector.
4. Move the crosshairs over the content you want to modify and click to focus on it. The ‘Displayed
Content’ field will display the selected content.
5. Click on the Add Content Modification Rule button.

6. In the Title field, enter “Content Modification”.

7. In the Content Modification text field, enter the replacement text (e.g. “Check out our surf pics”).
8. From the Placement drop-down, select “Replace Node Content (leave default)”.
9. Click Add to Queue button.

Tealium University Content Modification Extension via Web Companion

 Page 38

10. Click on the Queue at the bottom of Web Companion tool. You will see that the Extension is
awaiting approval.

11. Click the Save button. This will prompt you to log into your Tealium iQ account.
12. Login to Tealium iQ with your username and password. Then click Save to Profile button.
NOTE: By default, an Extension added from Web Companion is disabled in the console. Click the
toggle button to activate it.

Tealium University Content Modification Extension via Web Companion

 Page 39

To review the Extension, navigate to the Extensions Tab in the console and click on the Content
Modification Extension.

Publishing a new version

13. Click the button in the upper right corner of the console.

14. When the Save/Publish dialog box appears, select .

15. Enter notes for this version.This field is mandatory; you cannot publish without adding notes for
the version.
16. Select the environments you wish to publish to. You can select any combination of the three
default publish environments: Dev, QA, or Prod. If you do not select an environment, the changes
will be saved, but they will not be published.
17. Click Publish. You will have to wait a few seconds while the new version is published.
18. Navigate to the Versions tab to review the published version.

Tealium University Content Modification Extension via Web Companion

 Page 40

Versions
The Versions tab provides a snapshot of version history of your profile. You can view a history of
published saves and unpublished saves together with currently deployed version. Take a moment to
review its layout:

a. Legend – The legend indicates what the different colored buttons mean. A grey button points to
an old version, and a blue button indicates current version.
b. Filters: Filter the view to display versions based date of creation, users, publish environments,
and date range.
c. Environment Lines: If a version is connected to a particular line, then it was published to that
environment. You are able to quickly tell if a version was ever customer-facing.
d. Versions list: All the versions are listed here. Each version is displayed on the same level as its
folder icon. The icon indicates the version that you are currently viewing.

Tealium University Versions

 Page 41

Rollback to a previous version

You can rollback to an older version of your Tag implementation and republish it to any environment.
To rollback to an older version,

1. Navigate to the Versions tab.

2. Click on an old version from the Versions list at the right.
3. From its drop-down menu, click “Switch to this version“.

NOTE: The console alerts you to this action by displaying the following message: “You are viewing an
old version. Switch to the latest version.”

4. Click the button on the top-right corner of the console. The Save/Publish dialog
box will appear.
5. Select the Save As button and choose an environment in which to republish: Dev, QA, or Prod.
You can choose any combination of the environments to publish.
6. In the Notes field, add notes about the changes made to the version.
7. Click the Publish button to publish the version.

Tealium University Versions