Using Breakpoints with utag

[#1]

Description

The following discusses how to use breakpoints in your browser to troublehsoot utag. Troubleshooting is essentially a process of elimination. Placing breakpoints throught utag.js and utag.xx.js can help you quickly narrow down the possible culprits for a particular issue. 

Breakpoints: What are they?

Breakpoints are instructions to the browser’s JavaScript engine to halt execution of code at the line on which you place the breakpoint. This allows you to inspect the states and values of JavaScript variables, objects, functions, et al. at a particular point during the execution of a block of code.

There are circumstances where a breakpoint can interfere with the functionality of your page. This can occur during timing dependant function such as on handlers and intervals. In these scenarios you may want to utilize logpoints instead of breakpoints. 

Troubleshooting

Set Breakpoints for Load Rules

Load rules are the first point of potential failure when loading a tag. When placing a breakpoint in load rules, you can tell whether or not the variables that the load rules is evaluating are properly defined or populated. Assuming variables are defined before checking to see if they have particular values can lead to reference errors. These reference errors can cause a load rule to erroneously evaluate as false. Setting the breakpoint here can help drill down to the root cause.

To pause at the point when a load rule is evaluating, look for the utag.loader.loadrules function in utag.js, or search for 'c[#]' where # is the UID of your load rule.

Here is a screenshot of how to find the UID of your load rule:

Here is a screenshot of a breakpoint on load rule 2:

Bypass Load Rules

To bypass the load rules and load a tag, you can scope a link or a view call directly to the tag using the third parameter.

utag.view(utag.data, null, [2])

This will load tag UID 2 despite the rules on this tag being met or not. Here is further documentation on the track functions. 

Using Manual utag.view/link/track Calls

To manually trigger an event on your page, the utag.link() and utag.view() functions are used. Placing breakpoints on the tracking functions can help you identify if the proper values are being passed. By looking at the call stack you can also identify the origin of the call.

If you place a breakpoint directly below the 'track' function, you will break on both view and link calls. Search for 'track:' in utag.js to find this function. When broken here you can view the data passed into the tracking call by looking at a.data, you can see the call type by looking at a.event.

Automatic page views will not go through the track function, these are triggered elsewhere in the code. 

Troubleshooting Tag Templates

Each tag template is unique, but most of them have a certain basic architecture that you can start with when trying to diagnose an issue.

Bundled vs. Unbundled

A unbundled tag will create a utag.#.js file where # is the UID of the tag. Opening this file you will find all of the code for the tag and the tag scoped extensions. If a tag is bundled, either individually, or through the 'all pages' load rule, then the tag code will be placed directly in utag.js. To find a bundled tag in utag.js you can search for "utag.#.js" where # is the UID of your tag. Here is a link where you can learn more about the two different bundling methods.

Here is a screenshot of how to find the UID's of your tags:

Here is a screenshot of a bundled tag with UID 96:

Here is a screenshot of an unbundled tag with UID 95:

u.send

Placing a breakpoint within the u.send function gives you the ability to take a look a the state of the Data Layer as it’s presented to the template file. This is the Data Layer after All Tags-scoped extensions have executed, but before extensions scoped to the tag have executed. This is the data set you’ll be working with for this tag. Here is a screenshot of a breakpoint on u.send:

Tag-scoped extensions

The code for each extension will vary depending on purpose, but the publish engine inserts the extensions as individual functions. Place your breakpoint(s) in the appropriate part of the extension code to verify that it executes.