如何使用 GTM 自定义 javascript 变量将字符串值分配给点击事件的按钮

Question

我有一个网站有三个按钮，按钮文本相同，class (.action-button) 等。点击 URL:s 不同，但它们会定期更改基础，所以我想我必须使用 CSS 选择器来定位它们。如果单击，我希望能够识别并为每个按钮提供一个字符串作为值。目的是通过 UA 事件标签将值发送到 GA，但我不想对其进行硬编码。

我不太确定如何处理这个问题（我是 js 初学者）。我编写了一个脚本，并将其放入自定义 javascript 变量中。不幸的是，它不起作用。当我在调试模式下尝试时，变量的类型和值都为“未定义”。有谁知道我的脚本有什么问题吗？或者，如果我可以用不同的、更简单的方法获得相同的结果？

我已经使用 .spotlight-coll-one-big-two-small-img-below .spotlight:nth-child(1, 2 or 3) .action- 为每个按钮设置了常规点击触发器按钮，那些工作得很好。

使用 document.querySelectorAll('.spotlight-coll-one-big-two-small-img-below .action-button') 给我一个 NodeList，其中包含我想要定位的三个按钮。

function() {
var theSpotlight = document.querySelectorAll('.spotlight-coll-one-big-two-small-img-below .action-button');
if (theSpotlight.length > 0) {
    for (var i = 0; i < theSpotlight.length; i++) {
        theSpotlight[i].addEventListener('click', function () {
            if (theSpotlight[i] = 0) {
                return 'Spotlight 1'
            } else if (theSpotlight[i] = 1) {
                return 'Spotlight 2'
            } else if (theSpotlight[i] = 2) {
                return 'Spotlight 3'
            } else {
                return 'n/a'
            }
        })
    }
   }
 }

PS。我现在无法访问代码。

非常感谢，丹尼尔

Answer 1

试试这个。

将点击处理程序 JavaScript 添加到页面

这必须添加到您的网站上，而不是作为 GTM 中的自定义 JS 变量

function() {
var theSpotlight = document.querySelectorAll('.spotlight-coll-one-big-two-small-img-below .action-button');
var spotLightLabels = ['Spotlight 1', 'Spotlight 2', 'Spotlight 3'];
if (theSpotlight.length > 0) {
    for (var i = 0; i < theSpotlight.length; i++) {
        theSpotlight[i].addEventListener('click', function () {
            window.dataLayer.push({'spotlightLabel': spotlightLabels[i]});
        });
    }
   }
 }

在 GTM 中

创建一个读取 spotlightLabel
在需要最后一个聚光灯link单击

如何使用 GTM 自定义 javascript 变量将字符串值分配给点击事件的按钮

How to assign a string value to buttons on click event using GTM custom javascript variable

javascript

google-tag-manager