Tagging Recommendation - DoubleClick Tags firing on Event

[CP]

Hi All,

I am supposed to implement DoubleClick tags for an enterprise site which supports multiple countries.

E.g. https://www.somedomain.com/country=<country code>

Tealium is implement globally under 1 of the 3 profiles (A, B, C) which include 2 libraries (L1 and L2).

A submit button with the jQuery Selector #btnSubmit is present on multiple pages ( P1, P2, P3, P4,......).

The current practice is to implement a Tealium DC tags and add a jQuery onHandler extension for each page.

The extension would on fire of a JS Event of the indicated jQuery Selector, populate 3 JS variables. The values to be set via the extension is different and is depends on the page.

What I Think Will Happen

Given that each jQuery extension implemented is not tagged specifically to a tag+load road combination (all are scoped to DOM-Ready), any of thes submit buttons in P1, P2, P3, P4, ...... will fire ALL the jQuery onHandler.

As such the values will be popluated with the last jQuery onHandler fired.

Am I right?

And I think that is not the correct way to do it. But I need to check make sure my understanding is correct (I am 3 wks old to Tealium) before I talk to my boss.

The Correct Way

Either to change the website such that all item has a site-wide unique ID, or use the CSV load method in the way stated here => https://community.tealiumiq.com/t5/Tealium-iQ/Best-practice-for-managing-large-number-of-DoubleClick...

[mark_reddin]

Hi there @CP,
"Given that each jQuery extension implemented is not tagged specifically to a tag+load road combination (all are scoped to DOM-Ready), any of thes submit buttons in P1, P2, P3, P4, ...... will fire ALL the jQuery onHandler."

Not quite.

When the onHandler event fires, Tealium will only fire the tags whose load rules match the data being passed in the onHandler event.

So it's kind of the other way round.

So, you can control which tags are fired by controlling the data being passed in the onHandler event, and maybe changing the load rules for the tags if needed.

You should check out the current situation by monitoring which tags are currently firing before you make any changes. With DoubleClick, you can look for the Advertiser ID in the outgoing network requests in Chrome Dev Tools, for example. You might need to tick the check box for "Preserve Log" if the event unloads the current page.

Note that there have been a couple of changes to the way Tealium deals with link and view calls on the page, that the onHandler extensions raise. It used to be that tags that had not been initially loaded on the page would not be loaded even if their load rules would otherwise match. This was changed in more recent versions of utag. See here https://community.tealiumiq.com/t5/uTag/utag-link-and-utag-view/ta-p/11888

There is one other consideration. Not all tags are programmed to respond to both view and link events. You can see which events a given tag will respond to by looking in the tag template for a line like this.

u.ev = {"view" : 1};

This particular example means that the tag only responds to view calls and will ignore link ones.

Finally, with respect to your question about moving to the "best practice" way of having a single DoubleClick tag. This is a valid approach, but you may decide after reading the above that it isn't needed. Hopefully if you do decide to migrate to that approach, the above information will still help you understand how it would work with a single tag.

Mark

[CP]

Hi @mark_reddin,

A little bit confused.

So my understanding is as follow:

1. All extensions are triggered based on their Scope. So if I've 10 jQuery onHandler extensions set to DOM-Ready scope, then when any pages will fire all 10 extensions.
2. All Load Rules that matched the particular page currently loaded will be triggered and for each of the load rules, if the conditions are satisfied, the associated tag will be fired. As such all values populated by the jQuery onHandler would be passed to the Tag via the Load Rules?

Am I understanding how Tealium works and your points correctly so far?

"There is one other consideration. Not all tags are programmed to respond to both view and link events. You can see which events a given tag will respond to by looking in the tag template for a line like this.

u.ev = {"view" : 1};

This particular example means that the tag only responds to view calls and will ignore link ones."

Regarding the above point, could you explain again? 

So going back to my initial questions, is jQuery onHandler still the right way forward? Or is there any thing else I could use instead that works better for my use case?

Thanks.

[mark_reddin]

Hi @CP

Let's look at a worked example.

Imagine in our body we had this

<input type='button' id='b1' value='b1'/>
<input type='button' id='b2' value='b2'/>

And we set up two onHandler extensions, one for each button, like this;

What this handler does is say "When the DOM loads, attach an event handler to anything on the page with a jQuery selector of "#b1".  This means anything with an id of "b1".  When this HTML element on the page is clicked (because we chose click in the "Trigger On" drop down), call Tealium's link event (because we chose "link" in the Tracking Event drop down), and pass the following data layer to that link event;  { source : b1, data : d1 }

It's important to realise that the link event will not be called until the matching HTML element is clicked, not just because the DOM is ready.

I will come back to the condition at the end of this post, as it will confuse matters now.

The other handler is the same, except that it has a selector of #b2 and passes b2 and d2 instead in the link event call.

Now imagine I set up two tags.  Again, I will only show the first one, as the second one is analagous;

The load rule for this tag says that it will only load if "source" is "b1".  This might be from either the data layer on the page when the page initially loads, or it might be from the link event like we just added in the DOM ready extension.  However, just because it may have been present in the data layer on the page doesn't mean it will be present again in the link event unless we took steps to add it there, as I explain further below.  This is good, as it means the two are isolated.

The data mapping for this tag says to pass some data.  Again, this might be from either the page data layer or from the link event.

If we add a second analagous tag, then overall what we see on the page is that when button b1 is clicked, the tag for b1 is loaded, if it's not already loaded, and it's fired.  The same for button b2 and tag b2.  If the button is clicked again, the tag is already loaded, but it's fired again.

There are a couple of notes;

1. The above assumes later utag versions.  See the link I previously posted.  Nowadays, tags will be loaded if needed by the onHandler event (e.g. the link call).  Also, nowadays, during the link call, the tag will only have access to the data that you pass in the link call, and not to the main data layer on the page.  However, if you need the latter as well, you can add extensions to the tag to get that.

2. Your other question was about

u.ev = {"view" : 1};

Not all tags out of the box respond to both link and view events.  If your tag's code template has a link like the above, it means that it will ignore a link event and only respond to a view event.  Our example above would not have worked for this kind of tag, since we were using a link event in the DOM ready extension.  u.ev is an array of events that the tag supports.  It will look like this for a tag that supports both view and link;

u.ev = {"view" : 1, "link" : 1};

If we wanted to make this work for a tag that only supported a view event, we might choose to change the DOM ready extension to call a view event instead, or we might choose to edit the tag template and add support for the link event.  The former would be easier, but bear in mind that you might end up firing other tags that you didn't mean to.

3. The condition

Just to show that it's possible, I added a condition above.  This example condition means "only run this DOM ready event that attaches the event handler, if the q1 URL query parameter is present with a value of 1".  In other words, you can suppress the DOM ready extension itself if it doesn't match some condition, similar to load rules on a tag.  This allows you more control still, but you don't have to use a condition.

[CP]

Hi @mark_reddin,

Thanks for your very detail explaination.

As there is multiple buttons with without their own unique ID, and each based on its URL will have to populate with a different set of values, I guess I will have to look into using the CSV lookup else I will have to work with the team managing the site on implementing the IDs.

Thanks.