Shopify如何通过GTM配置GA4网站统计（Google分析）？

Google Analytics（分析）4即将取代Universal Analytics。2023年7月1日起，Universal Analytics媒体资源将停止收集数据，届时只有GA4媒体资源才会收集数据。

同时自2023年3月起，Google会根据客户Universal Analytics媒体资源中的设置创建GA4媒体资源，除非您关闭“自动设置基本的Google Analytics（分析）4媒体资源”。如果您已经创建了GA4媒体资源，并且相应媒体资源已与Universal Analytics媒体资源相关联，Google会从您的Universal Analytics媒体资源中复制您尚未在GA4媒体资源中标记为已完成的所有配置（例如，目标、受众群体等），除非您关闭“自动设置基本的Google Analytics（分析）4媒体资源”。

今年3月份，Shopify就已经内置了GA4的集成功能。但是需要用户按照Google的渠道app。如果您不想按照这个渠道，可以按照下面的步骤手动部署。

第一步：在Online Store > Themes > … > Edit HTML/CSS > Snippets >创建名为dataLayer的Liquid文件，内容为：

<script>
/**********************
* PRELOADS
* load jquery if it doesn't exist
***********************/

if(!window.jQuery){
    var jqueryScript = document.createElement('script');
    jqueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js');
    document.head.appendChild(jqueryScript);
}

