Question

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

我不太清楚如何处理这个问题（我是初学者）。我写了一个脚本，我把它放在一个自定义的javascript变量中。不幸的是，它没有用。当我在调试模式下尝试时，变量将作为返回类型和值获得“未定义”。有谁知道我的脚本有什么问题？或者，如果我能以不同的，更简单的方式获得相同的结果？

我已经使用.spotlight-coll-one-big-two-small-img-below .spotlight：nth-child（1,2或3）.action-button为每个按钮设置了常规点击触发器，那些工作就好了。

使用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
在需要点击最后一个聚光灯链接的文本标签的任何地方使用该dataLayer变量

如何使用GTM自定义javascript变量

1 个答案: