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

Question

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

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

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

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

我还创建了一个标签调用“GA - 事件 - 谷歌翻译点击”并触发调用“点击 - 谷歌翻译”。

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

Google 翻译小工具下拉菜单选项

谷歌标签管理器“JS - 谷歌翻译 - 选择选项”为空

Answer 1

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

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

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

设置自定义事件监听器

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

• 事件名称：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 发送事​​件

转到标签 -> 新建 -> 类型 -> Universal Analytics

类型：事件

类别：翻译

行动：翻译

标签：{{所选语言}}

触发器：页面翻译

完毕

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