Skip to content

Instantly share code, notes, and snippets.

@samba
Last active April 25, 2024 07:52
Show Gist options
  • Star 15 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save samba/3a6c901fac1459eda80d58388c996d40 to your computer and use it in GitHub Desktop.
Save samba/3a6c901fac1459eda80d58388c996d40 to your computer and use it in GitHub Desktop.
Shopify DataLayer Checkout
{% 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>
@VictorBirdo
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment