流量匯-匯聚全網(wǎng)流量平臺(tái),一手資源,安全,綠色,高效!
想要快速提升網(wǎng)站流量,網(wǎng)站訪客IP,網(wǎng)站UV,歡迎咨詢了解,免費(fèi)提供試用!
提升網(wǎng)站訪客,掃描下方二維碼或者聯(lián)系微信號(hào):AHB861
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ì)吃飯吃飯吃飯!