Question

我无法跟踪＆＃34;选项的价值＆＃34;标签在＆＃34;选择＆＃34;标签。我目前有一个Google Translator Widget的下拉菜单，用户可以点击它并选择语言。当您点击＆＃34;选择语言＆＃34;下拉，您将能够看到德语作为选项。请参阅随附的屏幕截图。我创建了一个宏调用＆＃34; JS - 谷歌翻译 - 选择选项＆＃34;在Google跟踪代码管理器中。

以下是＆＃34; JS的代码 - Google翻译 - 选择选项＆＃34;：

＆＃13;

function() {
  var list = document.querySelector('select.goog-te-combo');
  return list ? list.options[list.selectedIndex].value : undefined;
}

＆＃13;

上面的代码，会找到下拉菜单，其中包含＆＃34; goog-te-combo＆＃34;作为＆＃34的类名;选择＆＃34;标签。然后，它将查看select标签中是否有可用的选项标签，并获取所选选项标签的值。

我还创建了一个标签调用＆＃34; GA - 事件 - Google Translate Clicks＆＃34;并触发调用＆＃34;点击 - 谷歌翻译＆＃34;。

当我测试时，我看到了我的＆＃34; GA - 事件 - 谷歌翻译点击＆＃34;点击我页面上的下拉菜单时会触发。但是，当我检查＆＃34;变量＆＃34; Google跟踪代码管理器中的标签并检查变量＆＃34; JS - Google翻译 - 选择选项＆＃34;，我认为它是空的。

Google Translator Widget Drop down menu option

Google Tag Manager "JS - Google Translate - Select Option" empty

Answer 1

问题是您需要在onchange事件发生时触发标记。

如果您使用的是Google网站翻译，请完整指导如何跟踪网页翻译

首先，您需要为onchange事件设置自定义事件触发器（有关您可以找到here的原始文章）：

设置自定义事件监听器

转到触发器 - ＆gt;新 - ＆gt;自定义事件

活动名称：gtm.js
触发器名称：gtm.js

设置事件处理程序JS变量

转到变量 - ＆gt;用户定义的变量 - ＆gt;新 - ＆gt;类型 - ＆gt;自定义JavaScript

function() {
    return function(e) {
        window.dataLayer.push({
            'event': 'gtm.'+e.type,
            'gtm.element': e.target,
            'gtm.elementClasses': e.target.className || '',
            'gtm.elementId': e.target.id || '',
            'gtm.elementTarget': e.target.target || '',
            'gtm.elementUrl': e.target.href || e.target.action || '',
            'gtm.originalEvent': e
        });
    }
}

变量名称：通用事件处理程序

设置标记

转到Tags-＆gt;新 - ＆gt;类型 - ＆gt;自定义HTML

HTML：

<script>
    var eventType = 'change'; // Modify this to reflect the event type you want to listen for
    if (document.addEventListener) {
        document.addEventListener(eventType, {{generic event handler}}, false);
    } else if (document.attachEvent) {
        document.attachEvent('on' + eventType, {{generic event handler}});
    }
</script>

标记名称：onchange listener

触发器：gtm.js

现在，您创建了跟踪onchange事件所需的所有内容。下一步是针对您的情况，当您想要在有人翻译页面时触发标记

为Click元素启用内置变量

转到变量 - ＆gt;内置变量 - ＆gt;配置 - ＆gt;单击元素

为所选语言创建变量

转到变量 - ＆gt;用户定义的变量 - ＆gt;新建 - ＆GT;自定义JavaScript

function() {
    var list = document.querySelector('select.goog-te-combo');
    return list ? list.options[list.selectedIndex].value : undefined;
}

变量名称：所选语言

为您的代码创建触发器

转到触发器 - ＆gt;新 - ＆gt;类型 - ＆gt;自定义事件

事件类型：gtm.change

触发：某些自定义事件

Click Element - Matches CSS selector - select.goog-te-combo

触发器名称：翻译页面

创建最终代码，当有人翻译页面时会触发事件

此步骤可能有所不同。这取决于您要触发的标签类型。在此示例中，我将向GA发送事件

转到Tags-＆gt;新 - ＆gt;类型 - ＆gt;通用分析

输入：事件

类别：翻译

行动：翻译

标签：{{选择语言}}

触发器：页面翻译

完成

完成此步骤后，您将获得有效的解决方案

Answer 2

我相信可能发生的事情是你的触发器在变量有时间评估之前触发。

更简单的方法是定义使用onchange标记的<select>处理程序将事件与所选值一起推送到GTM dataLayer。这看起来像这样：

<select id="language" onChange="languageSelected(this.selectedIndex);>

您的languageSelected函数可能如下所示：

function languageSelected(index) { dataLayer = dataLayer || []; dataLayer.push({'event' : 'languageSelected', 'language' : 'German'}); }

然后，您将在GTM中定义一个dataLayer变量，该变量从dataLayer读取language属性，然后您将定义一个类型为Custom Event的触发器，其中事件名称为languageSelected。

Answer 3

工作正常，但是gtm.change下拉类select.goog-te-combo被触发了3次。

Google跟踪代码管理器：跟踪＆＃34;选择＆＃34;下拉菜单＆＃34;选项＆＃34;标签值

3 个答案: