Tealium Learning Center

Attached is a block of code that you can copy and paste into a JavaScript Code Extension. If you need help adding a JavaScript Code Extension see this post: https://community.tealiumiq.com/t5/Tealium-iQ/JavaScript-Code-Extension/ta-p/11925 Once pasted into the JavaScript code extension there are two configuration fields at the very top of the code that you can customize: video_events and milestone_percentages. video_events - This is a list of events that you would like to track with the code. By default this is set up to track play, pause, complete and milestones, but you can simply add events to this like like "mute" to track when a user mutes the volume. You can also see a list of available events here. milestone_percentages - This is a list of percentages that you would like to track as milestones. By default this is set to trigger an event when the video has reached 25, 50, 75 and 90 percent complete. However, this can be customized to your specific milestones. You can deactivate milestone tracking by removed the "onTime" event from the video_events list.    This extension code will wait until the thePlatfrom player has been defined then run through the necessary functions to attach the listeners.  *** Though the code has logic to wait for the player to be defined, the JavaScript Code extension where you paste the code should be scoped to DOM Ready. *** Output Variables This code will output a set of data sources that you can add in the UI and then use to send data to your tag vendors.  The variables are as follows: event_type - "video" This will always equal video for these events event_name - "play", "pause", "resume", "complete", "milestone" These are the default names that will be output.  video_position - "11" This will output the position, in seconds, of the video when one of the events took place. i.e. pause or milestone video_duration - "119" This tells the over length of the video video_milestone - "M:1:25" This outputs the milestone number "1" and the milestone percentage "25." This allows you to see where your users are dropping out of the videos Attached is a csv file with these variables and descriptions for easy uploading into the Data Sources tab of the Tealium UI.  NOTE: This code will trigger the utag.link function instead of vendor specific code like the SiteCatalyst Media Module. The thought behind calling utag.link is then you'll have another extension that will determine when to call the Media Module functions so this extension is more "plug and play" with less customizations.  Data Sources Upload thePlatform Video Extension ... View more

Attached is a block of code that you can copy and paste into a JavaScript Code Extension. If you need help adding a JavaScript Code Extension see this post: JavaScript Code Extension Once pasted into the JavaScript code extension there are two configuration fields at the very top of the code that you can customize: video_events and milestone_percentages.  video_events - This is a list of events that you would like to track with the code. By default this is set up to track play, pause, complete, buffer and milestones, but you can simply add events to this like like "mute" to track when a user mutes the volume. A list of available events are found at the bottom of this post. You can also see a list of event here: https://developer.jwplayer.com/jw-player/docs/javascript-api-reference/ milestone_percentages - This is a list of percentages that you would like to track as milestones. By default this is set to trigger an event when the video has reached 25, 50, 75 and 90 percent complete. However, this can be customized to your specific milestones. You can deactivate milestone tracking by removed the "onTime" event from the video_events list.  This code will wait until the JWPlayer has been defined then run through the necessary functions to attach the listeners.  *** Though the code has logic to wait for the player to be defined, the JavaScript Code extension where you paste the code should be scoped to DOM Ready. *** Output Variables This code will output a set of data sources that you can add in the UI and then use to send data to your tag vendors.  The variables are as follows: event_type - "video" This will always equal video for these events event_name - "play", "pause", "resume", "bufer", "complete", "milestone" These are the default names that will be output. If you have customized the video_events variable as mentioned above then you may see something like: jwplayerMute for the 'mute' event.  video_position - "11" This will output the position, in seconds, of the video when one of the events took place. i.e. pause or milestone video_duration - "119" This tells the over length of the video video_milestone - "M:1:25" This outputs the milestone number "1" and the milestone percentage "25." This allows you to see where your users are dropping out of the videos Attached is a csv file with these variables and descriptions for easy uploading into the Data Sources tab of the Tealium UI.  JWPlayer Extension Data Sources Upload ... View more

