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.

Now in 2025, Shopify's additional script option is not available there, and requiring some apps to do it. What's the other way to enable the data layer and bypass the required apps?

PLEASE NOTE This script is not actively maintained.

It was a functional solution when I originally authored it.

No support or technical guidance is available from the original author.

Please seek guidance for your Shopify analytics needs elsewhere.

(I am no longer watching comments on this gist, so please do not expect me to respond to any inquiry.)