Shopify DataLayer Checkout

shopify.datalayer.html

{% if first_time_accessed %}
<script>
(function(dataLayer){

    var customer_type = ({{customer.orders_count}} > 1) ? 'repeatcustomer' : 'newcustomer';
    var discounts = "{{ order.discounts | map: 'code' | join: ',' | upcase}}";

    function strip(text){
        return text.replace(/\s+/, ' ').replace(/^\s+/, '').replace(/\s+$/, '');
    }

    function firstof(){
        for(var i = 0; i < arguments.length; i++){
            if(arguments[i]) return arguments[i];
        }
        return null;
    }

    var products = [];
    {% for line_item in order.line_items %}
    products.push({
        'id': firstof(strip('{{line_item.sku}}'), strip('{{line_item.product_id}}')),
        'name': strip('{{line_item.product.title}}'),
        'category': strip('{{line_item.product.type}}'),
        'brand': strip('{{line_item.vendor}}'),
        'variant': strip('{{line_item.variant.title}}'),
        'coupon': "{{ line_item.discounts | map : 'code' | join: ',' | upcase}}",
        'price': {{line_item.price | times: 0.01}},
        'quantity': {{line_item.quantity}}
    });
    {% endfor %}

    dataLayer.push({
        'event': 'checkoutComplete',
        'customerType': customer_type,
        'ecommerce': {
            'currencyCode': '{{shop.currency}}',
            'purchase': {
                'actionField': {
                    'id': '{{order.order_number}}',
                    'affiliation': strip('Shopify {{shop.name}}'),
                    'revenue': {{order.total_price | times: 0.01}},
                    'tax': {{order.tax_price | times: 0.01}},
                    'shipping': {{order.shipping_price | times: 0.01}},
                    'coupon': discounts
                },
                'products': products
            }
        }
    });

    setTimeout(function(){
        // Clear the ecommerce data for subsequent hits.
        dataLayer.push({ 'ecommerce': null });
    }, 3);

}(window.dataLayer = window.dataLayer || []));
</script>
{% endif %}


<script>
function containsGTMStart(dl){
    var i = 0;
    dl.map(function(e){ if('gtm.start' in e) i++; });
    return !!i;
}
(function(w,d,s,l,i){
    w[l]=w[l]||[];
    // attempts to prevent GTM from loading twice.
    if(containsGTMStart(w[l])) return false;
    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-XXXXX');
</script>

Hi!

Is there a script that we can add to customer events (pixel)? Becuase we can't add script in the order status page since we are using the checkout extensibility.

@umuthan You can copy & paste the script from my article here: https://www.owntag.eu/blog/shopify-checkout-datalayer/
It's written specifically to work with Checkout Extensibility and follows the GA4-style standard dataLayer so that most tags in Google Tag Manager will work out of the box with it.