Google 跟踪代码管理器：跟踪“选择”下拉菜单“选项”标签值

我无法跟踪“选择”标签中“选项”标签的值。 我目前有一个 Google Translator Widget 的下拉菜单，用户可以单击它并选择语言。 当您单击“选择语言”下拉菜单时，您将能够看到德语选项。 请参阅随附的屏幕截图。 我在 Google 标签管理器中创建了一个宏调用“JS - Google Translate - Select Option”。

这是“JS - 谷歌翻译 - 选择选项”的代码：

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

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

我还创建了一个标记调用“GA - 事件 - Google Translate Clicks”并触发调用“Click - Google Translate”。

当我对此进行测试时，我发现当我点击页面上的下拉菜单时，我的“GA - 事件 - Google 翻译点击”被触发。 但是，当我检查 Google 跟踪代码管理器中的“变量”选项卡并检查变量“JS - Google Translate - 选择选项”时，我看到它是空的。

Google 翻译小工具下拉菜单选项 https://i.stack.imgur.com/ICWSl.png

Google 跟踪代码管理器“JS - Google 翻译 - 选择选项”为空 https://i.stack.imgur.com/sllz2.png

问题是你需要在以下情况下触发标签onchange事件发生。

如果您使用 Google 网站翻译器，如何跟踪页面翻译的完整指南

首先，您需要设置自定义事件触发器onchange事件（有关该事件的原始文章，您可以找到here https://medium.com/archergroup/custom-event-trigger-set-up-in-google-tag-manager-gtm-v3-d7c243258065):

设置自定义事件监听器

转到触发器 -> 新建 -> 自定义事件

• 事件名称：gtm.js
• 触发器名称：gtm.js

设置事件处理程序 JS 变量

转到变量 -> 用户定义变量 -> 新建 -> 类型 -> 自定义 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
        });
    }
}

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

设置标签

转到标签 -> 新建 -> 类型 -> 自定义 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监听器

触发器：gtm.js

现在，您已经创建了跟踪所需的一切onchange事件。接下来的步骤适用于您的具体情况，当您想在有人翻译页面时触发标记时

为 Click 元素启用内置变量

转到变量->内置变量->配置->单击元素

为所选语言创建变量

转到变量 -> 用户定义变量 -> 新建 -> 自定义 JavaScript

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

变量名称：所选语言

为您的标签创建触发器

转到触发器 -> 新建 -> 类型 -> 自定义事件

事件类型：gtm.change

触发：一些自定义事件

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

触发器名称：页面已翻译

创建最终标签，当有人翻译页面时，该标签将触发事件

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

转到标签 -> 新建 -> 类型 -> 通用分析

类型： 活动

类别： 翻译

动作：翻译

标签：{{所选语言}}

触发器：页面已翻译

DONE

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