Adobe DTM: Leveraging JavaScript Variables

By Jason Thompson, co-founder, 33 Sticks

The ability of your tag management solution (TMS) to utilize existing site data can be extremely powerful. Existing site data can come in many different forms but in this post, we will focus on using JavaScript variables.

The Scenario

The Website Manager wants to get a better understanding of how visitors are using the new internal search feature that was launched last week. Unfortunately, when the new internal search feature was being developed, there wasn’t an analytics requirement attached to the product spec so now there is no specific tracking of this new feature (I know, this never happens, just pretend that it might).

One of the members of the development team mentioned that the content management system (CMS) does send some data, stored in JavaScript variables, about how the search feature is being used and asks the Analytics Manager if Adobe Digital Tag Management (DTM) could use those variables to populate the reports that the Website Manager is asking for.

The Solution

The Developer provided the Analytics Manager three variables that could be useful in solving this problem:

  • newSearch – This indicates the execution of a search
  • count – This indicates the number of search results returned
  • searchItem – This indicates the search term


Step 1: Create New Data Elements to Capture JavaScript Values

NOTE: I prefer to use Data Elements, rather than referencing the JavaScript variables directly inside of Rules, as it reduces the probability of user error and also centralizes the management of each variable.

To create a new Data Element, navigate to Rules>Data Elements. Create a separate Data Element for each of the values you wish to capture. In the example below, we are creating a new Data Element to capture the search term.

DTM Data Element - Search Term

This process is repeated to create a new Data Element for each of the three JavaScript variables we want to leverage for tracking internal search.

DTM - Data Elements List

NOTE: To validate that you are capturing the Data Element values as you expect, you can make a call to ‘_satellite.getVar(‘Data Element Name’);’ to verify. In the example below, I’m using the Firebug Console to quickly test the ‘Search Term’ Data Element.

DTM - Firebug Validation

Step 2: Create New Page Load Rule

Now that we have the values we need stored in Data Elements, we can create a new Page Load Rule to trigger when a search has been executed and populate values into Adobe Analytics.

To determine when this rule fires, we create a set of conditions:

DTM - Conditions

Here we are using two conditions, that will leverage the values captured in the Data Elements we created in Step 1, that must be true for the rule to fire:

  • The Data Element called ‘New Search’ must contain the value ‘true’ to indicate that a search was executed.
  • The Data Element called ‘Search Count’ must contain a number greater than zero. This rule will track a “successful search” or a search that returns search results, a separate rule can be configured to track failed searches by creating a condition where ‘Search Count’ has the value of ‘0’.

If the conditions we defined both are true, we want to send some values to Adobe Analytics. Let’s capture the search term, Data Element ‘Search Term’, in eVar10 and let’s also capture the number of search results, Data Element ‘Search Count’, in eVar12. Let’s also set a couple Success Events, event10 to capture that a search has been executed and event11 to capture that a successful search (search results were returned) was executed.

DTM - Set Variables

Step 3: Approve and Publish

After you have tested your Data Elements and Rules and are satisfied they are working as desired, Approve each of the Data Elements and Rules you have created and Publish your property for the changes to be rolled out to your site and use your favorite validation tool to verify that you are sending the new values to Adobe Analytics.

That’s it. It should be noted that while any tag management solution has the ability to greatly reduce digital analytics development cycles, a TMS shouldn’t be used as an excuse for cutting corners, sloppy development practices, or accepting a lack of business requirements. Make use of your TMS to create efficiencies and improve data quality by making it part of an overall analytics strategy focused on making informed business decisions.