我在跟踪"选择"标签中"选项"标签的值时遇到问题。 我目前有一个谷歌翻译小部件的下拉菜单，用户可以在其中单击它并选择语言。 当您单击"选择语言"下拉菜单时，您将能够看到德语作为选项。 请参阅随附的屏幕截图。 我在谷歌跟踪代码管理器中创建了一个宏调用"JS - 谷歌翻译 - 选择选项"。
这是"JS-谷歌翻译-选择选项"的代码：
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-谷歌翻译-选择选项"时，我看到它是空的。
谷歌翻译小部件下拉菜单选项
谷歌跟踪代码管理器"JS - 谷歌翻译 - 选择选项"空
问题是您需要在事件发生时触发标记onchange。
如果您使用的是谷歌网站翻译器，如何跟踪页面翻译的完整指南
首先，您需要为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>
标签名称：更改侦听器
触发器：GTM.js
现在，您创建了跟踪onchange事件所需的一切。接下来的步骤是针对您的具体情况，当您想在有人翻译网页时触发代码时
为 Click 元素启用内置变量
转到变量->内置变量->配置 ->单击元素
为所选语言创建变量
转到变量 ->用户定义的变量 ->新>自定义 JavaScript
function() {
var list = document.querySelector('select.goog-te-combo');
return list ? list.options[list.selectedIndex].value : undefined;
}
变量名称：所选语言
为代码创建触发器
转到触发器 -> 新建 -> 类型 -> 自定义事件
事件类型：更改
触发：一些自定义事件
Click Element-Matches CSS selector-select.goog-te-combo
触发器名称：页面已翻译
创建最终代码，当有人翻译网页时，该代码将触发事件
此步骤可能有所不同。这取决于您要触发的代码类型。在此示例中，我将向 GA 发送事件
转到标记->新->类型 ->通用分析
类型：事件
类别： 翻译
操作：翻译
标签： {{所选语言}}
触发器：页面已翻译
做
完成此步骤后，您将获得有效的解决方案
我相信可能发生的情况是，您的触发器在变量有时间评估之前就被触发了。
执行此操作的更简洁方法是定义使用<select>标记的onchange处理程序将事件与所选值一起推送到 GTM 数据层。这可能看起来像这样：
<select id="language" onChange="languageSelected(this.selectedIndex);>
您的languageSelected函数可能如下所示：
function languageSelected(index) {
dataLayer = dataLayer || [];
dataLayer.push({'event' : 'languageSelected', 'language' : 'German'});
}
然后，您将在 GTM 中定义一个从数据层读取language属性的数据层变量，然后定义一个类型为自定义事件的触发器，其中事件名称为languageSelected。
它工作得很好，但gtm.change下拉类select.goog-te-combo3 次触发。