Tealium's best practice is to load all tags Asynchronously. This post will outline how to follow the Tealium best practices when implementing Optimizely. For an understanding of the trade-offs between Asynchronous and Synchronous loading of testing tools see this POST. For options to implement Optimizely synchronously see this POST. There are two methods of implementing Optimizely Asynchronous. The content of your site and your testing requirements will determine which approach to use. It is recommended that you try the two methods in the order they appear in this post. NOTE: Both methods assume the utag.js file is coded asynchronously on the page.   Method 1 (RECOMMENDED): Bundle Optimizely Async Tag and load on all pages This method is recommended because the tag will not block anything else from loading in the page. Step 1: Enable the Bundling feature for Tags that will load on all pages. Click on "Save/Publish" in the top-right corner. Click on "Configure Publish Setting". Then scroll down to "Performance Optimization" settings. Turn ON the "Bundle Tags Loading On All Pages" toggle. This will bundle the Tag with utag.js, thus reducing the number of network calls made by the browser. STEP 2: Add and set up the Optimizely Async  Tag This Tag is available in Tealium's Tag Marketplace, which is home to a large selection of vendor Tags. Click here to learn how to add a Tag to your Tealium iQ profile.    Here are the steps to set it up: Enter your Project Id. This is the number at the end of the script tag Optimizely sends you. Example: <script src="//cdn.optimizely.com/js/123456789.js"></script> Drop down the 'Advanced Settings' list and set "Wait Flag = No". Proceed to Load Rules and check the default "Load on All Pages" rule. Proceed to Data Mappings and map the destinations you wish to send data to. Click here to learn how to map a data source to a Tag destination. NOTE: If you plan to track E-Commerce data with the Async Tag, we recommend that you use the E-Commerce Extension to automatically map that data.   Destination Name Destination Variable Description E-Commerce Extension Mapping (RECOMMENDED) Project ID projectId Project identifier provided by Optimizely N/A Order ID orderId Unique identifier assigned to the order "_corder" variable maps to this destination Revenue in Cents revenue Subtotal amount (in cents) of the order "_csubtotal" variable maps to this destination Event Name eventName Name/Type of conversion event Default event is "purchase" N/A STEP 3: Save/Publish your profile. IMPORTANT: For the Async Tag to fire as soon as possible, make sure the utag.js file is coded as high in the page as possible. Tealium recommends placing the utag.js at the top of the HTML <body> tag. Tealium will load the Optimizely JavaScript file and take care of the rest.   Method 2: Run Optimizely as blocking Tag Optimizely typically prefers to be synchronous on the page so it can run "sooner" and determine the test before other stuff (like your Analytics tool) runs. However, the only way to have Optimizely run soon enough and still be asynchronous is by serving its .js library from an alternate location. In doing so, the Optimizely Async Tag becomes a blocking Tag and any subsequent asynchronous scripts (e.g. utag.10.js) will not load until the blocking Tag is complete. NOTE: Make sure to upgrade the utag.js version if you are not already using the latest (see utag.js Release Notes). Repeat step #2 above to add and set up the Optimizely Async Tag. Drop down the Advanced Settings and enter the location of the .js library in the Custom Script Source field. Save/Publish your profile.   That's it! A few simple differences, but this will dramatically change the way the Optimizely file is loaded and how other tags are loaded after Optimizely. ... View more

The functions utag.view and utag.link are used to track page views and events. This article will show how to debug these functions to see how and when they are being called and what data is being passed. In this article: Table of Contents Placeholder Inspecting Console Logs The Tealium feedback in the Console, when debugging is activated, has been updated to include the contents of the utag.link and utag.view calls. Turn on the Console Debug Output. Perform the action that should invoke the utag.view or utag.link functions. If the utag.view or utag.link functions are called then examine the Console for trigger: view or trigger: link Here is an example of how this will look in the console for a utag.link call: Click on the black triangle  just below the line containing trigger to expand and collapse the view of the data passed.  For additional information regarding the output provided through console debugger, refer to built-in debugging functionality for the Tealium utag files.  Setting Breakpoints This method uses breakpoints in utag.js to pause the code when utag.link and utag.view calls are made. This allows you to review the data being passed as well as examine the stack trace to see where the call originated.  These steps use Google's Chrome browser. Go to the page where the function should be called and open the Developer Tools for that browser.  Select the Sources tab in the Developer Tools. Type the open command (Mac: cmd+o, PC: ctrl+o) and type utag.js to find the file. Select utag.js from the list of options. In the bottom left-hand corner click on the button that looks like open and closed curly brackets {} .  Type the search command (Mac: cmd+f, PC: ctrl+f) and type "track" to find the lines of code for the view and link functions, which both call utag.track : Click on the line numbers next to the lines beginning with return this.track( . Back in the web page window, perform an action to invoke the utag.view or utag.link  tracking functions. If a tracking call is made then one of these breakpoints will stop the action and you can debug the function. In the right-hand side of the developer tool there is a section called Watch Expressions. Click the plus sign + to add a watch expression. Type a and hit the Enter key. Expand the object that is contained in parameter  a  and this will show you all the data that has been set in the utag.view or utag.link function. This is the data that you have to work with in extensions, load rules and mappings.  One of the advantages of this method is that you can use the Call Stack, reported through the Developer Tools in the Sources tab, to inspect the origin of the tracking call. Here is an example when looking for the location of a utag.link call: Item (1) in the image above shows the breakpoint in utag.js that was placed to trap the utag.link call. Item (2), when clicked, shows the utag.link call that is made within the source code (to the left).  You have now successfully been able to debug three things: Did the breakpoint get hit. If yes, then the function is set up to be triggered correctly. Since the breakpoint was hit, you were able to see what data was sent when utag.view or utag.link was called.  You were able to view the actual configuration of the utag.view or utag.link call.  This is helpful when you are not seeing the correct data passed when certain events are triggered. Chances are the data being sent in the function is incorrect.  ... View more

