通过GA、GTM追踪页面翻译事件 – Damon Analytics Skip to content

通过GA、GTM追踪页面翻译事件

文章来源: 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属性修改成了翻译目标语言
F12呼出开发者模式可以观察到变化

通过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)

页面翻译监听

以上代码是Julius Fedorovicius原创,Simo Ahava审核过的,请放心食用,如果有任何疑问或者bug,请留言。

下面也会做一一解释,帮助你更好的理解这个事件追踪的原理。

#监测Dom树中的html元素有无变动

监测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中开启预览模式,打开你的网页,右键翻译,在实时报告中看有无事件触发。

GA实时-事件报告

2.打开JS调试窗口(console)输入如下命令:

  • google_tag_manager[“YOUR_CONTAINER_ID”].dataLayer.get(‘translationLanguage’)
  • google_tag_manager[“YOUR_CONTAINER_ID”].dataLayer.get(‘translationService’)
JS console调用dataLayer中的key value

通过此命令可以查看这两个键值对有没有正确的通过GTM的dataLayer传入GA。

3.打开谷歌或者必应翻译,然后输入URL,观测实时报告即可调试。

页面翻译事件追踪总结

其实通过GA自带的受众群体-地理位置-语言(位置)就能够分析出来网站受众的语言习惯。这篇博客在我看来有炫技的成分,但是如果你能够很好的理解这个代码部署的过程,必然能够加强理解代码-变量-触发器三者之间的关联。并且对于dataLayer这一大杀器有更深层次的理解。

NOW, Get Your Hand Dirty!

http://xzh.i3geek.com
Published inCategorygtm

Be First to Comment

发表评论

邮箱地址不会被公开。 必填项已用*标注