This article describes how to add a Tealium Custom Container Tag, which allows you to call a script on your page that is not normally supported by Tealium. Tealium's code will treat this Custom Container Tag as any other vendor Tag.

In this article:

Table of Contents Placeholder

Before You Begin

Using Tealium Custom Tags requires you to modify the Tag template and is only recommended for advanced users. You will need the appropriate permissions to modify Tag templates.  

Tealium Custom Container Setup

Adding a Tealium Custom Container Tag

  1. Search for the tag "Tealium Custom Container" in the Tag Marketplace and add the tag
  2. In the Title text field, of the Tag Configuration tab, enter a descriptive title indicating the Tag you intend to load through the template. Assign a unique name when using multiple tags by the same vendor.

If you're adding more than one Custom Container, making the title unique is very important to distinguish them. You can also identify each Tag by its UID number. This number corresponds to the number displayed in the Tags tab.

Set Load Rules

Navigate to the Load Rules tab and apply any load rules to the Tag, as necessary.

Set the Data Mappings

Navigate to the Data Mappings tab and apply and data mappings, as necessary.

The destination variable will then be available within the u.data object of the Custom Container. 

Tealium Custom Container Template Config

The Tealium Custom Container Template Config allows you to add or edit a script on your page that is not normally supported by Tealium. 

  1. Click on your account icon in the upper-right corner of the Tealium iQ console and select Account Admin > Manage Templates.
  2. Select "Tealium Custom Container" from the drop-down list. This will open the Tag template.

templateConfig.png

The template begins with a series of instructions inserted as comments. Read them carefully before proceeding to modify the template.

templateConfigJs.png​​

Modifying the Tag template and is only recommended for advanced users. You will need the appropriate permissions to modify Tag templates. Please note the following pointers before adding any code to the Custom Container Tag template.

Tag Library Code

To edit the mapping code, make your changes between the/* Start Tag Library Code */ and /* End Tag Library Code */ tags.

/* Start Tag Library Code */
/* End Tag Library Code */

Tag-Scoped Extensions Code

To edit the mapping code, make your changes between the/* Start Tag-Scoped Extensions Code */ and /* End Tag-Scoped Extensions Code */ tags.  Do not edit the line of code that says ##UTEXTENDED##.

/* Start Tag-Scoped Extensions Code */
/* Please Do Not Edit This Section */
##UTEXTEND##
/* End Tag-Scoped Extensions Code */

Mapping Code

To edit the mapping code, make your changes between the/* Start Mapping Code*/ and /* End Mapping Code */ tags.

/* Start Mapping Code */
for (d in utag.loader.GV(u.map)) {
if (b[d] !== undefined && b[d] !== "") {
e = u.map[d].split(",");
for (f = 0; f < e.length; f++) {
u.data[e[f]] = b[d];
}
}
}
/* End Mapping Code */

 Tag Sending Code

Insert your tag sending code between the/* Start Tag Sending Code */ and /* End Tag Sending Code */ tags.  This part of the template allows you to run your code first. 

/* Start Tag Sending Code */
// Insert your tag sending code here.
/* End Tag Sending Code */

Loader Callback Function / Callback Tag Sending Code

Between the/* Start Loader Callback Function */ and /* EndLoader Callback Function */ tags, uncomment the single-line comments starting with // to enable the JavaScript code to use the loader callback function. 

The loader function call allows you to load external JavaScript files. Within the loader callback function shown, insert the JavaScript code that should run after the external JavaScript file has loaded.

Between the inner /* Start Loader Callback Tag Sending Code */ and /* End Loader Callback Tag Sending Code */ tags for the Loader Callback Tag Sending Code, insert your post-loader tag sending code. 

/* Start Loader Callback Function */
/* Un-comment the single-line JavaScript comments ("//") to use this Loader callback function. */
//u.loader_cb = function () {
//u.initialized = true;
/* Start Loader Callback Tag Sending Code */
// Insert your post-Loader tag sending code here.
/* End Loader Callback Tag Sending Code */
//};
/* End Loader Callback Function */

Loader Function Call

Between the/* Start Loader Function Call */ and /* EndLoader Function Call */ tags, uncomment all the single-line comments starting with // to enable the JavaScript code to use the loader. 

The loader function call allows you to load external JavaScript files. After un-commenting, insert the path to the external JavaScript file you want to load. Finally, within the Loader callback function (shown above), insert the JavaScript code that should run after the external JavaScript file has loaded.

 
/* Start Loader Function Call */ 
/* Un-comment the single-line JavaScript comments ("//") to use Loader. */

//if (!u.initialized) {
  //u.loader({"type" : "iframe", "src" : u.data.base_url + c.join(u.data.qsp_delim), "cb" : u.loader_cb, "loc" : "body", "id" : 'utag_##UTID##' });
  //u.loader({"type" : "script", "src" : u.data.base_url, "cb" : u.loader_cb, "loc" : "script", "id" : 'utag_##UTID##' });
//} else { //u.loader_cb(); //} //u.loader({"type" : "img", "src" : u.data.base_url + c.join(u.data.qsp_delim) }); /* End Loader Function Call */

The line that begin with u.loader(["type" : "iframe",  is used for making image requests or generating iframes. You may leave this line of code commented if you do not intend to use this feature.

Save Changes

Save your changes to the template by clicking the appropriate save button.

  • Save Version Template - Select this option to save the updated template for the current version, not the entire profile. This will supersede the profile's template.
  • Save Profile Template - (Recommended) Select this option to save the updated template for all versions of the profile. 

Click the Save/Publish button on the upper-right corner to publish your changes, and select either Save to save the changes or Save As to save a changes as a new revision.