Function Types Tealium has two event tracking function types: utag.link and utag.view. utag.link – Used to track post page load events that should be tracked as “click” events and not page views. This function will trigger the s.tl() function of the SiteCatalyst code. Events may include: clicks, hovers, video plays, etc. utag.view – Used to track post page load events that should be tracked as a page view. This function will trigger the s.t() function of the SiteCatalyst code. Events may include a modal popup that should be counted as a separate page. An AJAX heavy site may need to call this when the user views a new “page” but the browser does not refresh. This is also common in Checkout flows that do not navigate to separate pages, but rather the view changes when the user clicks “Next.” Example - Tracking a button on your site with utag.link: Here we are going to focus on sending the data to SC correctly. If further assistance is needed to configure the jQuery onHandler extension refer to this post: https://community.tealiumiq.com/t5/Tealium-iQ/jQuery-onHandler-Extension-jQuery-v1-7-and-up/ta-p/9868 So, let’s assume the jQuery onHandler extension is all set up to track a button on your site. Make sure the “link” option is chosen from the Tracking Event dropdown. This will trigger the utag.link function whenever the event is initialized. Now we are going to pass three variables and an event: eVar1, prop1, pev2 (link name) and event1. eVar1 = Click Type prop1 = Click Type pev2 = Link Name event1 = User Tool Interaction We are going to set up our JQuery Extension like so: Set:    click_type      To:    Text    “Social Button” Set:    link_name      To:    Text    “Pinterest” Depending on how the link is coded you can also dynamically retrieve the link name or link text using something like this:  Set:   link_name  To:  JS Code  jQuery(this).text(); This will grab the text value dynamically from the HTML instead of using a static value. The End result should be something like this: Mapping Data to SiteCatalyst Now we are going to map these data points to the SiteCatalyst tag. In the Mapping Section of the tag follow these steps: Select “click_type” from the Variables Dropdown. Click “Select Destination” In the Mapping Toolbox modal select prop1 from the Props tab then select eVar1 from the eVars tab. Now select the “Events” tab In the Value: box type in “Social Button” This is the value of the click_type variable that we are setting when the user clicks on the button. From the Trigger Dropdown select “event1” Select Apply. The end result of the mapping should be something like the following: To set the link text / link name value, we will use mappings to handle this. Select the variable being used to populate the link name and map that value to “linkName” like so: SiteCatalyst also has a linkType value that can be one of three values: o, e or d. e = Exit Link d = Download Link  o = Other Typically there isn’t any configuration needed when it comes to the link type. The SiteCatalyst library will automatically handle Download and Exit links if your tag is configured properly. Tealium will always default to “o” if there isn’t link type specified. However, if you do need to overwrite the default value or just want to set this manually you can map a variable to “linkType” in the mapping section like so: You’ve now configured your jQuery onHandler extension to create data on click of a button and pass that data to SiteCatalyst using the mappings section of the tag.  ... View more

This post outlines the steps to load Optimizely Synchronous via the utag.sync.js container. The utag.sync.js runs early in the page load when it is included in the <head></head> section of the page's HTML. To current users of the Optimizely Sync Tag: we highly recommend switching to this form of implementation as the Tag has been deprecated. Only existing Tag instances are supported. NOTE: Tealium's best practice is to load all tags Asynchronously. See this POST on how to implement Optimizely Asynchronous. For an understanding of the trade-offs between Asynchronous and Synchronous loading of testing tools see this POST. IMPORTANT: Optimizely Tool is unable to detect utag.sync.js At the time of writing, Optimizely's tool is NOT able to detect their Synchronous script when served via a Tag Management System. Running the tool on a page where Tealium iQ is serving the script causes it to display an error message (screenshot below). Optimizely is working quickly to resolve this issue, until which point it is safe to ignore the error message. Our recommendation would be to use the Ghostery tool to verify whether or not Optimizely Synchronous is loading on the page as expected.     Loading Optimizely Sync using utag.sync.js container (RECOMMENDED) This method assumes the utag.js file is coded Asynchronously on the page.   STEP 1: Enable utag.sync.js file creation In Tealium iQ, click the "Save/Publish" button in in the upper right corner. The Save/Publish window will appear. Click the "Configure Publish Settings" button in the upper right corner. The Publish Configuration settings will appear. Make sure the "General Publishing" tab is selected. Scroll down to the "Implementation" listing then enable the "Generate utag.sync.js" toggle. Click "Save" to apply the setting. STEP 2: Add the utag.sync.js script to all pages where tests will be performed. Here's how to access the script: Drop down your email-address/name in the top right corner and select 'Code Center'. In the left panel of the Code Center, select the environment of your choice. The corresponding code is displayed in the right panel. Select the "Sample HTML" tab and copy the utag.sync.js script. Copy the script and add it to the <head></head> section of your page's HTML. STEP 3: Configure Optimizely Project number Drop down your email-address/name in the top right corner and select 'Manage Templates'. Drop down the template listing and select "uTag Sync (Profile)". Paste the below block of code in the text editor. document.write('<script type="text/javascript" src="//cdn.optimizely.com/js/12345678.js"></scr'+'ipt>'); Replace "12345678" with the project number provided to you by Optimizely. Click 'Save Profile Template' and close the template window. STEP 4: Save/Publish your profile.   Now, on the page, the utag.sync.js file will load at the very top because it is inserted in the <head></head> of the HTML. This will synchronously load the Optimizely JavaScript file very early in the page load and the A/B tests will be initiated very early as well. Then, later in the page load process, the utag.js file will load and the rest of your Tags will load asynchronously. ... View more

