Hong Kong Digital Analytics

DTM Cheatsheet (DTM 备忘单)

DTM备忘单 (DTM Cheatsheet)

原作者Jim Gordon: https://jimalytics.com/tag-management/dynamic-tag-manager-dtm-cheat-sheet/

Basic %% Syntax

<a id=”someLink” title=”link” href=”/”><p class=”hi”>Hello</p></a>

“%this…%” uses the element that you have selected. In the current example, “this” is the <a> element:

%this.title% = link
%this.id% = someLink
%this.innerHTML% = <p>Hello</p>
%this.href% = / %this.@text% = Hello

“%target…%” uses the child of the element that you have selected. In the current example, “target” is the <p> element:

%target.innerHTML% = Hello
%target.className% = hi

The %% syntax can also be used to get the document properties hostname and request URI (AKA document.location.pathname):

%URI% = /index.html
%hostname% = jimalytics.com

Additional Notes

  • Keep in mind that not all DOM elements are cross-browser compatible (like innerText)!
  • %this.@text% or %target.@text% is a DTM-specific variable and cannot be found in the DOM. Use this to grab just the text of any element (similar to $(this).text()).
  • It looks like there is also a special property for %this.@cleanText% which trims the text.
  • If you are using %target…% on an element with multiple children, it will use the last eligible value.
  • You can use anything that is available in the DOM for that element, which may include className, alt, href, id, innerHTML, title, src, etc. You can also use custom in-line properties, as well (i.e. <a foo=”bar” href=”/”><p>Hello</p></a>).

Data Elements

_satellite.getVar('data element name');

Where there is a “get” there must also be a “set”. This script sets a data element:

_satellite.setVar('element name', value);

This is what it looks like in action using the example in the first section:

<a id=”someLink” title=”link” href=”/”><p class=”hi”>Hello</p></a>

_satellite.setVar('link ID', $(this).attr("id")); // sets the variable

_satellite.getVar('link ID'); // = "link"

Additional Notes

  • setVar saves the data element on a page level scope – this is okay since you’ll typically only be manually setting these variables when you are referencing elements with $(this).
  • You can also use %% substitutions for these data elements within the UI. For the example above, we could have referenced the data element via %link ID%.
  • When you manually override a data element that exists and has a scope, it retains the scope of the element.

The _satellite Object

The DTM library reads like one big JSON object. If you open your console on a page that has Dynamic Tag Manager (Shift-Control-J), type _satellite. You should see a big object pop up that has a lot of data stored in it. This stores your rules, tools, data elements, publish date, build date… basically the kitchen sink. You can also mess around with the library, too! Here are some useful tricks you can use to get the most out of the tool:

Read a browser cookie

This is the same thing as setting a data element value as a cookie stored in your browser:

_satellite.readCookie('cookieName');

Write a browser cookie

_satellite.setCookie('cookie name','cookie value',days to expire)

Remove a browser cookie

_satellite.removeCookie('cookie name')

Get the date/time of publish and build

Sometimes when you make changes, you may be testing the code in production with an old library! Ew. Using the functions below will protect you from doing that.

buildDate gets the date/time that the library was physically updated (this is the important one):

_satellite.buildDate;

publishDate gets the date/time you pushed the “Publish” button:

_satellite.publishDate;

If you’re lazy like me and want to calculate how long it took between pushing “Publish” and actually updating the library, paste this (calculates value in minutes):

(Math.abs(new Date(_satellite.buildDate.replace(/-/g,'/')) – new Date(_satellite.publishDate.replace(/-/g,'/'))))/1000/60;

Use the staging library in production

If you’re like me, you have 1 staging site and then you have your production site. Staging is never the same as production and sometimes things work in staging that might not work in production. Well now your problems are solved! Use this to enable your staging library:

localStorage.setItem('sdsat_stagingLibrary', true);

Use this to disable your staging library:

localStorage.setItem('sdsat_stagingLibrary', false);

Enable “Debug Mode”

_satellite.setDebug(true);

To disable… you guessed it:

_satellite.setDebug(false);

Hide your activity from DTM

If you want to browse your site incognito (let’s say you don’t want to trigger samples on your A/B test), simply use this:

localStorage.setItem('hide_activity', true);

And for posterity – to disable:

localStorage.setItem('hide_activity', false);

Use a cross-browser compatible console.log

So apparently console.log doesn’t work with some versions of IE. Fortunately, you can use notify which is compatible across all browsers:

_satellite.notify('text to display', [importance '1-5']);

It should work like this:

_satellite.notify('foo', 1); // This should look like a normal console.log
_satellite.notify('bar', 5); // This should be pretty big text

Get QueryString Parameters (always work, just Adobe won't officially support it)

_satellite.getQueryParamCaseInsensitive('foo')

Copyright@Hong Kong Digital Analytics