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

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

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

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

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

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

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

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

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

我們給其中一個(gè)Shopify網(wǎng)站測試了一個(gè)月。發(fā)現(xiàn)還真不錯(cuò)! 統(tǒng)計(jì)的交易金額和數(shù)量，關(guān)鍵結(jié)賬事件，都挺準(zhǔn)確的。雖然有些誤差，但是基本也是在5%以內(nèi)。

用這一套追蹤方案，至少節(jié)省了5000多人民幣的插件使用費(fèi)，有這錢請(qǐng)員工吃飯喝酒不香嘛~

整個(gè)教程就三個(gè)步驟

第一：將代碼復(fù)制到Shopify后臺(tái)的Custom event里

第二：將GTM的json文件導(dǎo)入到container

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

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

Table of Content

第一步 創(chuàng)建custom events

第二步: 上傳GTM Container文件

第三步；對(duì)接檢查

第一步 創(chuàng)建custom events

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

如果你還想統(tǒng)計(jì)分類頁查看數(shù)量，從購物車移出數(shù)量和搜索次數(shù)。可以讓你們公司的技術(shù)人員，查看shopify的standard events。將shopify的事件名稱和google的標(biāo)準(zhǔn)事件名稱對(duì)應(yīng)起來，傳輸?shù)紾TM那邊。畢竟2個(gè)平臺(tái)對(duì)于事件的命名，在用詞上有些不同。比如shopify的collection_viewed, 在google里稱作item_list_viewed

對(duì)于custom event的customer privacy， 按下面進(jìn)行選擇。

設(shè)置完畢后， 可以使用“test”功能，在新打開的網(wǎng)站頁面上做各種加購、結(jié)賬的操作，看pxiel是否正確上報(bào)。

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

第二步: 上傳GTM Container文件

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

我們自己的做法是新建了一個(gè)工作區(qū)workspace，然后將json文件以overwrite方式導(dǎo)入進(jìn)去。這份文件，關(guān)注公眾號(hào)后回復(fù)shopify pixel就可以獲得下載地址。

上傳完畢后，你會(huì)看到新增了下面這些內(nèi)容

| 12個(gè)變量

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

|2個(gè)trigger

在ecommerce event的觸發(fā)器下，設(shè)置了多個(gè)事件，包含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個(gè)Tag

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

請(qǐng)注意，這里是標(biāo)準(zhǔn)的Tag事件， 你依舊需要為這purchase、add to cart，view cart等你需要特別追蹤關(guān)注的事件去新增Tag。

圖片

需要注意的是，做好2個(gè)檢查。

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

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

第三步:對(duì)接檢查

shopify custom event中， 對(duì)GTM這個(gè)event進(jìn)行connect操作，確保是連接上的

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

如果你的網(wǎng)站有cookie consent的話，就沒有辦法使用GTM的調(diào)試進(jìn)行測試了。如果有技術(shù)小哥幫忙，看看是否可以通過GTM設(shè)置繞過這個(gè)限制。

在GTM的觸發(fā)器里，你可能注意到了下面這幾個(gè)事件，其實(shí)我們并沒有在shopify custom event里進(jìn)行訂閱和上報(bào)的。如果你想追蹤下面的事件，就需要技術(shù)小哥出馬，增加對(duì)這幾個(gè)事件的訂閱和上報(bào)啦。

view_item_list

select_item

remove_from_cart

通過shopify的教程和已有代碼的對(duì)比，在沒有技術(shù)小哥的幫助下，我們團(tuán)隊(duì)里不懂代碼的小伙伴都成功新增了view_item_list這個(gè)事件的代碼并調(diào)試成功。

remove_from_cart 等事件也可以按照相同的辦法在add_to_cart事件的代碼基礎(chǔ)上進(jìn)行修改哦。

如果你的網(wǎng)站使用的是shopify系統(tǒng)，就可以使用這個(gè)教程哦！如果你覺得有用，也請(qǐng)分享給有需要的朋友。

省下的插件費(fèi)用，請(qǐng)團(tuán)隊(duì)吃飯吃飯吃飯！