This post shows how to use the Global mbox feature from Adobe Target (synchronous) while keeping the rest of the Tealium implementation asynchronous to mitigate risk. In this article: Table of Contents Placeholder Before You Begin This article assumes familiarity with the following topics: Adobe Target Tag Setup Guide Asynchronous Flicker Free Target Implementation Overview Adobe Target has two methods that can be used to modify content. Place Regional mboxes in pages in the exact locations where content will be modified. Place a Global mbox create statement in the page and define all logic within the Adobe TnT interface as to which content will be modified. This post will review the implementation for the Global mbox approach. The Global mbox approach is a synchronous implementation. As a best practice Tealium recommends that you keep everything asynchronous to mitigate risk. Be sure to understand the risks with loading elements synchronously. The method outlined in this post will allow you to keep your Tealium implementation asynchronous, but load the Global mbox synchronously. This solution also assumes you are using one of the later versions of the mbox.js file from Adobe Target. The later versions will create the container with the mboxDefault class automatically, whereas the older versions of mbox.js will not. If you are using an older version of mbox.js, we can still support it, but it will take an additional step. See the Legacy mbox.js section for more information. Enable utag.sync.js in Publish Settings First, you need to enable the appropriate Publish Setting: In Tealium iQ, click Save/Publish. The Save/Publish window will displays. Click Configure Publish Settings. Click to enable the Flicker-Free Support for Adobe Target feature. You will now have an additional template in the Manage Templates section where you can paste the code you want to load within the utag.sync.js file. Code utag.sync.js into page You will now need to code your pages with the utag.sync.js file. This file, as mentioned, should be included in the of the page and needs to be included synchronously. Ensure that the utag.sync.js file is included on all pages where you will use Adobe Target. With the utag.sync.js file, you will not be able to assign load rules to this file. The only way to keep the code within utag.sync.js from running would be to use "if" statements or other conditions within the file itself. Download mbox.js After you have set up your campaign and offer within the Adobe interface you'll need to download the mbox.js file. Host the mbox.js file locally You'll need to save the mbox.js file on all hosts (domains) serving mboxes. This needs to be a publicly accessible file so it can be loaded from your site. Configure utag.sync.js Once you have downloaded the mbox.js file, open the file and copy its contents. Open the template for the utag.sync.js file (uTag sync) within the Tealium user interface. This is done by clicking on your name in the upper right hand corner of the screen and selecting "Manage Templates." From the drop-down that appears, select "uTag sync." In the template copy and paste the following: var mboxjs_location = "//path/to/mbox.js"; var global_mbox_name = "Global mbox name"; document.write('<script src="' + mboxjs_location + '"></script>'); document.write('<script type="text/javascript">mboxCreate("'+global_mbox_name+'")</script>'); The first line is where you will add the path to your mbox.js file. Replace "//path/to/mbox.js" with the actual path. The second line is where you add the name of your Global mbox. Replace "Global mbox name" with the name of your Global mbox. Attached is a text file that shows what a sample utag.sync.js template would look like once you've added everything. Legacy mbox.js If you're using an older version of the mbox.js file you will need to create the mboxDefault element manually. To do this we will use similar code as above: //Create mboxDefault document.write('<div class="mboxDefault"></div>') This shouldn't need to be altered because it will simply create a div element in the head that is above the mboxCreate function that looks like this: <div class="mboxDefault"></div> This block needs to go between the two existing lines that start with document.write. Using this method, in the utag.sync.js file you will have the mbox.js code, followed by this other block of code that creates the element, then you will have the code that calls the mboxCreate function. You can see a sample of this in the Sample utag.sync.js Legacy Template file that is attached. Conclusion Once this is set up, you will have the utag.sync.js file coded into the head of your website SYNCHRONOUSLY. In the body of your page you will have the main Tealium Library (utag.js) file loaded ASYNCHRONOUSLY. Within the utag.sync.js you will have pasted the mbox.js file and added a small snippet, or two small snippets, to call mboxCreate() . That's it! utag.footer.js is deprecated and is no longer an option. Older implementations that are using utag.footer.js will continue to function as before. You do not need to change the scope for your old Content Modification extensions. The old Content Modification extensions originally scoped to 'Footer' will appear to be scoped to 'DOM Ready' and will continue to publish to the utag.footer.js file. ... View more

