jquery 通过 google 标签管理器发送时点击无效

Question

JQuery 由 Google 跟踪代码管理器提供时点击功能不起作用。

我已经查看了这些问题并将我的代码包装在一个准备好的文档中并使用了更新的 .on('click', function(){}) 语法，但它仍然不起作用。

Why is this jQuery click function not working?

jQuery onclick not firing on dynamically inserted HTML elements?

Google Tag Manager: Eventtracking not working

我正在尝试添加 jquery 点击功能以将数据发送到 Google Analytics。

当有人点击带有 class 信息的锚标签时。我使用 jquery 导航到其具有 class 市场的兄弟跨度并获取它的文本值。

因为有多个具有相同 class 的锚标签，我需要具体和文本值，我使用父 li 标签的属性来找到正确的兄弟跨度。

这是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>

这是我用来获取跨度文本值的代码。

在某些页面上，li 标签的属性发生了变化，因此使用了三元运算符。

$(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);

    });
});

如果我通过控制台部署这段代码，它会工作得很好。但是，当我通过 Google 标签管理器将它部署为自定义 HTML 标签时，它不起作用，即使代码已添加到页面。

通过 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>

更新：

GTM 中的规则在所有页面上都已触发，我已将其更改为事件等于 gtm.dom，并且 GTM 调试器声称正在触发标记。

我在调试器中注意到的一件事是它在结束脚本标记上做了一些奇怪的语法突出显示。以橙色突出显示 /script>'。我想不通为什么会那样。

为什么通过 GTM 发送时 onclick 监听器失败？

Answer 1

我通过更改从

中选择元素的方法解决了这个问题

$(".info").on("click",function(){

至

$("body").on("click", ".info",function(){

jquery 通过 google 标签管理器发送时点击无效

jquery on click not working when delivered via google tag manager

javascript

jquery

google-tag-manager