Shopify站GA4代码添加与必做设置

1808 阅读 0 评论 5 点赞

谷歌公布将于2023年7月1日暂停GA3(Universal Analytics)服务后，大家都陆续安装了GA4。但是使用shopify网站的小伙伴在安装GA4过程中普遍遇到问题：shopify还没有更新GA4接口，非Advanced版本shopify添加代码过程中，又普遍遇到全局代码加了，但是统计不全，或者电子商务代码不会加的问题。

本文是在谷歌工程师指导下，给三个shopify站添加过GA4代码，并且已经验证过数据后，总结的添加方法，供大家参考。

一、Shopify站添加GA4全局与电子商务代码的两种方法

二、添加好GA4代码后，推荐做的设置

一、Shopify站添加GA4全局与电商代码的两种方法

方法一：使用插件添加（推荐）

1. 在shopify后台添加Hello Google Analytics 4 插件

https://apps.shopify.com/hello-google-analytics

2. 打开GA4，复制衡量ID

3. 设置插件：

粘贴衡量ID

勾选Standard eCommerce Events,

Activation Status: Actibe

点击Save保存后，GA4就安装好了，可以开始收集数据（包括电子商务事件）了

方法二：直接编辑代码

非专业人士不太推荐这种方法，因为不同的网站加购，要添加的代码是不同的，最好由专业人士添加。鉴于很多小伙伴又很感兴趣，所以把我添加的两个站的代码贴给大家参考

1. 打开GA4，获取全局代码

复制代码

2. 打开shopify后台，打开Online Store – Action – Edit Code

3. 打开theme.liquid文件，在标记中间，添加全局与电子商务代码

以下为我们网站这部分代码的参考：

<!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script> <script>  window.dataLayer = window.dataLayer || [];  function gtag(){dataLayer.push(arguments);}  gtag('js', new Date());
  gtag('config', 'G-XXXXX');</script><script>gtag('event', '网页浏览')</script>     <script>window.addEventListener('load',function(){document.querySelectorAll('[id="product-add-to-cart"]').forEach(function(e){    e.addEventListener('click',function()    {        gtag("event", "add_to_cart",         {              currency: "USD",              value: document.querySelector('[itemprop="price"]').innerText.replace(/[^\d.]/g,""),              items:               [                {                  item_name: document.querySelector('[itemprop="name"]').innerText,                  currency: "USD",                  price: document.querySelector('[itemprop="price"]').innerText.replace(/[^\d.]/g,"")                }              ]            });    })})})</script><script>window.addEventListener('load',function(){document.querySelectorAll('[name="checkout"]').forEach(function(e){    e.addEventListener('click',function()    {        gtag("event", "begin_checkout")    })})})</script>

4. 打开Setting – Checkout – Order Status, 添加全局和电子商务代码

以下为我们网站这部分代码的参考：

<!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script><script>  window.dataLayer = window.dataLayer || [];  function gtag(){dataLayer.push(arguments);}  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');</script><script>window.addEventListener('load',function(){if(window.location.href.includes('thank_you')) {            var item_list_detail = [];            var item_name = document.querySelectorAll('[class="product__description__name order-summary__emphasis"]')            var item_price = document.querySelectorAll('[class="product__price"]')            var item_quantity = document.querySelectorAll('[class="product__quantity"]')            for(i = 0; i < item_name.length; i++){ item_list_detail.push({'item_name': item_name[i].innerHTML,'price': item_price[i].innerHTML.replace(/[^0-9.]/g,''),    'quantity': item_quantity[i].innerHTML.replace(/[^0-9.]/g,'')    });}                            gtag("event", "purchase",                     {                        transaction_id: document.querySelector('[class="os-order-number"]').innerText.split('#')[1],                        value: document.querySelector('[class="payment-due__price skeleton-while-loading--lg"]').innerHTML.replace(/[^0-9.]/g,''),                        currency: "USD",                        items: item_list_detail                    });}})</script>