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 @chr1s1

You've got some good code here. I read your instructions above regarding where to add the code.
Unfortunately, the Order Processing -> Additional Scripts input textarea is gone.

There are now two "Additional Scripts" areas.
One is under Post-purchase page section.
The second is under Order status page section.

With checkout extensibility, the entire checkout process is sandboxed. You're only able to push customer events data once you've completed your checkout and arrive at the order status page.

Your script would be added to the Order status page section > Additional Scripts.
Correct?

Hi @chr1s1

Instead of CustomerType: NewCustomer

Is it possible to use a boolean:

New customer: false

Depending on the {{customer.orders_count}} ?

As in: if {{customer.orders_count}} is greater than 0, newcustomer: false
if {{customer.orders_count}} equals 0, newcustomer: true

Has Anyone tried this?

Thank you very much and kind regards

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.