Shopify站GA4代碼添加與必做設置

3239 閱讀 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>