Adobe Launch: Save time with Adobe’s new tag management system
Adobe released their new tag management product Adobe Launch last year. It’s easier to implement and has a simpler interface than DTM, but how user friendly is it?
Francesca DelGuidice, Technical Analyst at Mezzo Labs, explores how Adobe Launch can be successfully used to tag multiple on page interactions.
In Adobe Launch it is a trivial task to add a Rule which handles a one-time usage event, like a click event on your company logo for example.
So far so good, but what if we have multiple links on a page that need tracking? How do we handle navigation click events in a Single Page Application (SPA), or multiple similar buttons on a landing page? There are no solid real-world examples in the official Launch documentation, so hopefully this post will fill the knowledge gap regarding this common use-case scenario.
Lack of Documentation
Adobe Launch is just over a year old, and as of 10th November 2018, the official documentation is fairly sparse. The tutorial section is empty and there are only a few high-level video run-throughs which provide some very basic use-case examples, so you are largely on your own unless you are prepared to trawl through the forum pages for information, with no guarantee of finding a best-practice solution.
Option 1: Multiple Rules
The post examines the tracking of click events on two buttons on a carousel (the left and right navigation buttons which cycle the carousel left and right).
The simplified HTML looks like this:
The easiest option we have in Launch is to create two separate Rules similar to our logo click event above, one for each button. However, this is not a scalable solution. Think about click events on buttons found in a table row. What happens when the developer is tasked with adding more table rows? We would have to duplicate more Rules. Not an efficient use of time.
Option 2: What Would DTM Do?
Adobe Dynamic Tag Manager (DTM) documentation points to various methods such as `trackLink()`, `t()` and `tl()` but none of these work nicely within Launch’s Custom Code. Launch is a completely new product, built from the ground up, and does not share the same API as DTM.
It is possible to use `satellite.setVar(“eVar”, “carousel left-arrow”);`within a Rule, but the problem is trying to send the data to the beacon. If anyone knows of a way to do this in Launch, please let me know.
Option 3: One Data Element to rule them all
Data Elements to the rescue. The Launch Data Elements documentation says:
“Use data elements as widely as possible throughout rule creation to consolidate the definition of dynamic data”
Creating a Data Element is easy. The hard part is telling it which link is being activated. Consider the following:
When we reference this Data Element in any Rule we create, it will return the class attribute’s value. The class attribute tells us which carousel button was clicked on, but in this case, it will always return the first DOM element that it finds. The value returned to the Rule will always be “arrows left-arrow”, and therefore will not differentiate between the left and right buttons.
Managing the Rule
The Rule would need to track when either of the buttons are clicked, so the event would need to target the “arrows” part of the class attribute.
And it would need to utilise our Data Element in the Set Variables action configuration.
Now when we click on the left carousel button, we get “carousel left arrow” back in our tracking data variable, and when the right button is clicked, we get “carousel right arrow”. One Data Element, one Rule, multiple event handling, done.