如何使用GTM安装GA4并追踪Shopify的购物转化价值
为你的网站安装谷歌追踪代码会有很多方法和路径,为了避免大家混淆,和之前所有的谷歌分析追踪安装教程一样,我先列出这个教程的使用环境:
网站系统: Shopify
实现路径:在Shopify的主题模板和checkout里嵌入GTM的代码
目的: 实现GA4的安装及转化价值追踪。
一、创建GA4账户,并获得衡量ID
1)在GA里点击屏幕左下角的设置,选择“创建账户”,使用你的网站域名给这个账户起个名字。
2)账户创立完毕后,在媒体资源下方的数据流中选择“网站”
3)接着会弹出下面的界面,确认在“增强型衡量功能”中有我红框中圈出的这些内容,如果没有,就点击右侧圆圈地方的设置按钮,把它们打开。接着点击“创建数据流”。
4)创建数据流后你看到这个界面,先不要关闭, 待会儿要用到下面的“衡量ID”。
二、安装GTM代码及checkout代码
1)进入GTM后台,访问GTM的账户界面, 点击创建账号
2)按照如下所示,填写账户名字,容器名字,目标广告平台选择“网站”。然后保存
3)接下来,GTM就给你弹出一段代码,提示你添加。看到代码后,就要开始进入到Shopify后台去添加代码了。
4)在Shopify模板里,点击编辑代码
5)找到theme.liquid 这个模板,把GTM提供的第一段代码放在第一个<head>的前面。
6)找到<body>的位置, 把代码粘贴进去, 只要在结束的</body>之前添加就可以了。添加完毕后,记得保存theme.liquid的文件。
接下来的操作非常重要。非Shopify plus版本如果想追踪转化行为和价值,就需要在设置-checkout-额外代码里增加一段代码。在这里,你可以使用如下代码。添加代码时,记得替换掉里面G-开头的衡量ID,换成你自己的。
<script>window.dataLayer = window.dataLayer || [];dataLayer.push({ ecommerce: null });{% if first_time_accessed %}dataLayer.push({ event: "purchase", ecommerce: { transaction_id: "{{ order.order_number }}", value: {{ total_price | times: 0.01 }}, tax: {{ tax_price | times: 0.01 }}, shipping: {{ shipping_price | times: 0.01 }}, currency: "{{ order.currency }}", items: [ {% for line_item in line_items %}{ item_id: "{{ line_item.product_id }}", item_name: "{{ line_item.title | remove: "'" | remove: '"' }}", currency: "{{ order.currency }}", price: {{ line_item.final_price | times: 0.01 }}, quantity: {{ line_item.quantity }} },{% endfor %} ] }});{% endif %}</script> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-EXAMPLE');</script> <!-- End Google Tag Manager -->
三、增加GA4 配置
我们回到Tag Manager界面, 点击左侧“代码”,在页面右上角点击“新建”,按照下图所做选择和配置。
四、在GTM里配置变量
如果想让GA4追踪除pageview之外其他的数据,就需要用datalayer推送数据(点击查看datalayer科普)。第三步里在checkout中给到的代码就是实现了数据层的数据推送。所以接下来就需要在GTM里配置这些数据层的变量,便于接收变量和值。
所以你需要在GTM里对变量、触发器、和代码进行配置。为了方便大家,我做了一个容器文件,可以直接导入。
关注我的公众号“ada的跨境笔记”后回复 “Shopify容器文件” 下载后缀为json的文件。
在GTM里,点击管理-容器导入,选择创建新的工作区然后合并,覆盖冲突的代码、触发器和变量。
这份导入的容器代码里包含了9个变量,1个触发器和一个代码。
然后选择新增的这个代码,在下图”配置代码“中选择本教程中第三步中创建的GA4代码的配置。
这份文件只是为你提供了自定义变量的写入。所以你依旧需要创建purchase, add to cart等代码,并为此创建触发器,这样才能去追踪网站上的各种事件,点击查看google tag anager事件配置教程, 增加更多的追踪事件。
以purchase为例,配置完触发器后,你需要按照如下方式配置代码,在更多设置里选择电子商务-发送电子商务数据。
最后, 合并2个工作区,该调试调试,该debug就debug。所有的谷歌追踪代码在安装完毕后,都需要自行调试检查。
五、列出不需要的引荐渠道
由于我们在checkout页面增加了代码,就会带来新的引荐渠道。所以为了确保销售归因到正确的营销渠道,我们需要防止Shopify 结账页面在报告中显示为推荐。因此还需要做以下配置。
1)在 Google Analytics 中打开数据流,就是可以看到数据流ID的地方,在设置那里点击更多设置,就会看到如下页面,然后选择“列出多余的引荐流量”。
2)然后在输入 myshopify.com 作为排除项。点击保存。
OK,那么到这里,为Shopify安装GTM的全部教程就完毕了。