Debugging JavaScript with DTM in 3 steps.

Share this article

 

‘No pain. Just gain’ is what the new Dynamic Tag Management (DTM) promises to fulfil, with the magical ability to reduce the need for IT resourcing and put more control into a marketer’s hand.

But as much truth as the statement holds, the real power comes with the ability or knowledge to creatively customise DTM to carry out its analytical purpose to your client’s digital initiative (as with any technical solutions). And that being said, it requires a fair bit of technical knowledge of web, html, css and most importantly, JavaScript.

If you have been using DTM for a while now, you probably realised quickly that you need to have a good understanding of JavaScript. So here’s a quick crash course and tips on how to debug your DTM scripts so you can easily know what’s going on and what’s being passed through.

1. Download and install the Adobe DTM switch for either Chrome or Firefox.

blog-debug-dtm-switch

The switch (download here) allows you to toggle between the debug mode and staging mode for your Adobe Analytics, giving you the debugging logs on your browser’s console.

2. Use the _satellite.notify() function to display console logs.

_satellite.notify('Your console message output: ' + yourVariable, 1);

This code will create console logging that works across all browsers (even with the older versions of IE). And the best part about it is that it only shows up when debugging mode is turned on.

3. Access your variables via your browser console.

DTM code editor

blog-debug-dtm-code-editor

Browser console (Chrome)

blog-debug-browser-console

You can access JavaScript variables if they are global variables, this means all scripts and functions on a web page can access it. A local variable (these are variables declared within a JavaScript function, becomes LOCAL only accessible to the function) can be made global by temporarily removing the ‘var’  declaration in front of variable which automatically makes it accessible via the browser console.

The Adobe objects are global and in the given example above, if you type the variable ‘s_pagename’ you can view what’s being passed to it. This allows you to understand what’s happening and not just have a ‘Black Box’ debugging approach to DTM.

Using this information as an advantage, you can easily access the properties of the ‘S Object’ by just typing in ‘s.prop1’ to see what it’s being set to.

Conclusion

Having the right tools and knowledge makes DTM a very powerful platform that not only saves time and IT resources but it could also help you control the flow of your business solutions you have, without having to engage too much of IT. And knowing how to debug JavaScript is really half the battle of making it work for yourself and your client.

If you have any questions about DTM’s architecture or technical details not covered here, please reach out to us – we would love to hear from you.


Share this article