Google 标签管理器：跟踪 "Select" 下拉菜单 "Option" 标签值

Question

我无法跟踪 "select" 标签中 "option" 标签的值。我目前有一个 Google 翻译器小部件的下拉菜单，用户可以在其中单击它和 select 语言。当您单击 "Select Language" 下拉菜单时，您将能够看到德语选项。请参阅随附的屏幕截图。我在 Google 标签管理器中创建了一个宏调用 "JS - Google Translate - Select Option"。

这是 "JS - Google Translate - Select Option" 的代码：

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

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

我还创建了标签调用 "GA - Event - Google Translate Clicks" 和触发器调用 "Click - Google Translate"。

当我对此进行测试时，我发现当我单击页面上的下拉菜单时我的 "GA - Event - Google Translate Clicks" 被触发。但是，当我检查 Google 标签管理器中的 "variables" 选项卡并检查变量 "JS - Google Translate - Select Option" 时，我发现它是空的。

Google Translator Widget Drop down menu option

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

Answer 1

我相信可能发生的情况是您的触发器在触发之前变量有时间计算。

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

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

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

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

然后您将在 GTM 中定义一个数据层变量，该变量从数据层读取 language 属性，然后您将定义一个自定义事件类型的触发器，其中事件名称为 languageSelected.

Answer 2

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

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

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

设置自定义事件侦听器

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

活动名称：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 事件所需的一切。接下来的步骤是针对您的具体情况，当您想要在有人翻译页面时触发标签

为点击元素启用内置变量

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

为所选语言创建变量

转到变量-> 用户定义的变量-> 新建-> 自定义 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

类型：事件

类别：翻译

操作：翻译

标签：{{选择的语言}}

触发器：已翻译页面

完成

完成这些步骤后，您将得到有效的解决方案

Answer 3

它工作得很好，但是 gtm.change 下拉菜单 class select.goog-te-combo 触发了 3 次。

Google 标签管理器：跟踪 "Select" 下拉菜单 "Option" 标签值

Google Tag Manager: Tracking "Select" Drop Down Menu "Option" tag value

javascript

google-analytics

event-handling

dom-events

google-tag-manager