Google跟踪代码管理器：跟踪“选择”下拉菜单中的“选项”标签值 [英] Google Tag Manager: Tracking "Select" Drop Down Menu "Option" tag value

问题描述

我在跟踪选择标签中选项标签的值时遇到麻烦。
我目前有一个Google Translator Widget的下拉菜单，用户可以单击它并选择语言。
单击选择语言下拉菜单时，您将看到德语作为选项。
请参阅随附的屏幕截图。
我已经在Google跟踪代码管理器中创建了一个宏调用 JS-Google Translate-Select Option。

I am having trouble tracking the value of the "option" tag in the "select" tag. I currently have a drop down menu for Google Translator Widget where user can click on it and select the language. When you click on the "Select Language" drop down, you will be able to see German as the option. See the attached screenshots. I have created a Macro call "JS - Google Translate - Select Option" in the Google Tag Manager.

这是 JS-Google Translate的代码-选择选项：

Here is the code for "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作为选择标签的类名。然后，它将查看选项标签中的选项标签是否可用，并获取所选选项标签的值。

Above code, will find the drop down menu, which has "goog-te-combo" as a class name for "select" tag. Then, it will see if the option tags are available in the select tag and get the value of the selected option tag.

我还创建了一个名为 GA-事件-Google翻译点击，并触发呼叫点击-Google翻译。

I also have created a tag call "GA - Event - Google Translate Clicks" and trigger call "Click - Google Translate".

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

When I test this out, I see that my "GA - Event - Google Translate Clicks" get triggered when I click on the drop down menu on my page. However, when I check the "variables" tab in the Google Tag Manager and check the variable "JS - Google Translate - Select Option", I see it empty.

Google翻译小部件下拉菜单选项

Google跟踪代码管理器 JS-Google翻译-选择选项为空

推荐答案

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

Problem is that you need to trigger tag when onchange event happens.

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

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

First of all you need to set up custom event trigger for onchange event (original article about that you can find here):

设置自定义事件监听器

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

Go to Triggers-> New -> Custom Event

• 事件名称：gtm.js


• 触发名称：gtm.js

设置事件处理程序JS变量

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

Go to Variable -> User-Defined variables -> New -> Type -> Custom 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
        });
    }
}

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

Variable name: generic event handler

设置标签

转到标签->新建->类型->自定义HTML

Go to Tags-> New -> Type -> Custom 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监听器

Tag name: onchange listener

触发：gtm.js

现在，您已经创建了跟踪 onchange 事件。下一步是针对您的情况，当您要在有人翻译页面时触发代码

Now, you created everything what you need for tracking onchange events. Next steps is for exact your case, when you want to fire tag when someone translated the page

为Click元素启用内置变量

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

Go to Variables-> Built-In variables-> Configure -> Click Element

创建变量

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

Go to Variables-> User-Defined variables -> New-> Custom JavaScript

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

变量名称：所选语言

为标签创建触发器

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

Go to Triggers -> New -> Type -> Custom Event

事件类型：gtm.change

Event type: gtm.change

触发：某些自定义事件

点击元素-匹配CSS选择器- select.goog-te-combo

触发器名称：页面翻译

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

此步骤可能有所不同。这取决于您要触发哪种代码类型。在此示例中，我将事件发送到GA

This step might be different. It depends, what tag type do you want to fire. In this example i will send event to GA

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

Go to Tags-> New -> Type -> Universal Analytics

类型：事件

类别：翻译

操作：翻译

标签：{{Selected language}}

Label: {{Selected language}}

触发器：页面已翻译

完成

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

After this steps you will have working solution

这篇关于Google跟踪代码管理器：跟踪“选择”下拉菜单中的“选项”标签值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！