Tealium's best practice is to load all tags Asynchronously. This post will outline how to follow the Tealium best practices when implementing Optimizely. For an understanding of the trade-offs between Asynchronous and Synchronous loading of testing tools see this POST. For options to implement Optimizely synchronously see this POST. There are two methods of implementing Optimizely Asynchronous. The content of your site and your testing requirements will determine which approach to use. It is recommended that you try the two methods in the order they appear in this post. NOTE: Both methods assume the utag.js file is coded asynchronously on the page.   Method 1 (RECOMMENDED): Bundle Optimizely Async Tag and load on all pages This method is recommended because the tag will not block anything else from loading in the page. Step 1: Enable the Bundling feature for Tags that will load on all pages. Click on "Save/Publish" in the top-right corner. Click on "Configure Publish Setting". Then scroll down to "Performance Optimization" settings. Turn ON the "Bundle Tags Loading On All Pages" toggle. This will bundle the Tag with utag.js, thus reducing the number of network calls made by the browser. STEP 2: Add and set up the Optimizely Async  Tag This Tag is available in Tealium's Tag Marketplace, which is home to a large selection of vendor Tags. Click here to learn how to add a Tag to your Tealium iQ profile.    Here are the steps to set it up: Enter your Project Id. This is the number at the end of the script tag Optimizely sends you. Example: <script src="//cdn.optimizely.com/js/123456789.js"></script> Drop down the 'Advanced Settings' list and set "Wait Flag = No". Proceed to Load Rules and check the default "Load on All Pages" rule. Proceed to Data Mappings and map the destinations you wish to send data to. Click here to learn how to map a data source to a Tag destination. NOTE: If you plan to track E-Commerce data with the Async Tag, we recommend that you use the E-Commerce Extension to automatically map that data.   Destination Name Destination Variable Description E-Commerce Extension Mapping (RECOMMENDED) Project ID projectId Project identifier provided by Optimizely N/A Order ID orderId Unique identifier assigned to the order "_corder" variable maps to this destination Revenue in Cents revenue Subtotal amount (in cents) of the order "_csubtotal" variable maps to this destination Event Name eventName Name/Type of conversion event Default event is "purchase" N/A STEP 3: Save/Publish your profile. IMPORTANT: For the Async Tag to fire as soon as possible, make sure the utag.js file is coded as high in the page as possible. Tealium recommends placing the utag.js at the top of the HTML <body> tag. Tealium will load the Optimizely JavaScript file and take care of the rest.   Method 2: Run Optimizely as blocking Tag Optimizely typically prefers to be synchronous on the page so it can run "sooner" and determine the test before other stuff (like your Analytics tool) runs. However, the only way to have Optimizely run soon enough and still be asynchronous is by serving its .js library from an alternate location. In doing so, the Optimizely Async Tag becomes a blocking Tag and any subsequent asynchronous scripts (e.g. utag.10.js) will not load until the blocking Tag is complete. NOTE: Make sure to upgrade the utag.js version if you are not already using the latest (see utag.js Release Notes). Repeat step #2 above to add and set up the Optimizely Async Tag. Drop down the Advanced Settings and enter the location of the .js library in the Custom Script Source field. Save/Publish your profile.   That's it! A few simple differences, but this will dramatically change the way the Optimizely file is loaded and how other tags are loaded after Optimizely. ... View more

