Shopify GA4 設(shè)置最新版2.1

代碼更新內(nèi)容：

1. 代碼更新了，修復(fù)了和產(chǎn)品目標(biāo)相關(guān)的小問題

2. Sh_info event增加了?User?type,?content?type,?customer?id,?last?order?date,?total?order?quantity,?total?expenditure,?and?customer?tag?fields

3. 增加了新的產(chǎn)品變量：productSku, productType, productVariantId, productVariantTitle and currency.

4. 增加了新的交易變量：orderItemsSku, orderItemsvariantId, orderItemsvariantTitle,orderItemsCategory,orderItemsBrand,orderItemsType

5. 為多貨幣的商店增加了貨幣匯率和靜態(tài)訂單金額變量：totalValueStatic, currencyRate.

6. 根據(jù)Shopify的結(jié)賬流程，如果OrderID字段是空的，transaction_id字段被調(diào)整為傳輸結(jié)賬ID。

7. Item?data(line_item)會(huì)根據(jù)checkout?對(duì)象修改

   
   

1. 注冊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處填充

2.粘貼Shopify?dataLayer?(Checkout?-?Purchase)?2.1版本

目的：通過以下代碼可以讓GTM讀取和處理。該代碼塊包括以下變量：購買的產(chǎn)品、頁面類型、貨幣、運(yùn)輸價(jià)格、總價(jià)、稅價(jià)、支付類型和交易ID。我們能夠把所有這些數(shù)據(jù)傳遞給Google Ads、Facebook Pixel、Google Analytics 4和其他你想分享的各方。

如下在checkout?GTMcode下面

*********************************START*********************************

{%?assign?template_name?=?template.name?%}

<script?type="text/javascript">

window.dataLayer?=?window.dataLayer?||?[];

window.appStart?=?function(){

??window.allPageHandle?=?function(){

????window.dataLayer.push({

??????event:?"ga4kit_info",

??????contentGroup:?"{{?template_name?}}",

??????{%?if?customer?%}

??????userType:?"member",

??????customer:?{

????????id:?"{{-?checkout.customer.id?|?json?-}}",

????????lastOrder:?"{{-?customer.last_order.created_at?|?date:?'%B?%d,?%Y?%I:%M%p'?-}}",

????????orderCount:?"{{-?checkout.customer.orders_count?|?json?-}}",

????????totalSpent:?"{{-?checkout.customer.total_spent?|?times:?0.01?|?json?-}}",

????????tags:?{{-?checkout.customer.tags?|?json?-}}

??????}

??????{%?else?%}

????????userType:?"visitor",

??????{%?endif?%}

????});

??};

??allPageHandle();

{%?if?first_time_accessed?and?post_purchase_page_accessed?!=?true?%}

??var?shippingPrice?=?"{{shipping_price?|?money_without_currency?}}".replace(",",?".");

??var?totalPrice?=?"{{checkout.total_price?|?money_without_currency?}}".replace(",",?".");

??var?taxPrice?=?"{{tax_price?|?money_without_currency?}}".replace(",",?".");

??var?orderItemsName?=?[];

??var?orderItemsId?=?[];

??var?orderItemsCategory?=?[];

??var?orderItemsBrand?=?[];

??var?orderItemsType?=?[];

??var?orderItemsPrice?=?[];

??var?orderItemsSku?=?[];

??var?orderItemsvariantId?=?[];

??var?orderItemsQuantity?=?[];

??var?orderItemsvariantTitle?=?[];

??var?totalQuantity?=?0;

??{%?for?line_item?in?checkout.line_items?%}??

??????orderItemsName.push("{{?line_item.product.title?|?remove:?"'"?|?remove:?'"'}}");

??????orderItemsId.push("{{?line_item.product_id?}}");

??????orderItemsPrice.push("{{?line_item.price?|?times:?0.01?}}");

??????orderItemsSku.push("{{?line_item.sku?|?remove:?"'"?|?remove:?'"'?}}");

??????orderItemsQuantity.push("{{?line_item.quantity?}}");

??????orderItemsvariantId.push("{{?line_item.variant_id?}}");

??????orderItemsvariantTitle.push("{{?line_item.variant.title?}}");

??????orderItemsCategory.push("{{?line_item.product.collections.last.title?|?remove:?"'"?|?remove:?'"'?}}");

??????orderItemsBrand.push("{{?line_item.vendor?|?remove:?"'"?|?remove:?'"'?}}");

??????orderItemsType.push("{{?line_item.product.type?|?remove:?"'"?|?remove:?'"'?}}");

??????totalQuantity?+=?{{?line_item.quantity?}};

??{%?endfor?%}

??window.dataLayer.push({??

??????page_type:?"purchase",

??????event:?"analyzify_purchase",

??????currency:?"{{?shop.currency?}}",

??????totalValue:?totalPrice,

??????totalValueStatic:?totalPrice,

??????currencyRate:?window.Shopify.currency.rate,

??????shipping:?shippingPrice,

??????tax:?taxPrice,

??????payment_type:?"{{order.transactions[0].gateway}}",

??????{%?if?order.name?%}

??????transaction_id:?"{{order.name?|?remove:?"'"?|?remove:?'"'}}",

??????{%?else?%}

??????transaction_id:?"{{checkout.id?|?remove:?"'"?|?remove:?'"'}}",

??????{%?endif?%}

??????productName:?orderItemsName,

??????productId:?orderItemsId,

??????productBrand:?orderItemsBrand,

??????productCategory:?orderItemsCategory,

??????productVariantId:?orderItemsvariantId,

??????productVariantTitle:?orderItemsvariantTitle,

??????productSku:?orderItemsSku,

??????productType:?orderItemsSku,

??????productPrice:?orderItemsPrice,

??????productQuantity:?orderItemsQuantity,

??});

{%?endif?%}

}

