文章来源: https://www.analyticsmania.com/post/track-page-translations-with-google-tag-manager-and-google-analytics/
是否需要开设小语种站点?你可以通过GA查看用户的地理位置和语言报表获得数据insight。
配合GTM,你还能追踪页面上的翻译事件。(谷歌翻译,Bing翻译)
我们看看目前比较常用的翻译方法:
翻译方法一:右键在下拉菜单中翻译(chrome)

这里以法语为例,点击之后,页面很快变成法语页面,感谢AI。

这个翻译事件可以追踪是因为,翻译的同时,页面Dom元素做了更改:
- translated-rtl 或 translated-ltr 增加到了html的节点中
- lang属性修改成了翻译目标语言

通过GTM配合JS可以获取到这个变化,我们可以将它作为一个trigger触发器追踪事件确切发生的时间。
翻译方法二:利用谷歌翻译或者必应翻译工具
PS:这个方法今天我也是第一次知道,具体过程见下图

点击超链之后,翻译工具会打开一个iFrame,包含了翻译好的页面。我们查看实时报告可以追踪此流量。

这个页面URL中包含了翻译目标语言等信息,是获取准确翻译语言的关键点。
如果你安装了报告中展示完整网址的过滤器,可以看到主机名,以此来区分谷歌翻译或者必应翻译的流量来源。
可使用以下设置为数据视图创建高级过滤器:
- 过滤器类型:自定义过滤器 > 高级
- 字段 A:主机名
- 提取 A:(.*)
- 字段 B: 请求 URI
- 提取 B:(.*)
- 输出至:请求 URI
- 构造器:$A1$B1
谷歌翻译主机名:translate.googleusercontent.com
必应翻译主机名:www.translatoruser-int.com
解决方案:利用GTM和自定义HTML代码跟踪页面翻译
首先需要新建一个自定义HTML的代码(Tag)
页面翻译监听
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<script> (function() { // 监测Dom树中的<html>标签有无变动 if (window.MutationObserver) { var mutationObserver = new MutationObserver(function(mutations) { mutations.forEach(function (mutation) { var oldElementClass = mutation.oldValue; var currentElementClass = mutation.target.className; if (oldElementClass.indexOf('translated-') === -1 && currentElementClass.indexOf('translated-') > -1) { window.dataLayer.push({ 'event' : 'pageTranslated', 'translationLanguage' : mutation.target.lang || document.getElementsByTagName('html')[0].getAttribute('xml:lang'), 'translationService' : 'on-page google translate' }); } }) }) var htmlNode = document.querySelector('html'); mutationObserver.observe(htmlNode, { attributes: true, attributeOldValue: true, attributeFilter: ['class'] }) } // 跟踪页面访问URL,通过主机名判别翻译工具 // 返回查询参数的值 (参考 https://davidwalsh.name/query-string-javascript) function getUrlParameter(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); var results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); }; // 检查主机名是否来自谷歌翻译 translate.google.com (viewed within the iframe) if (window.location.href.indexOf('translate.googleusercontent.com') > -1 ) { window.dataLayer.push({ 'event' : 'pageTranslated', 'translationLanguage' : getUrlParameter('tl'), 'translationService' : 'google translate website' }); } // 检查主机名是否来自必应翻译 bing.com/translator (viewed within the iframe) if (window.location.href.indexOf('translatoruser-int.com') > -1 ) { window.dataLayer.push({ 'event' : 'pageTranslated', 'translationLanguage' : getUrlParameter('to'), 'translationService' : 'bing translator website' }); } })(); </script> |
以上代码是Julius Fedorovicius原创,Simo Ahava审核过的,请放心食用,如果有任何疑问或者bug,请留言。
下面也会做一一解释,帮助你更好的理解这个事件追踪的原理。
#监测Dom树中的html元素有无变动

如果<html>标签发生了更改,并且更改涉及添加一个包含“translated-”字符串的类,则将一个pageTranslated的事件连同lang属性(翻译的目标语言)的新值推到数据层。
#跟踪发生在翻译工具iFrame中的页面访问

这里的一个替代方法是用GTM内置的URL变量参数,但是为了尽可能的减少触发器、变量的使用,直接用JS获取。
自定义HTML设置

复制以上全部代码,创建自定义HTML代码(Tag)并将代码粘贴到那里。将监听器设置为在所有页面上触发。
触发器
每当发生页面翻译时,pageTranslated会被传递到dataLayer中,因此还需要一个自定义事件作为触发器。

数据层变量
在翻译事件发生时,dataLayer.push,会将两个额外的键传递给数据层translationLanguage和translationService。目前,translationService将返回三个可能选项中的一个:
- on-page google translate (它意味着用户通过页面内部的右键翻译功能生成了新的语种页面)
- google translate website (当用户通过谷歌翻译工具输入URL,在其iFrame中生成新的语种页面)
- bing translator website (同上)
因此需要新建数据层变量如下图所示:


事件代码tag(Final Step)

我这里“非互动匹配”选择的是False,因为我认为用户选择了翻译页面就是一次有效的交互,相当于打开了一个新的其他语种的页面。
当然这可能对于iFrame的页面访问造成一定的数据干扰,请按需配置。
预览和调试(重要)
1.在GTM中开启预览模式,打开你的网页,右键翻译,在实时报告中看有无事件触发。

2.打开JS调试窗口(console)输入如下命令:
- google_tag_manager[“YOUR_CONTAINER_ID”].dataLayer.get(‘translationLanguage’)
- google_tag_manager[“YOUR_CONTAINER_ID”].dataLayer.get(‘translationService’)

通过此命令可以查看这两个键值对有没有正确的通过GTM的dataLayer传入GA。
3.打开谷歌或者必应翻译,然后输入URL,观测实时报告即可调试。
页面翻译事件追踪总结
其实通过GA自带的受众群体-地理位置-语言(位置)就能够分析出来网站受众的语言习惯。这篇博客在我看来有炫技的成分,但是如果你能够很好的理解这个代码部署的过程,必然能够加强理解代码-变量-触发器三者之间的关联。并且对于dataLayer这一大杀器有更深层次的理解。
NOW, Get Your Hand Dirty!
http://xzh.i3geek.com
Be First to Comment