What's the best way to deploy an onclick event to a specific set of pages only?

[michael_b]

I need a Floodlight tag to fire whenever someone clicks a specific button on a particular page. What's the best way to deploy this so that the code needed to trigger the event loads only on the page that the event occurs on?

I do not want the code needed to trigger this event deployed sitewide--like it would be in a JS extension (from my understanding). [Edits for spelling.]

[Paul]

Hi @michael_b. I think this post might help,

https://community.tealiumiq.com/t5/Developers/Track-custom-events-in-Google-Analytics-through-Tealiu...

Though I think you still might have to change some stuff in your utag.link.

[christina_schel · Accepted solution]

Michael,

This would be best using a JavaScript code extension testing for certain page_names/types. I am not sure what jQuery version you are using, but the below example would be useful for 1.7+

Your utag version could help determine other code examples as well. The below is to illustrate how to specify the page(s) to attach the event.

JS Extension Code Example:

if (utag.data['page_name'] == "product" || utag.data['dom.url'].toString().toLowerCase().indexOf("product_page.html") > -1) {

    jQuery(document.body).on('mousedown', '#selector', function() {
        utag.link({
            data_to_pass: "passed value",
            event_type: "event name"
        });
    });

}

[brian_kranson]

@michael_b

I want to build on the response from @christina_schel.  She is right, but there is an extra item you might want to think about.

1) By default the DoubleClick Tag does not support the Tealium utag.link event.  This is not a big deal, it is pretty easy to enable link by adding link : 1 to the u.ev code in the template.

The second thing to think about is a little more complicated and it comes down to timing.  When the user clicks on the button, are they going to navigate away from the current page?  If the answer to this question is yes then you have a timing issue on your hands.  The timing issues is this:

When the user clicks, Tealium is going to try and download this tealium published template for this tag utag.x.js.  Then after this template downloads, we will execute the JavaScript and try to send data to DoubleClick.  However by the time the file downloads, the browswer is already moved on to the next page and the data does not get sent to DoubleClick.

Here is one way to go about this:

A) bundle the DoubleClick tag into utag.js

B) Create a load rule that will force the DoubleClick tag to never fire

C) use code similar to what @christina_schel has but modifiy it slightly to only fire your DoubleClick Tag

utag.view({"event_name":"click_prodcut"}, null, [UID_OF_YOUR_TAG]);

When you call a tag with an ID like above, it will bypass the Load Rules, also with this solution you do not need to add the link call to your tag template as this view call is already supported by our tag template.