Call utag.link() on HTML-link click

[franzel]

I want to trigger a Google Conversion when a user clicks on a HTML link. I achieve this with a JavaScript Extension which add an event handler on the click and then call utag.link() with data layer parameter which make Tealium call the Google Conversion. But when the HTML-Link redirects to another page it occurs that the new page loads before the request is sent (especially when Google redirects three times before the conversion is submitted).

I think the solution would be to prevent the execution of the link and redirect the user after the utag.link() and all consecutive events are finished. Can this be accomplished by using the callback-parameter in utag.link()?

Or is it better to call the conversion directly like described in the google docs (https://support.google.com/adwords/answer/6331304) without using utag.link at all?

Or am I completely missing something?

[kathleen_jo]

Hello @franzel. Have you tried using the jQuery onHandler Extension instead to track your event? Let me know!

[david_bird]

Hi @franzel,

There are a couple of things you can try.

1) Mousedown vs. click

In the event handler logic, if you are executing utag.link on a click, the other logic on the page may execute before the utag.link occurs. Try replacing the 'click' logic with 'mousedown'. This may trigger the utag.link prior to the page processing the href click.

2) The pixel is fired but you are not seeing it

Without all the details this is a shot in the dark. If, for example, you are using Chrome and viewing the Network panel for verification of the pixel being sent, make sure the option Preserve Log checked to ensure the list remains intact when the new page loads. 

Let me know if either of these suggestions help.

Thank you, David

[Srinivasan]

Hi @franzel,

Nevertheless, we can use jQuery event.stopPropagation() Method,  if you are executing utag.link on a click/Mousedown on the page may trigger the utag.link prior to the page processing the href click.

Example:

$("span").click(function(event){
    event.stopPropagation();
    alert("The span element was clicked.");
});
$("p").click(function(event){
    alert("The p element was clicked.");
});
$("div").click(function(){
    alert("The div element was clicked.");
});

Hope it helps out!!!