This article lists the names, descriptions, and example values of the parameters used in the Acoustic Digital Analytics tracking pixel. In this article: Overview There are many parameters used in the Acoustic Digital Analytics tracking pixels and many types of tracking calls. Use this guide to help troubleshoot and verify that your instance of this tag is working as expected. General Parameters Acoustic Digital Analytics Parameter Description ac not sure at action tag ID (at 5 = Shop Action 5, at 9 = Shop Action 9) bp base price c_a1-c_a50 extra Conversion Event tag attributes for Explore cat conversion action type (1=initiated event, 2=completed event) cc currency code ccid conversion event category ID cd registration code cg category for pages or products (used for CDF file) ci Client ID cid conversion event ID cjen JSF parameter enabled flag cjsid JSF session ID cjuid JSF user ID cjvf JSF valid flag cm_mmca1-cm_mmca50 extra marketing program tags for Explore cm_re real estate tracking cm_sp site promotions tracking cpt conversion points for conversion events ct billing city cx1-cx15 extra custom fields for conversion events cy billing country e_a1-e_a50 extra Element Tag attributes for Explore ec character set encoding ecat element category eid element ID em email address fi form inputs fo not sure (form related) ha1 not sure hr href je Boolean answering "is Java enabled?" jv Javascript version lp landing page nm name of link np0-15 technical browser properties o_a1-o_a50 extra Order Tag attributes for Explore on order number or11 extra order attributes osk order SKU pc Boolean answering "is this a page view?" pd Color depth pflg product or page element? (product = 1, page = 0) pi Page ID (page name) pm product name pr product number pr_a1-pr_a50 extra Product View tag attributes for Explore pv_a1-pv_a50 extra Page View tag attributes for Explore qt quantity rf referring URL rg1-rg50 extra Registration Tag attributes for Explore rnd Random # (used for cache-busting) rs not sure s_a1-s_a50 extra Shop Tag attributes for Explore sa billing state se search start page sg shipping sh Screen height sr # of search results st Session start time sw Screen width sx11 extra custom shop fields ti not sure tid Tag ID/type:   tid 1 = page view tag   tid 2 = registration tag   tid 3 = order info tag   tid 4 = shop tag (+action 5 =shopping cart tag, +action 9 = order receipt tag)   tid 5 = product view tag   tid 6 = technical properties tag   tid 7 = custom details tag   tid 8 = link click tag (for real estate/ site promotions click tracking)   tid 9 = link impressions tag (for cm_sp impression tagging)   tid 10 = form action tag (auto-generated for forms)   tid 14 = conversion event tag   tid 15 = element tag   tid 404 = error tag tr total revenue tz Time zone ul Destination URL. The URL of the page. vn1 Acoustic Digital Analytics library version vn2 Acoustic Digital Analytics library version #2 zp not sure PageView (cmCreatePageViewTag) Acoustic Digital Analytics Parameter Sample Value Description ci 12345678 Client Id st 1.39818E+12 Session start time vn1 4.14.33 Acoustic Digital Analytics library version ec utf-8 character set encoding vn2 e4.0 Acoustic Digital Analytics library version #2 pi Order Confirmation Page ID (page name) ul http://jaredtest.com/~Hislop/Demo/index.html Destination URL. The URL of the page. tid 1 Tag ID/type: rnd 1.39819E+12 Random # (used for cache-busting) Product View (cmCreateProductViewTag) Acoustic Digital Analytics Parameter Sample Value Description tid 5 Tag ID/type: ci 12345678 Client ID vn2 e4.0 Acoustic Digital Analytics library version #2 st 1.39818E+12 Session start time vn1 4.14.33 Acoustic Digital Analytics library version ec utf-8 character set encoding pi Product A1 Page ID (page name) pr 010A product number pm Product A product name pc N Boolean answering "is this a page view?" rnd 1.39819E+12 Random # (used for cache-busting) ul http://jaredtest.com/~Hislop/Demo/pdp_A1.html Destination URL. The URL of the page. rf http://jaredtest.com/~Hislop/Demo/index.html referring URL Cart View (cmCreateShopAction5Tag) Acoustic Digital Analytics Parameter Sample Value Description tid 4 Tag ID/type: ci 12345678 Client ID vn2 e4.0 Acoustic Digital Analytics library version #2 st 1.39819E+12 Session start time vn1 4.14.33 Acoustic Digital Analytics library version ec utf-8 character set encoding pr 010A product number pm Product A product name qt 2 quantity bp 10 base price ha1 1fdc2886b4746e0243340fb01cb1a3ca3181674c not sure at 5 action tag ID (at 5 = Shop Action 5, at 9 = Shop Action 9) pc N Boolean answering "is this a page view?" rnd 1.39819E+12 Random # (used for cache-busting) ul http://jaredtest.com/~Hislop/Demo/view_cart.html Destination URL. The URL of the page. rf http://jaredtest.com/~Hislop/Demo/pdp_A1.html referring URL Order Tag (cmCreateOrderTag) Acoustic Digital Analytics Parameter Sample Value Description tid 3 Tag ID/type: ci 12345678 Client ID vn2 e4.0 Acoustic Digital Analytics library version #2 st 1.39819E+12 Session start time vn1 4.14.33 Acoustic Digital Analytics library version ec utf-8 character set encoding on 5706 order number tr 95 total revenue cd 1.39819E+12 registration code rnd 1.3982E+12 Random # (used for cache-busting) ul http://jaredtest.com/~Hislop/Demo/confirm.html Destination URL. The URL of the page. Products in Order (cmCreateShopAction9Tag) There should be one ShopAction9 tag for each product in the order. For example, if three products were ordered there will be three ShopAction9 tags. Acoustic Digital Analytics Parameter Sample Value Description tid 4 Tag ID/type: ci 12345678 Client ID vn2 e4.0 Acoustic Digital Analytics library version #2 st 1.39819E+12 Session start time vn1 4.14.33 Acoustic Digital Analytics library version ec utf-8 character set encoding pr 41-665 product number pm Lazy Lamp Shade product name qt 2 quantity bp 50 base price ha1 1fdc2886b4746e0243340fb01cb1a3ca3181674c not sure cd 1.39819E+12 registration code on 5706 order number tr 95 total revenue at 9 action tag ID (at 5 = Shop Action 5, at 9 = Shop Action 9) pc N Boolean answering "is this a page view?" rnd 1.39819E+12 Random # (used for cache-busting) ul http://jaredtest.com/~Hislop/Demo/confirm.html Destination URL. The URL of the page. Element Tag (cmCreateElementTag) Acoustic Digital Analytics Parameter Sample Value Description tid 15 Tag ID/type: ci 12345678 Client ID vn2 e4.0 Acoustic Digital Analytics library version #2 st 1.39819E+12 Session start time vn1 4.14.33 Acoustic Digital Analytics library version ec utf-8 character set encoding eid mens shirts element ID ecat nav click element category rnd 1.3982E+12 Random # (used for cache-busting) ul http://jaredtest.com/~Hislop/Demo/confirm.html Destination URL. The URL of the page. Conversion Event Tag (cmCreateConversionTag) Acoustic Digital Analytics Parameter Sample Value Description tid 14 Tag ID/type: ci 12345678 Client ID vn2 e4.0 Acoustic Digital Analytics library version #2 st 1.39819E+12 Session start time vn1 4.14.33 Acoustic Digital Analytics library version ec utf-8 character set encoding cid homepage email signup conversion event ID cat 2 conversion action type (1=initiated event, 2=completed event) ccid email signup conversion event category ID rnd 1.3982E+12 Random # (used for cache-busting) ul http://jaredtest.com/~Hislop/Demo/index.html Destination URL. The URL of the page. ... View more

