Shopify作為全球建獨立站用戶最多的平臺，相信國內用戶建設獨立站也會考慮Shopify，而使用Shopify建設獨立站，肯定少不了安裝GA4，但是對于很多不懂代碼的新手來說，想要成功安裝GA4還是比較難的，所以小編今天把詳細流程給大家安排下。

在給Shopify安裝GA4代碼的時候，我們通常會有以下四種方式。

使用免費的google & youtube app。這種安裝方式不涉及到GTM的使用，只是打通了GA4和網站的數據，弊端是在于他無法和GTM進行集成，在追蹤一些事件的時候，你會覺得沒那么方便。

手動安裝GTM代碼，需要你在theme.liquid 和checkout頁面添加一段代碼，我之前寫了很多關于這方面的教程。但是這種方式很快就會被shopfiy棄用了。所以這也是為什么會有這篇教程的原因。

使用第三方pixel插件幫你配置各種事件，界面友好，簡單易懂， 類似下面這些。當然價格也是很美好了，除了有一次型收費749美金的analyzify，還有月費甚至高2000美金的attribuly。

4. 最后一種方法就是使用Shopify Pixel了，Shopify推這個也推了好幾年了。在官方介紹文檔里，Shopify宣傳這是一種高級的追蹤教程，對于不懂代碼的人來說的確有難度。感興趣的同學可以這查看原視頻：

https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

https://shopify.dev/docs/api/web-pixels-api/standard-events

但是經過我們孜孜不倦的挖掘和測試，找到了一個零代碼基礎的人也可以成功使用GTM和shopify Pixel的簡單教程。只需要按照教程里復制、粘貼、上傳文件，修改下GTM和GA4的ID就可以了。

我們給其中一個Shopify網站測試了一個月。發現還真不錯! 統計的交易金額和數量，關鍵結賬事件，都挺準確的。雖然有些誤差，但是基本也是在5%以內。

用這一套追蹤方案，至少節省了5000多人民幣的插件使用費，有這錢請員工吃飯喝酒不香嘛~

整個教程就三個步驟

第一：將代碼復制到Shopify后臺的Custom event里

第二：將GTM的json文件導入到container

第三：增加其他你需要追蹤的事件，保存即可。

OK，下面跟著教程一步一步的來。

Table of Content

第一步 創建custom events

第二步: 上傳GTM Container文件

第三步；對接檢查

第一步 創建custom events

進入到shopify-custom event-create pixel，我們暫時命名為GTM。然后，將如下代碼粘貼到空白處。記得修改里面的GTM ID。在這段代碼中，通過subscribe指令訂閱了加入購物車、開始結賬、填寫收貨地址，填寫付款信息、查看購車、加入購物車、查看產品這7個事件。

如果你還想統計分類頁查看數量，從購物車移出數量和搜索次數。可以讓你們公司的技術人員，查看shopify的standard events。將shopify的事件名稱和google的標準事件名稱對應起來，傳輸到GTM那邊。畢竟2個平臺對于事件的命名，在用詞上有些不同。比如shopify的collection_viewed, 在google里稱作item_list_viewed

對于custom event的customer privacy， 按下面進行選擇。

設置完畢后， 可以使用“test”功能，在新打開的網站頁面上做各種加購、結賬的操作，看pxiel是否正確上報。

通過shopify自帶的pixel helper就可以看到這些事件是否被記錄了。

第二步: 上傳GTM Container文件

進入到你的GTM – admin-import container，將我提供的json文件上傳上去。是用Merge還是overwrite，根據你自己的情況定。

我們自己的做法是新建了一個工作區workspace，然后將json文件以overwrite方式導入進去。這份文件，關注公眾號后回復shopify pixel就可以獲得下載地址。

上傳完畢后，你會看到新增了下面這些內容

| 12個變量

紅框中變量的GA4 ID要自行修改下。

|2個trigger

在ecommerce event的觸發器下，設置了多個事件，包含view_item|view_item_list|select_item|add_to_cart|remove_from_cart|view_cart|begin_checkout|add_payment_info|add_shipping_info|purchase

|2個Tag

一個是GA4的配置文件，記得改GA4-ID。另一個是事件Tag。

請注意，這里是標準的Tag事件， 你依舊需要為這purchase、add to cart，view cart等你需要特別追蹤關注的事件去新增Tag。

圖片

需要注意的是，做好2個檢查。

第一：有涉及到需要修改GA4 ID的地方要記得填寫

第二：Tigger、Tag的名字都可以修改。沒啥原因，就覺得太長了影響頁面整潔和美觀。

第三步:對接檢查

shopify custom event中， 對GTM這個event進行connect操作，確保是連接上的

使用google Tag Assistant Legacy去檢查網站上是否成功檢測到你的google tag manger的ID和global site tag的ID。

如果你的網站有cookie consent的話，就沒有辦法使用GTM的調試進行測試了。如果有技術小哥幫忙，看看是否可以通過GTM設置繞過這個限制。

在GTM的觸發器里，你可能注意到了下面這幾個事件，其實我們并沒有在shopify custom event里進行訂閱和上報的。如果你想追蹤下面的事件，就需要技術小哥出馬，增加對這幾個事件的訂閱和上報啦。

view_item_list

select_item

remove_from_cart

通過shopify的教程和已有代碼的對比，在沒有技術小哥的幫助下，我們團隊里不懂代碼的小伙伴都成功新增了view_item_list這個事件的代碼并調試成功。

remove_from_cart 等事件也可以按照相同的辦法在add_to_cart事件的代碼基礎上進行修改哦。

如果你的網站使用的是shopify系統，就可以使用這個教程哦！如果你覺得有用，也請分享給有需要的朋友。

省下的插件費用，請團隊吃飯吃飯吃飯！