__DL__jQueryinterval = setInterval(function(){
   // wait for jQuery to load & run script after jQuery has loaded
 if(window.jQuery){
// search parameters
getURLParams = function(name, url){
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
};

/**********************
* DYNAMIC DEPENDENCIES
***********************/

__DL__ = {
    dynamicCart: false,  // if cart is dynamic (meaning no refresh on cart add) set to true
    debug: false, // if true, console messages will be displayed
    cart: null,
    wishlist: null,
    removeCart: null
};

customBindings = {
    cartTriggers: [],
    viewCart: [],
    removeCartTrigger: [],
    cartVisableSelector: [],
    promoSubscriptionsSelectors: [],
    promoSuccess: [],
    ctaSelectors: [],
    newsletterSelectors: [],
    newsletterSuccess: [],
    searchPage: [],
    wishlistSelector: [],
    removeWishlist: [],
    wishlistPage: [],
    searchTermQuery: [getURLParams('q')], // replace var with correct query
};

/* DO NOT EDIT */
defaultBindings = {
    cartTriggers: ['form[action="/cart/add"] [type="submit"],.add-to-cart,.cart-btn'],
    viewCart: ['form[action="/cart"],.my-cart,.trigger-cart,#mobileCart'],
    removeCartTrigger: ['[href*="/cart/change"]'],
    cartVisableSelector: ['.inlinecart.is-active,.inline-cart.is-active'],
    promoSubscriptionsSelectors: [],
    promoSuccess: [],
    ctaSelectors: [],
    newsletterSelectors: ['input.contact_email'],
    newsletterSuccess: ['.success_message'],
    searchPage: ['search'],
    wishlistSelector: [],
    removeWishlist: [],
    wishlistPage: []
};

// stitch bindings
objectArray = customBindings;
outputObject = __DL__;

applyBindings = function(objectArray, outputObject){
    for (var x in objectArray) {
        var key = x;
        var objs = objectArray;
        values = [];
        if(objs.length > 0){
            values.push(objs);
            if(key in outputObject){
                values.push(outputObject[key]);
                outputObject[key] = values.join(", ");
            }else{
                outputObject[key] = values.join(", ");
            }
        }
    }
};

applyBindings(customBindings, __DL__);
applyBindings(defaultBindings, __DL__);

/**********************
* PREREQUISITE LIBRARIES
***********************/

clearInterval(__DL__jQueryinterval);

// jquery-cookies.js
if(typeof $.cookie!==undefined){
    (function(a){if(typeof define==='function'&&define.amd){define(['jquery'],a)}else if(typeof exports==='object'){module.exports=a(require('jquery'))}else{a(jQuery)}}(function($){var g=/\+/g;function encode(s){return h.raw?s:encodeURIComponent(s)}function decode(s){return h.raw?s:decodeURIComponent(s)}function stringifyCookieValue(a){return encode(h.json?JSON.stringify(a):String(a))}function parseCookieValue(s){if(s.indexOf('"')===0){s=s.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,'\\')}try{s=decodeURIComponent(s.replace(g,' '));return h.json?JSON.parse(s):s}catch(e){}}function read(s,a){var b=h.raw?s:parseCookieValue(s);return $.isFunction(a)?a(b):b}var h=$.cookie=function(a,b,c){if(arguments.length>1&&!$.isFunction(b)){c=$.extend({},h.defaults,c);if(typeof c.expires==='number'){var d=c.expires,t=c.expires=new Date();t.setMilliseconds(t.getMilliseconds()+d*864e+5)}return(document.cookie=[encode(a),'=',stringifyCookieValue(b),c.expires?'; expires='+c.expires.toUTCString():'',c.path?'; path='+c.path:'',c.domain?'; domain='+c.domain:'',c.secure?'; secure':''].join(''))}var e=a?undefined:{},cookies=document.cookie?document.cookie.split('; '):[],i=0,l=cookies.length;for(;i<l;i++){var f=cookies[i].split('='),name=decode(f.shift()),cookie=f.join('=');if(a===name){e=read(cookie,b);break}if(!a&&(cookie=read(cookie))!==undefined){e[name]=cookie}}return e};h.defaults={};$.removeCookie=function(a,b){$.cookie(a,'',$.extend({},b,{expires:-1}));return!$.cookie(a)}}))}

/**********************
* Begin dataLayer Build
***********************/

window.dataLayer = window.dataLayer || [];  // init data layer if doesn't already exist

var template = "{{template}}";

/**
* Landing Page Cookie
* 1. Detect if user just landed on the site
* 2. Only fires if Page Title matches website */

$.cookie.raw = true;
if ($.cookie('landingPage') === undefined || $.cookie('landingPage').length === 0) {
    var landingPage = true;
    $.cookie('landingPage', unescape);
    $.removeCookie('landingPage', {path: '/'});
    $.cookie('landingPage', 'landed', {path: '/'});
} else {
    var landingPage = false;
    $.cookie('landingPage', unescape);
    $.removeCookie('landingPage', {path: '/'});
    $.cookie('landingPage', 'refresh', {path: '/'});
}
if (__DL__.debug) {
    console.log('Landing Page: ' + landingPage);
}

/**
* Log State Cookie */

{% if customer %}
var isLoggedIn = true;
{% else %}
var isLoggedIn = false;
{% endif %}
if (!isLoggedIn) {
    $.cookie('logState', unescape);
    $.removeCookie('logState', {path: '/'});
    $.cookie('logState', 'loggedOut', {path: '/'});
} else {
    if ($.cookie('logState') === 'loggedOut' || $.cookie('logState') === undefined) {
        $.cookie('logState', unescape);
        $.removeCookie('logState', {path: '/'});
        $.cookie('logState', 'firstLog', {path: '/'});
    } else if ($.cookie('logState') === 'firstLog') {
        $.cookie('logState', unescape);
        $.removeCookie('logState', {path: '/'});
        $.cookie('logState', 'refresh', {path: '/'});
    }
}

if ($.cookie('logState') === 'firstLog') {
    var firstLog = true;
} else {
    var firstLog = false;
}

/**********************
* DATALAYER SECTIONS
***********************/

/**
* DATALAYER: Landing Page
* Fires any time a user first lands on the site. */

if ($.cookie('landingPage') === 'landed') {
    dataLayer.push({
        'pageType': 'Landing',
        'event': 'first_time_visitor'
    });
}

/**
* DATALAYER: Log State
* 1. Determine if user is logged in or not.
* 2. Return User specific data. */

var logState = {
    {% if shop.customer_accounts_enabled %}
    {% if customer %}
    'userId'        : {{customer.id | json}},
    'customerEmail' : {{customer.email | json}},
    'logState'      : "Logged In",
    'customerInfo'  : {
        'firstName'   : {{customer_address.first_name | json}},
        'lastName'    : {{customer_address.last_name | json}},
        'address1'    : {{customer_address.address1 | json}},
        'address2'    : {{customer_address.address2 | json}},
        'street'      : {{customer_address.street | json}},
        'city'        : {{customer_address.city | json}},
        'province'    : {{customer_address.province | json}},
        'zip'         : {{customer_address.zip | json}},
        'country'     : {{customer_address.country | json}},
        'phone'       : {{customer_address.phone | json}},
        'totalOrders' : {{customer.orders_count | json}},
        'totalSpent'  : {{customer.total_spent | money_without_currency | remove: "," | json}}
    },
    {% else %}
    'logState' : "Logged Out",
    {% endif %}
    {% endif %}
    'firstLog'      : firstLog,
    'customerEmail' : {{customer.email | json}},
    'timestamp'     : Date().replace(/\(.*?\)/g,''),
    {% if customer.orders_count > 2 %}
    'customerType'       : 'Returning',
    'customerTypeNumber' : '0',
    {% else %}
    'customerType'       : 'New',
    'customerTypeNumber' :'1',
    {% endif %}
    'shippingInfo' : {
        'fullName'  : {{checkout.shipping_address.name | json}},
        'firstName' : {{checkout.shipping_address.first_name | json}},
        'lastName'  : {{checkout.shipping_address.last_name | json}},
        'address1'  : {{checkout.shipping_address.address1 | json}},
        'address2'  : {{checkout.shipping_address.address2 | json}},
        'street'    : {{checkout.shipping_address.street | json}},
        'city'      : {{checkout.shipping_address.city | json}},
        'province'  : {{checkout.shipping_address.province | json}},
        'zip'       : {{checkout.shipping_address.zip | json}},
        'country'   : {{checkout.shipping_address.country | json}},
        'phone'     : {{checkout.shipping_address.phone | json}},
    },
    'billingInfo' : {
        'fullName'  : {{checkout.billing_address.name | json}},
        'firstName' : {{checkout.billing_address.first_name | json}},
        'lastName'  : {{checkout.billing_address.last_name | json}},
        'address1'  : {{checkout.billing_address.address1 | json}},
        'address2'  : {{checkout.billing_address.address2 | json}},
        'street'    : {{checkout.billing_address.street | json}},
        'city'      : {{checkout.billing_address.city | json}},
        'province'  : {{checkout.billing_address.province | json}},
        'zip'       : {{checkout.billing_address.zip | json}},
        'country'   : {{checkout.billing_address.country | json}},
        'phone'     : {{checkout.billing_address.phone | json}},
    },
    'checkoutEmail' : {{checkout.email | json}},
    'currency'      : {{shop.currency | json}},
    'pageType'      : 'Log State',
    'event'         : 'logState'
}
dataLayer.push(logState);

/**
* DATALAYER: Homepage */

if(document.location.pathname == "/"){
    dataLayer.push({
        'pageType' : 'Homepage',
        'event'    : 'homepage',
        logState
    });
}

/**
* DATALAYER: 404 Pages
* Fire on 404 Pages */

      {% if template contains '404' %}
dataLayer.push({
'event':'404',
'page': window.location.pathname
});

      {% endif %}
/**
* DATALAYER: Blog Articles
* Fire on Blog Article Pages */
{% if template contains 'article' %}
dataLayer.push({
'author'      : {{article.author | json}},
'title'       : {{article.title | json}},
'dateCreated' : {{article.created_at | json}},
'pageType'    : 'Blog',
'event'       : 'blog'
});
{% endif %}
/** DATALAYER: Product List Page (Collections, Category)
* Fire on all product listing pages. */
{% if template contains 'collection' %}
var ecommerce = {
'items': [
{% for product in collection.products %}{
'item_id'        : {{product.id | json}},
'item_variant'    : {{product.selected_variant.title | json}},
'item_name'      : {{product.title | json}},
'price'           : {{product.price | money_without_currency | replace: ',', '.' | json}},
'item_brand'      : {{product.vendor | json}},
'item_category'   : {{product.type | json}},
'item_list_name'  : {{collection.title | json}},
'imageURL'        : "https:{{product.featured_image.src|img_url:'grande'}}",
'productURL'      : '{{shop.secure_url}}{{product.url}}',
'sku'             : {{product.selected_variant.sku | json}},
},
{% endfor %}]
};
dataLayer.push({
'productList' : {{collection.title | json}},
'pageType'    : 'Collection',
'event'       : 'view_item_list',
ecommerce
});
{% endif %}
/** DATALAYER: Product Page
* Fire on all Product View pages. */
{% if template contains 'product' %}
var ecommerce = {
'items': [{
'item_id'        : {{product.id | json}},
'item_variant'    : {{product.selected_variant.title | json}},
'item_name'      : {{product.title | json}},
'price'           : {{product.price | money_without_currency | replace: ',', '.' | json}},
'item_brand'      : {{product.vendor | json}},
'item_category'   : {{product.type | json}},
'item_list_name'  : {{collection.title | json}},
'description'     : {{product.description | strip_newlines | strip_html | json}},
'imageURL'        : 'https:{{product.featured_image.src|img_url:'grande'}}',
'productURL'      : '{{product.url}}'
}]
};
dataLayer.push({
'pageType' : 'Product',
'event'    : 'view_item',
ecommerce
});
$(__DL__.cartTriggers).click(function(){

dataLayer.push({
'event'    : 'add_to_cart',
ecommerce
});
});
  {% endif %}
/** DATALAYER: Cart View
* Fire anytime a user views their cart (non-dynamic) */
{% if template contains 'cart' %}
var ecommerce = {
'currency': {{cart.currency.iso_code | json}},
'value': {{cart.total_price | divided_by: 100.0 | json}},
'items':[{% for line_item in cart.items %}{
'item_id'        : {{line_item.product.id | json}},
'item_variant'    : {{line_item.variant.title | json}},
'item_name'      : {{line_item.product.title | json}},
'price'           : {{line_item.product.price | money_without_currency | replace: ',', '.' | json}},
'item_brand'      : {{line_item.product.vendor | json}},
'item_category'   : {{line_item.product.type | json}},
'item_list_name'  : {{line_item.collection.title | json}},
'quantity'        : {{line_item.quantity | json}},
'discount'   : {{discount.code | json}}
},{% endfor %}],
};
dataLayer.push({
'pageType' : 'Cart',
'event'    : 'view_cart',
ecommerce
});
{% endif %}
/** DATALAYER: Checkout on Shopify Plus **/
if(Shopify.Checkout){
var ecommerce = {
'transaction_id': '{{checkout.order_number  | json}}',
'affiliation': {{shop.name | json}},
'value': {{checkout.total_price | money_without_currency | replace: ',', '.' | json}},
'tax': {{checkout.tax_price | money_without_currency | replace: ',','.' | json}},
'shipping': {{checkout.shipping_price | money_without_currency | replace: ',','.' | json}},
'subtotal': {{checkout.subtotal_price | money_without_currency| replace: ',','.' | json}},
'currency': {{checkout.currency | json}},
{% for discount in checkout.discounts %}
'coupon': {{discount.code | json}},
'discount'  : {{discount.amount | money_without_currency | json}},
{% endfor %}
'email': {{checkout.email | json}},
'items':[{% for line_item in checkout.line_items %}{
'item_id'        : {{line_item.product.id | json}},
'item_variant'    : {{line_item.variant.title | json}},
'item_name'      : {{line_item.product.title | json}},
'price'           : {{line_item.product.price | money_without_currency | replace: ',', '.' | json}},
'item_brand'      : {{line_item.product.vendor | json}},
'item_category'   : {{line_item.product.type | json}},
'item_list_name'  : {{line_item.collection.title | json}},
'quantity'        : {{line_item.quantity | json}},
'discount'   : {{discount.code | json}}
},{% endfor %}],
};
if(Shopify.Checkout.step){
if(Shopify.Checkout.step.length > 0){
if (Shopify.Checkout.step === 'contact_information'){
dataLayer.push({
'event'    :'begin_checkout',
'pageType' :'Customer Information',
'step': 1,
ecommerce
});
}else if (Shopify.Checkout.step === 'shipping_method'){
dataLayer.push({
'event'    :'add_shipping_info',
'pageType' :'Shipping Information',
ecommerce
});
}else if( Shopify.Checkout.step === "payment_method" ){
dataLayer.push({
'event'    :'add_payment_info',
'pageType' :'Add Payment Info',
ecommerce
});
}
}
/** DATALAYER: Transaction */
if(Shopify.Checkout.page == "thank_you"){
dataLayer.push({
'pageType' :'Transaction',
'event'    :'purchase',
transactionData
});
}
}
}
/** DOM Ready **/
$(document).ready(function() {
/** DATALAYER: Search Results */
var searchPage = new RegExp(__DL__.searchPage, "g");
if(document.location.pathname.match(searchPage)){
var ecommerce = {
items :[{% for product in search.results %}{
'item_id'        : {{product.id | json}},
'item_variant'    : {{product.variant.title | json}},
'item_name'      : {{product.title | json}},
'price'           : {{product.price | money_without_currency | replace: ',', '.' | json}},
'item_brand'      : {{product.vendor | json}},
'item_category'   : {{product.type | json}},
'item_list_name'  : {{product.collection.title | json}},
},{% endfor %}],
};
dataLayer.push({
'pageType'   : "Search",
'search_term' : __DL__.searchTermQuery,
'event'      : "search",
'item_list_name'  : {{line_item.collection.title | json}},
ecommerce
});
}
/** DATALAYER: Remove From Cart **/
{% if template contains 'cart' %}
var ecommerce = {
'items':[{% for line_item in cart.items %}{
'item_id'        : {{line_item.product.id | json}},
'item_variant'    : {{line_item.variant.title | json}},
'item_name'      : {{line_item.product.title | json}},
'price'           : {{line_item.product.price | money_without_currency | replace: ',', '.' | json}},
'item_brand'      : {{line_item.product.vendor | json}},
'item_category'   : {{line_item.product.type | json}},
'item_list_name'  : {{line_item.collection.title | json}},
'quantity'        : {{line_item.quantity | json}},
'discount'   : {{discount.code | json}}
},{% endfor %}],
};
$(__DL__.removeCartTrigger).click(function(){
dataLayer.push({
'pageType'   : "Remove from cart",
'event' : 'remove_from_cart',
ecommerce
});
});
{% endif %}
/** Google Tag Manager **/
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-00000');
}); // document ready
}
}, 500);
</script>

