Lab Companion - Nothing to See Here

Download Report

Transcript Lab Companion - Nothing to See Here

Internal Training
Tealium University
March 2014
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
Adding Web Companion………3
Using Web Companion………3
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………7
Data Layer Tab………7
Adding a Single Data Source………8
Adding Data Sources in Bulk………9
Adding Data Sources via Web Companion………10
Code Center………12
Adding the Data Layer to Your Webpage………12
Saving a Profile Version………14
Tag Management Fundamentals………15
Use case 1: Google Universal Analytics (GUA) Tag………15
Adding a Google Universal Analytics (GUA) Tag………15
Adding the “All Pages” Load Rule………16
Mapping a data source to GUA………17
Adding a Label to GUA Tag………18
Adding the Lower Casing Extension………19
Adding the 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………24
Adding Labels………25
Adding Persist Data Value Extension………25
Adding Set Data Values Extension………26
Mapping gac_conversion to GAC Conversion ID………26
Publishing Use Case 2………27
Content Modification Extension………28
Adding Content Modification Extension………28
Publishing a new version………30
Versions………31
Rollback to a previous version………31
Troubleshooting Protocol………33
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
“train###“ indicates a unique login such as train001, train002, etc. and ### is the unique training ID.
Tealium iQ console URL: https://tmu-my.tealiumiq.com
Username: train###@tealium.com
Password: train###
Lab Resources
To go through the lab exercises, you will need two resources:
• The sample Universal Data Object (UDO) for your demo site
• Lab Companion (PDF)
To download lab resources,
1. Navigate to your demo site at http://tagthis.co/train###/index.html (where ### is your unique
training ID).
2. On the top-left corner of your demo site, click Tools. From its drop-down menu, click READ ME.
3. To download the Lab Companion, click Bootcamp Lab Guides. Next, click Lab Companion and
save the PDF file on your computer.
4. To download the UDO for your demo site, click File Templates, then click Sample Universal Data
Object CSV.
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.
3. Click the Login button.
Getting Started with Tealium iQ
2
Summary Tab
Upon logging into Tealium iQ console, you will see the Summary tab. True to its name, this tab
summarizes Tag configurations in your profile.
NOTE: Since you have not added Tags or made any changes to your profile, the data sources
summary and the Tag summary will appear blank at this point.
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.
Getting Started with Tealium iQ
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. You will use Web Companion to verify the changes you made to the website.
Adding Web Companion
1. Click on your name 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 step #3.
Using Web Companion
1. Navigate to your demo site’s homepage.
2. From your browser’s bookmarks bar, click on the newly-created Web Companion bookmarklet.
This will open the Overview tab of the Web Companion.
Getting Started with Tealium iQ
4
Take a quick look at the tools within Web Companion:
• Overview Tab (in the figure above) contains a summary of your Tealium iQ account, profile,
version, and environment. Use this tab to verify if the Tags and Extensions employed in your
profile have loaded successfully.
• Data Tab contains an array of variables that can be added as data sources in Tealium iQ console.
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 3rd-party vendor Tags.
Getting Started with Tealium iQ
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 instead of the 3 default
environments (Dev, QA, Prod).
ØØ Adobe Test and Target Extension: Add this extension to modify targeted content on the
webpage.
Getting Started with Tealium iQ
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 3rd-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 3rd-party Tags without requiring you to include Tagspecific 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.
Understanding the Data Layer
7
1. Build your Data Layer in your preferred spreadsheet program. Each data source should contain
three values: the name, the type, and the description. Use “Data Layer” as the variable type for all
data sources. You will learn about other data source types in the later exercises.
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.
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 3rd-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 (as shown above) 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.
Understanding the Data Layer
8
Adding a Single Data Source
1. Navigate to the Data Layer tab and click the
button.
2. In the resulting pop-up box, enter the data source’s name, “page_name”.
3. Select the type from the drop-down list. The default selection is “Data Layer”. Leave it as is.
4. Enter a description for this data source. A good description is important later, when you’re trying to
quickly select the correct data source for mappings. Enter “Page Name” in the description field.
5. Click Apply. The data source is now added.
Understanding the Data Layer
9
Adding Data Sources in Bulk
Tealium iQ offers the ability to add large quantities of data sources at once. To add data sources in
bulk,
1. Navigate to the Data Layer tab and click the down arrow of the
2. Click
button .
button.
3. The Import Data Source pop-up box has a text field in which you can enter the CSV (commaseparated values) formatted data.
4. For this lab exercise, we will 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.
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.
Understanding the Data Layer
10
Adding Data Sources via Web Companion
1. Navigate to the demo site at http://tagthis.co/train###/index.html (where ### is your unique
training ID).
2. Click the newly-created bookmarklet from your bookmarks bar to launch Web Companion. By
default, this action will display the Overview tab.
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 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 “utag_data.cp.gclid_cookie”.
7. The corresponding row will turn green in color. This indicates that the data source has been added
to the Queue of changes at the bottom of the Web Companion tool.
Understanding the Data Layer
11
8. Click the
button to save the variable “utag_data.cp.gclid_cookie“.
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.
Understanding the Data Layer
12
Code Center
You have defined your Data Layer in Tealium iQ. Now you need to combine it with Tealium’s utag.
js code and generate a script code. This is where the Code Center tool comes in to the picture.
Depending on its configuration settings and the variables that 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.
Understanding the Data Layer
13
4. Under the Tealium Script tab, over to the right, 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 practises 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.
Understanding the Data Layer
14
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.
Saving a Profile Version
15
Tag Management Fundamentals
In the preceding exercise, you determined what data you wished to capture and built a Data Layer
around it. Subsequently, 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 3rd-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 3rd-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 add two extensions from the Extensions Marketplace to modify
data. Finally, you will publish the changes to an environment and create a new version.
Adding a 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 pop-up.
Tag Management Fundamentals
16
3. You can find Google Universal Analytics (GUA) Tag located under the Analytics tab. Or you may
enter its name in the Search bar, on the right of the pop-up box, and click the correct result to find
it.
4. Mouse over the GUA box to expand it and click
the button to add the Tag.
5. The Tag Creation Wizard opens to guide you through the Tag configuration process. This
information is 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 Account field, enter your Google Analytics account number, “UA-23498230“.
c. The other fields (Domain and Tracker Name) will be auto-detected; you can leave them blank.
d. Leave the other configuration options as their defaults.
Adding the “All Pages” Load Rule
1. In the Tag Creation wizard, click Next or select the Load Rules tab.
2. You do not currently have any special load rules set up, so leave the default ‘Display on All Pages’
option checked; you will deal more with load rules later. Click Next to proceed to the Mapped
Data Sources tab.
Tag Management Fundamentals
17
Mapping a data source to GUA
1. From the Data Sources drop-down list, select the data source ‘page_name’.
2. Click the
button. A mapping toolbox menu will open.
3. Click Standard tab in the mapping toolbox and select ‘Page’.
4. Click ‘Apply’. The mapping you set up will appear in the Mapped Data Sources tab window.
Tag Management Fundamentals
18
Adding a Label to GUA Tag
Labels help you uniquely identify a Tag, a load rule, or an extension. You can apply more than one
label to an element.
1. Navigate back to the Tags tab.
2. Click below Labels column in line with the GUA Tag. The
appear.
text field will
3. Enter “Generic“ in the text field.
4. Press enter or click the return arrow. The new label will automatically receive a color.
Take a moment to review the Tag configurations you set up for GUA. You will see the settings
configured for GUA together with the number of Load rules and Mapped data sources.
Tag Management Fundamentals
19
Adding the Lower Casing Extension
Lower casing extension will convert data (javascript, querystring,meta, cookie) to lower case.
1. Navigate to the Extensions tab in the console.
2. Click on the
button to bring up the Extensions marketplace.
3. Under Standard tab in the marketplace, locate Lower-casing extension and click the
button.
4. In the extension configuration wizard, enter “Lower Casing“ in the Title field. A descriptive title
makes it easy to identify the extension.
5. Click Scope to specify which Tags can use this extension. For this lab exercise, set the scope to
“All Tags”. This allows all the Tags to use this extension.
6. By default, the “All Variables to Lower Case” settings is set to “Yes”. Leave it as is.
7. To label the extension, click under Labels column in line with Lower casing extension. Select the
label “Generic”. If you want to add a new label, enter the label in the “Add new label” text field.
Tag Management Fundamentals
20
Adding the E-commerce Extension
E-Commerce is an essential part of your business, but managing your E-Commerce needs can
be difficult. There are many vendors, each with their unique data types and requirements. The
E-Commerce Extension allows you to easily manage your E-Commerce needs by providing one
location and format from which you can send out your E-Commerce data to any number of Tags.
1. Navigate to the Extensions tab and add the E-commerce Extension, located under the Advanced
tab of the Extensions marketplace.
2. Map the data sources to the E-Commerce variables. Click the drop-down list for a Data Source
and select the appropriate variable to map it to. Leave unused ones blank.
3. For the Order Variables:
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: Do not change the “Calculate Order Total” options at the bottom of the E-Commerce
Extension
Tag Management Fundamentals
21
For the product variables:
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
NOTE: Do not change the “Prices are in” options at the bottom of the E-Commerce Extension.
You have successfully added the E-Commerce Extension and mapped the appropriate data
sources to their E-Commerce equivalents. Now any Tags that use the E-Commerce Extension will
automatically receive E-Commerce data without the need for additional mapping.
Tag Management Fundamentals
22
Publishing Use Case 1
In Use Case 1, you added an analytics Tag, a load rule and two extensions. 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.
Tag Management Fundamentals
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 data source name
field.
4. Select “Cookie Value” from the Type drop-down list.
5. Enter “Adwords Campaign Cookie“ in the description field.
Adding a Querystring Parameter data type
1. In the Data Layer tab of the console, click the
button.
2. Enter “utm_campaign” in the data source name field.
3. Select “Querystring Parameter” from the Type drop-down
list.
4. Enter “Querystring Value Identifying AdWords Campaign“ in the description field.
Adding Google Adwords Conversion Tag.
1. Navigate to the Tags tab in Tealium iQ console and click the
the Tags marketplace.
2. Locate Google Adwords Conversion Tag and click the
button. This will bring up
button.
3. In the resulting Tag configuration wizard, enter the 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.
Tag Management Fundamentals
24
4. Click ‘Next’ or click the Load Rules tab open the Load rule creation wizard.
Creating a new Load Rule
5. In the Load rule 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
Tag Management Fundamentals
25
on the checkout page.
Adding Labels
To label the GAC Tag,
1. Select the Tags tab and click under the Labels column in line with GAC Tag.
2. Add the labels, “Generic” and “Kelly Slater Campaign“.
To label the Adwords Checkout Page Only Load rule,
3. Select the Load Rules tab and click under the Labels column in line with the load rule.
4. Add the label, “Generic“.
Adding Persist Data Value Extension
1. Navigate to the Extensions tab in the console.
2. Locate the Persist Data Value Extension in the Extensions marketplace, much like you did with the
E-Commerce Extension. You can find this Extension under the Standard Data tab.
3. Enter “AdWords Campaign“ as the title for the Extension.
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”.
10.Add the label, “Generic“ to this extension.
You have now set up the Persist Data Values Extension to store the value of the “utm_campaign”
Tag Management Fundamentals
26
querystring parameter whenever it detects it on a page.
Adding Set Data Values Extension
1. Navigate to the Extensions tab and add the Set Data Values Extension.
2. Enter “Kelly Campaign” in the title field.
3. For the Set drop-down list, you will need a new data source. Click the adjacent plus symbol and
add a Data Object-type data source named “gac_conversion”. Enter its description as “Google
AdWords Conversion Kelly Campaign“ and click Apply.
4. From the To drop-down, select ‘Text’ and enter “ ” into the field.
5. You need to set the conditions under which the text value of ‘987654321’ will be put in the ‘gac_
conversion’ data source. Click the ‘Add Condition’ button.
6. Enter the condition ‘adwords_campaign_id’ ‘equals’ “Kelly”.
7. Set the Scope of the Tag to “Google Adwords Conversion”. This indicates that the extension will
be available to GAC Tag only.
8. Label the extension as “Kelly Campaign“.
Mapping gac_conversion to GAC Conversion ID
1. Navigate to the Tags tab and click on GAC Tag to expand its Tag Configuration view.
2. Click the
button corresponding to the Mapped Data Sources section in the wizard.
3. Click the Data Sources drop-down list and select “gac_conversion“.
4. Click the
button. This will open up the mapping toolbox.
5. Select “Conversion ID“ from the list and click Apply. The mapped data sources ‘gac_conversion‘
Tag Management Fundamentals
27
will appear in the Tag configuration view.
Publishing Use Case 2
Follow the step-by-step procedure to publish a version as listed in Step 7 of Use Case 1.
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.
Tag Management Fundamentals
28
Content Modification Extension
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://tagthis.co/train###/index.html (where ### is your unique
training ID).
2. Click the Web Companion link from your browser’s bookmarks bar. This will launch the
bookmarklet.
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.
Content Modification Extension
29
6. In the Title field, enter “Content Modification“.
7. In the Content Modification text field, enter the replacement text “Check out our Surf Pics“.
8. From the Placement drop-down, select “Replace Node Content (leave default)”.
9. Click Add to Queue button.
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. Login to Tealium iQ console using your username and password.
12.Upon successful login, click Save to Profile button.
Content Modification Extension
30
To review the extension, navigate to the Extension Tab in the console and click on the Content
Modification Extension.
NOTE: By default, an extension added from Web Companion is disabled in the console. Click the
toggle button to activate it.
Publishing a new version
1. Click the
button in the upper right corner of the console.
2. When the Save/Publish dialog box 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, the changes
will be saved, but they will not be published.
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.
Content Modification Extension
31
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.
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“.
Versions
32
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
box will appear.
button on the top-right corner of the console. The Save/Publish dialog
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.
Versions
33
Troubleshooting Protocol
When a tag does not appear to be passing data using Web companion and TiQ, troubleshooting the
problem is your first line of defense. Listed below is a simple process to identify and fix the underlying
cause of a Tag failure.
1. Go to your demosite at http://tagthis.co/train###/index.html (where ### is your unique training ID).
Take a moment to review its contents and ensure that the site looks functional from a customer’s
perspective.
2. Open Web Companion from your browser’s bookmarks bar. The Overview tab is its default view.
3. Under the Tags tab of Web Companion tool, check the status of the Tags to ensure they are
loading properly. Identify the Tags that have failed to load.
4. Login to the Tealium iQ console at https://tmu-my.tealiumiq.com.
5. In the console, verify your account and profile information.
6. Navigate to the Tags tab in the console and click on the Tag that appears to have failed to load.
This will drop down its configuration view.
7. In the Tag configuration window, check the account number corresponding to the Tag. Look out for
any errors in the number.
8. Verify if the load rule attached to the Tag is functioning correctly. To do that, navigate to the Load
Rules tab and click on the ‘checkout page’ load rule.
9. Check the condition you have set up in the load rule: ‘url’ ‘contains’ Checkout.html.
Troubleshooting protocol
34
10.The text ‘Checkout’ is capitalized and needs to be changed to lowercase.
11.Click Apply to save the changes made to the load rule.
12.Click the
button. This action will open the Save/Publish pop-up menu.
13.Select the Save As button.
14.Enter notes describing this save.This is a required field; you cannot save the version without
entering notes.
15.Select the Dev environment.
16.Click the Publish button at the lower corner of the console. This version is now published as a
new version.
17.Refresh the demo site after 5 minutes. This allows the cache to clear up.
18.Launch the Web Companion from your browser’s bookmarks bar.
19.From the Overview tab, check your account and profile information. Verify if the Tags are firing
correctly.
Troubleshooting protocol