title
 

Adobe Launch: Save time with Adobe’s new tag management system

, Posted by Claudia Kendal in Adobe Analytics, Francesca's Posts, Web Analytics

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).

Adobe Launch Carousel

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.

So how do we configure the Data Element to know which link has been clicked? A Data Element returns a value to a Rule that the Rule can then set as a variable in the data. What is not widely documented is that the Data Element has access to the event that has been dispatched using the JavaScript Event API.

Using the Core extension’s Custom Code data element type, we can write some JavaScript that taps into the Event object’s properties, and use a simple conditional statement to return whether the link is the left or right one being clicked:

 

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.

TAGS >