A note of caution: this is for advanced users.

Overview

For AJAX integrations, Tealium provides two primary functions: utag.view() for view tracking and utag.link() for link tracking. For generic event types there is also a utag.track() function used for advanced deployments, but we recommend you stick to utag.link() and utag.view(). Because AJAX sections are dynamically loaded and we cannot see when new content is loaded, we are required to include these functions in your code in addition to the usual utag.js include. The functions should reside within the code of the content you are tracking.

To determine if a Tag can receive data passed in by utag.link or utag.view, look for the u.ev={} line of code of the Tag's template. Note that not all Tag templates support utag.link() and/or utag.view().

To check if a Tag template supports utag.link() or utag.view():

  1. From the Tealium iQ console, click on your email address in the upper right corner.
  2. From the Admin menu, click 'Manage Templates'. You must have the appropriate permissions to view the templates.
  3. From the drop-down list, select the Tag template you want.
  4. Look for the "u.ev={};" line. If it contains 'link' then utag.link() is supported. If it contains 'view' then utag.view() is supported. In the image below you can see that both utag.link() and utag.view() are supported.

Click Manage Templates Select Tag Template Determining Link or View


Link Tracking

Link tracking can be done manually with a hard-coded utag.link() call on your site. This option should be used for the following two scenarios:

  • If jQuery is not installed on the website.
  • If the values that need to be passed are dynamically determined on the fly and the data is not available via Javascript or jQuery. For example, if user authentication occurs and you want to pass back the Customer ID created and stored in a database.

Note: If jQuery is installed, we recommend you use the jQuery onHandler (jQuery 1.7 and above) or jQuery clickHandler (jQuery 1.6 and below) Extensions for tracking. These Extensions use the utag.link() and utag.view() functions automatically and do not require you to hardcode the function calls on your site.

You determine what data you pass in with a link event. Here is sample code for triggering a link track.

utag.link({ variable1:'VARIABLE1 VALUE', variable2:'VARIABLE2 VALUE' });

Here is a content site example in which a visitor searched for "politics":

utag.link({ link_id:"top search box", search_term:"politics" });

View Tracking

You determine what data you pass in with a view event. Here is a sample for triggering a page view:

utag.view({ variable1:"VARIABLE1 VALUE", variable2:"VARIABLE2 VALUE", variable3:"VARIABLE3 VALUE" });

Here is a content site example in which a visitor searched for "politics":

utag.view({ page:"search results", section:"search", search_term:"politics" });

Note: These method calls should exist in the dynamic content loaded on the page. In other words, do not call either methods on a static page. Even if the page has dynamic content from an included file, the use of these calls is incorrect since the dynamic content is placed on page load, not afterwards. The utag.view() function is automatically called on a static page view. If this method is placed on a static page view then it will end up being called twice: once automatically via utag.js and a second time via the function call. This can and will cause duplicate calls to be made to your Tag vendor and skew your data.

Note: For utag.js versions 4.26 and later, load rules are re-evaluated with each utag.view call. For versions 4.25 and earlier, load rules are not re-evaluated.


Event Tracking

You can use the utag.track() function to perform general event tracking. This is for unique situations, so we recommend contacting your Tealium Account Manager to implement this.

Here is a content site example in which a visitor searched for "politics":

utag.track("view", { page:"search results", section:"search", search_term:"politics" });
utag.track("link", { link_id:"top search box", search_term:"politics" });
// This requires mapping linkTrackEvents and linkTrackVars (map to linkTrackEvents and linkTrackVars)
utag.track("link", { linkTrackEvents:"event5", linkTrackVars : "prop1,events", link_text:"my link" });

Usage Example

A modal window appears on your website and you want to track the modal as a page view. So how do you set up this type of tracking?

  1. Your web developer will need to add the utag.view() method within the source code of the modal (It is important to include this in the modal [child] window source code and not the parent window [the main page]).
  2. Pass data within the utag.view() method using the standard JSON name:value pairing. For example:
     onclick="utag.view({ page_name:'mymodal' });
     
    • "page_name" is a static name and will be used later in the load rules; it is appended to the utag_data object although it will not show as a utag_data variable in the DOM since this is dynamic content.
    • "mymodal" is the value to identify the modal as a page. If the modal loads two steps then utag.view() must be added to each step and the page_name values must be different for each step. For example, the first step value may be "mymodal-step1" and the second step value may be "mymodal-step2".
  3. Once the code has been added you can now go to the Tealium iQ console and add the page_name variable into the Variables tab if it doesn't already exist (the default variable type of Data Object is correct).
  4. Map the page_name variable to your Tag.

Adding_Page_Name_Data_Source.png

With this setup, anytime the modal is loaded, utag_view() will be called and it will set the page_name. As long as you map the values to the appropriate Tag correctly, you will be able to track the modal as a page view.


Testing

In order to test that the methods are firing, you'll need either:

  • Chrome with Developer Tools enabled To enable Developer Tools, go to Chrome > View > Developer > Developer Tools
  • Firefox with Firebug and JS Deminifier installed and enabled To enable Firebug, you'll need to go to Firefox > View > Firebug. To enable JS Deminifer, you'll need to go to Firefox > View > Toolbars > Add-on Bar and make sure it is checked so that the bar at the bottom of the browser appears. In that Add-on Bar, you'll see "JSD OFF" by default so click it once so that it changes to "JSD ON".

To test:

  1. Visit the page where the link or view method is called
  2. Go to the Scripts tab and choose utag.js from the list of tags.
    • Chrome may not show the pane to the left by default, so click the little icon that looks like to folders connected by a wire and it will expand the scripts pane. Once you choose utag.js, click the icon that looks like to brackets facing each other {} and this will deminify the script
    • Firefox will how two drop-downs side by side, click the second drop-down the just start typing "utag" to filter the scripts by name and then you can choose utag.js
  3. Do a search in utag.js for: this.handler.trigger('view', a)
  4. The search will take you directly to needed line.
  5. Add a breakpoint to the line by clicking on the line number to the left of the script, notice the red points in the Firefox screenshot below (Chrome will have highlighted the line number blue)
    • You may also add a breakpoint a few lines down for: this.handler.trigger('link', a)
    • A breakpoint will stop the code from running when the script reaches that particular line so you can 1) verify the call was made and 2) verify the data points that are passed a long.
  6. Refresh the page and the breakpoint will be trigger and now can you verify points 1 and 2 in the previous bullet
    • To verify the call was made: just seeing the breakpoint stop the script verifies it is working
    • To verify the data points: when the breakpoint occurs, look to the right of the scripts tab and look at the arguments being passed into "a" as shown in the screenshot below (email_address, page_name, zip_code)
  7. If the breakpoint occurs and the correct data is being passed, you have verified the utag method calls are working!

RIA_verifyData.png