注冊GTM:?https://tagmanager.google.com
粘貼GTM?code在shopify?theme.liquid?&?checkout
找到GTM追蹤代碼：
回到Shopify粘貼在theme?liquid和checkout頁面
Shopify——Theme——Actions下拉選擇Edit?Code
shopify——Setting——Checkout——Additional?scripts處填充
粘貼Shopify?dataLayer?(Checkout?-?Purchase)
目的：通過以下代碼可以讓GTM讀取和處理。該代碼塊包括以下變量：購買的產品、頁面類型、貨幣、運輸價格、總價、稅價、支付類型和交易ID。我們能夠把所有這些數據傳遞給Google?Ads、Facebook?Pixel、Google?Analytics?4和其他你想分享的各方。
如下在checkout?GTMcode下面
******************************************Start*************************************
????<script>????
????window.dataLayer?=?window.dataLayer?||?[];????????????????????????????????????????????
????var?shipping_price?=?'{{shipping_price?|?money_without_currency?}}';
????shipping_price??=?shipping_price.replace(",",?".");
????var?total_price?=?'{{total_price?|?money_without_currency?}}';
????total_price??=?total_price.replace(",",?".");
????var?tax_price?=?'{{tax_price?|?money_without_currency?}}';
????tax_price??=?tax_price.replace(",",?".");
??????var?orderItemsName?=?[]????????????
??????var?orderItemsPrice?=?[]
??????var?orderItemsQuantity?=?[]
????var?orderItemsId?=?[]
??????var?totalQuantity?=?0;
??????{%?for?line_item?in?line_items?%}
??????????orderItemsName.push(?'{{?line_item.product.title?|?remove:?"'"?|?remove:?'"'}}')
??????????orderItemsPrice.push('{{?line_item.price?|?times:?0.01?}}');
??????????orderItemsQuantity.push('{{?line_item.quantity?}}');
??????????orderItemsId.push('{{?line_item.product_id?}}');
?????????totalQuantity?+=??{{?line_item.quantity?}};
??????{%?endfor?%}
??????{%?if?first_time_accessed?%}?
????window.dataLayer.push({
????'page_type':?'purchase',
????'event':?'analyzify_purchase',
????'currency':?"{{?shop.currency?}}",
????'totalValue':?total_price,
????'shipping':?shipping_price,
????'tax':?tax_price,
????'payment_type':?'{{order.transactions[0].gateway}}',
????'transaction_id':?"{{order.name}}",
??????'productName':?orderItemsName,
??????'productPrice':?orderItemsPrice,
??????'productQuantity':?orderItemsQuantity,
????'productId':?orderItemsId,
????});
????{%?endif?%}
?????</script>?
?*******************************************************END**********************************************
粘貼Shopify?Product?View?Data?Layer
點擊Theme，打開Snippets,然后添加File?name：?analyzify-product-datalayer
粘貼以下代碼然后保存
******************************************************START*********************************************
<script?type="text/javascript">
??window.dataLayer?=?window.dataLayer?||?[];
??window.appStart?=?function(){
????{%?assign?template_name?=?template.name?%}?
????window.productPageHandle?=?function(){
??????var?productName?=?"{{?product.title?|?remove:?"'"?|?remove:?'"'?}}";
??????var?productId?=?"{{?product.id?}}";
??????var?productPrice?=?"{{?product.price?|?money_without_currency?}}";
??????var?productBrand?=?"{{?product.vendor?|?remove:?"'"?|?remove:?'"'?}}";
??????var?productCollection?=?"{{?product.collections.first.title?|?remove:?"'"?|?remove:?'"'?}}"
??????window.dataLayer.push({
????????event:?'analyzify_productDetail',
????????productName:?productName,
????????productId:?productId,
????????productPrice:?productPrice,
????????productBrand:?productBrand,
????????productCategory:?productCollection,
??????});
????};
????{%?case?template_name?%}
????{%?when?'product'?%}
????????productPageHandle()
????{%?endcase?%}
??}
??appStart();
</script>
**********************************************************END*******************************************
然后復制這個代碼：?{%?render?'analyzify-product-datalayer.liquid'?%}
粘貼在theme?liquid的<head>中
將容器導入GTM
導入之后更新自己的GA4代碼進入
完成后如下
這個可以用來當conversions
最后驗證代碼是否可行
鏈接成功后會跳轉你的網站，你網站頁面出現如下提示就是成功了
Tagassistant的頁面也會出現鏈接成功的提示如下
通過TAG?ASSISTANT檢查事件是否觸發成功
回到我們的GA頁面就可以看到更加詳細的產品信息顯示在報告里面
7.提交發布
回到GTM頁面，勾選導入的容器并點擊右上角的發布即可。
這周在深耕GA4和shopify的內容，后面陸續更新相關資料~^
公眾號發送消息“GA4容器”即可領取相關資料！
文章為作者獨立觀點，不代表DLZ123立場。如有侵權,請聯系我們。( 版權為作者所有，如需轉載，請聯系作者 )
網站運營至今，離不開小伙伴們的支持。 為了給小伙伴們提供一個互相交流的平臺和資源的對接，特地開通了獨立站交流群。
群里有不少運營大神，不時會分享一些運營技巧，更有一些資源收藏愛好者不時分享一些優質的學習資料。
現在可以掃碼進群，備注【加群】。 ( 群完全免費，不廣告不賣課！)