appStart();

</script>

************************************END**********************************

3. 粘貼Shopify?Product?View?Data?Layer

點(diǎn)擊Theme，打開Snippets,然后添加File name：?analyzify-product-datalayer

粘貼以下代碼然后保存

*************************************START*******************************

{%?assign?template_name?=?template.name?%}

<script?type="text/javascript">

window.dataLayer?=?window.dataLayer?||?[];

window.appStart?=?function(){

??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:?'"'?}}";

????var?productType?=?"{{?product.type?|?remove:?"'"?|?remove:?'"'?}}";

????var?productSku?=?"{{?product.selected_or_first_available_variant.sku?|?remove:?"'"?|?remove:?'"'?}}";

????var?productVariantId?=?"{{?product.selected_variant.id?|?default:?product.variants[0].id?}}";

????var?productVariantTitle?=?"{{?product.selected_variant.title?|?default:?product.variants[0].title?}}";

????window.dataLayer.push({

??????event:?"analyzify_productDetail",

??????productId:?productId,

??????productName:?productName,

??????productPrice:?productPrice,

??????productBrand:?productBrand,

??????productCategory:?productCollection,

??????productType:?productType,

??????productSku:?productSku,

??????productVariantId:?productVariantId,

??????productVariantTitle:?productVariantTitle,

??????currency:?"{{?shop.currency?}}",

????});

??};

??window.allPageHandle?=?function(){

????window.dataLayer.push({

??????event:?"ga4kit_info",

??????contentGroup:?"{{?template_name?}}",

??????{%?if?customer?%}

??????userType:?"member",

??????customer:?{

????????id:?"{{-?checkout.customer.id?|?json?-}}",

????????lastOrder:?"{{-?customer.last_order.created_at?|?date:?'%B?%d,?%Y?%I:%M%p'?-}}",

????????orderCount:?"{{-?checkout.customer.orders_count?|?json?-}}",

????????totalSpent:?"{{-?checkout.customer.total_spent?|?times:?0.01?|?json?-}}",

????????tags:?{{-?checkout.customer.tags?|?json?-}}

??????}

??????{%?else?%}

????????userType:?"visitor",

??????{%?endif?%}

????});

??};

??allPageHandle();

??????

??{%?case?template_name?%}

??{%?when?"product"?%}

????productPageHandle();

??{%?endcase?%}

}

appStart();

</script>

***************************************END*******************************

然后復(fù)制這個(gè)代碼：?{%?render?'analyzify-product-datalayer.liquid'?%}

粘貼在theme?liquid的<head>中

4. 將容器導(dǎo)入GTM

容器領(lǐng)取方式見文末

點(diǎn)擊確認(rèn)之后返回點(diǎn)擊右上角的提交直接發(fā)布。

然后點(diǎn)擊文件夾，再次檢查確認(rèn)自己的GA4代碼是否有誤

完成后如下

5.最后驗(yàn)證代碼是否可行

鏈接成功后會(huì)跳轉(zhuǎn)你的網(wǎng)站，你網(wǎng)站頁面出現(xiàn)如下提示就是成功了

Tagassistant的頁面也會(huì)出現(xiàn)鏈接成功的提示如下

通過TAG?ASSISTANT檢查事件是否觸發(fā)成功

回到我們的GA頁面就可以看到更加詳細(xì)的產(chǎn)品信息顯示在報(bào)告里面

公眾號(hào)發(fā)送消息“GA4容器2.1”即可領(lǐng)取最新容器~