JQuery on click function not working when delivered by Google Tag Manager.
I've looked at these issues and wrapped my code in a document ready and used the updated .on('click', function(){}) syntax and still it doesn't work.
Why is this jQuery click function not working?
jQuery onclick not firing on dynamically inserted HTML elements?
Google Tag Manager: Eventtracking not working
I'm trying to add a jquery on click function to send data to Google Analytics.
When someone clicks on an anchor tag with a class of info. I use jquery to navigate to it's sibling span with a class of markets and get the text value of it.
As there are multiple anchor tags with the same class and I need to be specific and the text value I use an attribute of the parent li tag to find the correct sibling span.
This is the HTML
<ul class="prices">
<li class="message" style="display: none;">
<div class="ajaxLoader"></div>
<div class="errorLabel" style="display: none;">There are currently no markets available for your selection.</div>
</li>
<li key="MM4.uk.174619476" meetingkey="mm4.uk.meeting.4933626" class="show">
<a href="#" class="info">Info</a>
<span class="markets">Manchester City/Crystal Palace</span>
</li>
<li class="hide" key="MM4.uk.174619477" meetingkey="mm4.uk.meeting.4933626">
<a href="#" class="info">Info</a>
<span class="markets">Crystal Palace/Manchester City (h)</span>
</li>
<li key="MM4.uk.174619478" meetingkey="mm4.uk.meeting.4933626" class="show">
<a href="#" class="info">Info</a>
<span class="markets">Total Goals</span>
</li>
<li key="MM4.uk.174619482" meetingkey="mm4.uk.meeting.4933626" class="show">
<a href="#" class="info">Info</a>
<span class="markets">Corners</span>
</li>
<li key="MM4.uk.174619485" meetingkey="mm4.uk.meeting.4933626" class="show last">
<a href="#" class="info">Info</a>
<span class="markets">Bookings</span>
</li>
</ul>
Here's the code I'm using to get the span's text value.
On some pages the attribute of the li tag changes hence the use of the ternary operator.
$(function() {
$(".info").on("click",function(){
console.log('this runs');
var key = (($(this).parent().attr("key") != undefined) ? $(this).parent().attr("key") :$(this).parent().attr("meetingkey"));
console.log(key);
var text = (($("li[key='" + key + "'] .markets").text() != undefined) ? $("li[key='" + key + "'] .markets").text() : $("li[meetingkey='" + key + "'] a:eq(1)").text());
console.log(text);
var logStr = 'Info Button, Meetings page, ' + text;
console.log(logStr);
});
});
This code works perfectly fine if I deploy it via the console. However, when I deploy it as a custom HTML tag via Google Tag Manager, it doesn't work, even though the code has been added to the page.
The code as it appears on page after being delivered via GTM
<script type="text/javascript" id="">
$(function() {
$(".info").on("click", function() {
console.log("this runs");
var a = void 0 != $(this).parent().attr("key") ? $(this).parent().attr("key") : $(this).parent().attr("meetingkey"),
a = void 0 != $("li[key\x3d'" + a + "'] .markets").text() ? $("li[key\x3d'" + a + "'] .markets").text() : $("li[meetingkey\x3d'" + a + "'] a:eq(1)").text();
console.log("Info Button, Meetings page, " + a);
ga("send", "event", "Info Button", "Meetings page", a)
})
});
</script>
Update:
Rule in GTM was fire on all pages, I've changed it to event equals gtm.dom and the GTM debugger claims the tag is being fired.
One thing I noticed in the debugger is that it's doing some odd syntax highlighting on the closing script tag. Highlighting /script>' in orange. I can't think why it would do that.
Why does the onclick listener fail when delivered via GTM?