This article shows how to set up and configure the Tealium Generic Tag, a one-size-fits-most generic tag container used for implementing almost any third-party vendor image, iframe, or script-style tag to your pages. See Related Tealium Pixel Container Tag Tealium Custom Container Tag In this article: Table of Contents Placeholder Tag Types This tag supports one of three types: image, iframe, or script. Identifying the type of tag you are working with is important, so here are some clues to look for when setting up your tag. If the code for your tag matches any of these patterns, then choose the corresponding tag type in the tag configuration. Image Image tag code snippets usually contain one of the following:   new Image()   <img src="https://   document.write("<img src=" ... ">"); Iframe Iframe tag code snippets usually contain one of the following:   document.createElement('iframe')   <iframe src="https://   document.write("<iframe src=" ... "></iframe"); Script Script tag code snippets usually contain one of the following:   <script type="text/javascript" src="//example.com/tag.js"></script>   document.createElement('script') Tag Components To configure the Generic Tag you will need to understand the following components that make up your tag. Base URL The base URL is the hostname, pathname, and file pointing to the location of the pixel. It does not include the "?" character or the query string parameters. In our sample pixel above, the base url is: //www.example.com/tag.gif Static and Dynamic Parameters Many tags collect data by using the query string of the URL. These are the key/value pairs that appear in the URL after the "?" character. In our example the parameters are: cid=112233&rg=us&rnd=' + rnd_nocache + '&ref=' + referrer Static parameters have values that you can see in the snippet and do not change from page to page. In this example, the static parameters are:   cid=112233   rg=us Dynamic parameters are values that change from page to page. In this example, the dynamic parameters are:   rnd=   ref= Dynamic parameters can be configured using data mappings or using value substition.  Cache Bust It's common for vendor tags to require a cache bust variable in the query string. This value is randomly generated and added to URLs to prevent the browser from caching the request. Our example includes a cache busting variable called rnd . This functionality is built into the Generic Tag. Simply enable the cache bust setting and specify the name of the cache bust parameter and the Generic Tag will generate and assign the random value for you. Tag Configuration First, go to the Tag Marketplace and add the Generic Tag to your profile (how to add a Tag?). After adding the Tag, configure the below settings: Title (required): The default is "Tealium Generic Tag". You may replace it with a custom name of choice. Type (required): Select the type of tag. Base URL (required): Enter the base url (excluding the protocol) HTTPS URL: Use this field if the HTTPS url is different from the Base URL. If the Base and HTTPS URL is the same, then add "//" as the prefix in the Base URL field and leave the HTTPS URL field empty. This tells the Tealium Generic Tag to apply HTTP and HTTPS appropriately based on the current location protocol. If the URLs are different, set their respective fields. Query String Delimiter: The delimiter character that separates the query string portion from the URL. The default is "?", but this can be changed. Parameter Delimiter: The delimiter character that separates each key-value pair in the query string. The default is "&", but this can be changed. Key/Value Delimiter: The delimiter character that separates a key from its value. The default is "=", but this can be changed. Query String: Enter static and dynamic query string parameters using the delimiters defined. Dynamic Value Substitution This tag supports dynamic value substitution, which allows you to reference data layer variables directly in the Base URL, HTTPS URL, or Query String configuration fields. This provides the flexibility to create a dynamic tag based on your data layer. To use a data layer variable in a field, reference the variable name by surrounding it with "@@". For example, to insert a data layer variable named "account_id" into the path of the URL, enter a value like this: //example.com/path/@@account_id@@/i.gif Each type of data layer variable can be substituted using the following prefixes: Universal Data Object - @@variable@@ Javascript Page Variable - @@js_page.variable@@ Meta Tag - @@meta.variable@@ Querystring Parameter - @@qp.variable@@ Cookie Value - @@cp.variable@@ Load Rules Load Rules determine when and where to load an instance of this Tag on your site. Data Mappings Mapping is the process of sending data from a Data Layer Variable to the corresponding destination variable of the vendor tag. For instructions on how to map a variable to a tag destination, see Data Mappings. The Tealium Generic tag supports custom mappings only. You set a custom destination name in the text field. All data mappings are appended to the query string parameter of the tag URL as key/value pairs. Callback Function If your tag requires code to run after the main library has loaded you can use the callback function.The Generic Tag defines an internal callback property named u.callback that you can redefine within a tag-scoped Javascript Code extension. Simply create a new extension, add your callback code, and scope it to the Generic Tag. This code will then run after the tag code has executed on the page. The u.callback function cannot be used when the Generic Tag type is set to "image". Example: // Put this code in a Javascript Code extension scoped to the tag. u.callback = function() { console.log("The tag has loaded, now do cool stuff!"); } ... View more

