2023年3月29日更新。
为你的网站安装谷歌追踪代码会有很多方法和路径，为了避免大家混淆，和之前所有的谷歌分析追踪安装教程一样，我先列出这个教程的使用环境：
网站系统： 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的文件。
！！！关键步骤-checkout页面！！！！！
非Shopify plus版本如果想追踪转化行为和价值，就需要在设置-checkout-额外代码里增加一段代码。在这里，你可以使用如下代码。添加代码时，记得替换掉里面G-开头的衡量ID，换成你自己的。
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 | <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 作为排除项。点击保存。
六、创建Purchase事件
在Google Tag Manager中，创建一个purchase的trigger。并采用Custom Event的触发器，触发规则参考下图。有的人会采用pageview，但是在这种规则下，很容易导致重复记录购买次数
原创文章，作者：Ada，如若转载，请注明出处：https://yaosocial.com/archives/how-to-install-ga4-with-google-tag-manager-and-track-ecommerce-conversion-value/
微信扫一扫