{% if first_time_accessed %}
<script>
  var ecommerce = {
      'transaction_id': '{{checkout.order_number  | json}}',
      'affiliation': {{shop.name | json}},
      'value': {{checkout.total_price | money_without_currency | replace: ',', '.' | json}},
      'tax': {{checkout.tax_price | money_without_currency | replace: ',','.' | json}},
      'shipping': {{checkout.shipping_price | money_without_currency | replace: ',','.' | json}},
      'subtotal': {{checkout.subtotal_price | money_without_currency| replace: ',','.' | json}},
      'currency': {{checkout.currency | json}},
       {% for discount in checkout.discounts %}
      'coupon': {{discount.code | json}},
      'discount'  : {{discount.amount | money_without_currency | json}},
       {% endfor %}
      'email': {{checkout.email | json}},
      'items':[{% for line_item in line_items %}{
                        'item_id '        : {{line_item.product.id | json}},
                        'item_variant'    : {{line_item.variant.title | json}},
                        'item_name '      : {{line_item.product.title | json}},
                        'price'           : {{line_item.product.price | money_without_currency | replace: ',', '.' | json}},
                        'item_brand'      : {{line_item.product.vendor | json}},
                        'item_category'   : {{line_item.product.type | json}},
                        'item_list_name'  : {{line_item.collection.title | json}},
                        'quantity'        : {{line_item.quantity | json}},
                        'discount'   : {{discount.code | json}}
                    },{% endfor %}],
  };
      window.dataLayer.push({
        'pageType': 'Purchase',
        'event': 'purchase',
        ecommerce
        });
</script>
{% endif %}

<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>

备注：

如果产品唯一识别号不是Shopify自带的product_id，而是sku。

{{line_item.product.id | json}}可以修改为{{line_item.sku | json}}

{{product.id | json}}可以修改为{{product.selected_or_first_available_variant.sku | json}}

******

dynamicCart: false这个值，如果你的购物车不是跳转的，设置为true