Optimizely Tag: Basic Configuration By Seth Todd Optimizely: Asynchronous Implementation By Jared Hislop Optimizely: Synchronous Implementation By Jared Hislop Tealium Tool: Optimizely Helper By Seth Todd ... View more

The jQuery onHandler extension is used to trigger tracking events (or custom code) based on event bindings to standard on-page events, such as click, mouse down, focus, and others. In this article: Table of Contents Placeholder Prerequisites jQuery version 1.7 and up (See the jQuery Version article for detailed instructions on how to check the jQuery version for your site). How It Works Use the jQuery onHandler extension works by selecting a jQuery selector identifier to be tracked, and then selecting the type of trigger action event. Standard on-page events, such as click, mouse down, focus, and others.may be tracked by providing custom JavaScript code. Using the Extension Before you begin, familiarize yourself with how extensions work. Once the extension is added, it has several configuration options. If you are fimilar with the jQuery on() method then these settings will be familiar. jQuery Selector: A selector string to filter the elements from the primary selected elements that trigger the event. Primary Selector: (Default: body) A parent selector string for the elements to target. Trigger On: The event type that will trigger the action. show: When a hidden element appears on the page. hide: When a displayed element is hidden from the page. click: When the mouse pointer is over the element and the mouse button is pressed and released. mousedown: When the mouse pointer is over the element, and the mouse button is pressed. mouseup: When the mouse pointer is over the element, and the mouse button is released. mouseover: When the mouse pointer enters the element. change: When the value changes within <input> , <select> , and <textarea> elements blur: When an element loses focus, such as when the mouse is clicked away from it or the tab key is pressed. focus: When an element gains focus, such as when it is selected by a mouse click or the tab key. Tracking Event: The action to take when the event is triggered. link: Calls utag.link() view: Calls utag.view() custom: Runs the code that you provide Set To: Used with the link and view actions, this allows you to set data layer variables to be passed to utag.view() and utag.link() . Condition: (Optional) A condition can be added to control if the extension should run at all. Generated Code The generated JavaScript code for this extension will vary depending on the settings for Tracking Event and Set To. The settings will generate code in the following form: $( "Primary Selector" ).on( "Trigger On", "jQuery Selector", function() { // ------------------ // Tracking Event: link (or view) // utag.link({ // Variables from Set To // "variable1" : "value1", // "variable2" : "value2" // }); // ------------------ // Tracking Event: custom // Your code here }); You can see that when the Tracking Event is set to link or view, the code that executes is simply a call to the corresponding utag tracking call, utag.link() or utag.view() . If you use the Set To options to set data layer variables, then those will appear as an inline object passed to the tracking method. If you set Tracking Event to "custom", then the code that you provide in the text box is that code that will run. Determining the Selector There are many ways to determine the selector of a page element. Read more about this in the article How to Determine the CSS Selector of an Element. Order of Operations It's important to note that this extension always runs at DOM Ready. This means it runs once on page load and out of band from the All Tags extensions. Learn more about Order of Operations. Working with the Data Layer It's common to need to reference variables in your data layer in this extension, either to create conditions or to set values in the tracking call. It's important to know how this works so that you can be sure the extension is doing what you expect. Conditions If you add a condition to this extension, the values will be referenced in the object utag.data . This is the data object that gets created as the Universal Tag runs in the page. Set To Variables If you trigger a view or link event, then you will likley also be setting data layer variables as part of the tracking event. If you don't set any variables, then an empty tracking is made: utag.link(); // or utag.view() If you do set variables, then they will be set and passed in an anonymous data object to the tracking call, like this: utag.link({ "variable1" : "value1", "variable2" : "value2" }); The values set can use the standard options: Text: The values are passed just as you type them. Variable: The values will be fetched from the utag.data . JS Code: Allows you to reference the $(this) object to access dynamic values based on the event item. Example Let's say we have a feedback form on the page and we want to track when it gets submitted by tracking clicks on the submit button. In the tracking call we want to collect the comment that was typed and the visitor's logged in username. The tracking call we want to call might look like this: utag.link({ "tealium_event": 'feedback_submitted', "feedback_message": '', "username": '' }) To configure this event in the jQuery Extension we need the selector for the submit button and three data layer variables. The name of the event will be hard-coded and the username is already populated in the page UDO, but the feedback message has to be retrieved dynamically from the form. In this example our feedback form has an ID of "feedbackForm". Let's see how this will look in the extension: In this example we had to determine the selector for the button: input.submit-action . Since there might be more than one submit button on a page, we also set the Primary Selector to narrow the selector down to only the feedback form. We fetch the feedback text dynamically using jQuery to select the value of the textarea input in the form. Also, since the username variable is already set in the UDO, we can reuse that value to include it in the tracking call. This extension will result in the following code on your page: jQuery('#feedbackForm').on('mousedown', 'input.submit-action', function(e) { utag.link({ "tealium_event" : 'feedback_submitted', "feedback_message" : $('#feedbackForm textarea').val(), "username" : utag.data['username'] }) });   ... View more