Shopify

Tag Manager

Add Tag Manager to theme: Modify Theme

"online store" -> "..." or "Actions" -> "edit HTML / CSS"

Modify theme.liquid

Google Tag Manager will also need to be added to Checkout's additional settings to track conversions

Conversion Tracking Code

Google Tag Manager will also need to be added to Checkout's additional settings to track conversions

In "settings" -> "checkout" -> "additional settings"

{% if first_time_accessed %}
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});
</script>
{% endif %}

• Note: if testing without "{% if first_time_accessed %}" on a order that has already converted, the order ID will not show

to add product ids add within the code above:

dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });

• Note: This was made for dynamic re-marketing, for analytics 4 go to the section below

Product Feed

The below App is free to use & should do most of the setup for you:
https://apps.shopify.com/google

After installing the App a Google account with access to the Merchant Centre needs to sign in.
DO NOT sign in using one of our Master email addresses, instead you can either:

- Ask the client to do this, if they don't have access to Merchant Center we can try to add them.
- Create a new email address that only has access to this Merchant Center & sign in with this instead.

Then the below needs to be done, in this order otherwise it won't send the products through & you'll have to start from scratch:

- Make sure the Store requirements are met & confirm these, if they aren't then send this back to the client so they can add whats necessary.
- Under Product Feed, start the setup process.
- Connect the Merchant Centre on the settings tab.
- Specify the Target Market & set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).

If this has been done correctly then the products should now be available within the Merchant Center account.

Alternatively, Shopify does provide you with the Product feed URL for your store.
To access this, you will need to append .atom to either all of your collections or to a specific collection URL.

For example:

"yourstorename.com/collections/all.atom"
"yourstorename.com/collections/collectionname.atom"

Events for Analytics 4

View Item:
Add this to product-template.liquid

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: "view_item",
    ecommerce: {
      currency: "GBP",
      items: [
        {
          item_id: {{ product.id }},
          item_name: "{{ product.title }}",
         {% if product.vendor %} item_brand: "{{ product.vendor }}", {% endif %}
          price: {{ product.price | money_without_currency }},
         {% if product.type %} item_category: "{{ product.type }}", {% endif %}
          google_business_vertical: "retail",
          id: "{{ product.id }}"
        }
      ]
    },
  });
</script>

Add To Cart:
The below listener can be added to GTM, this should send add_to_cart events to GTM for you.

<script>
jQuery(document).ready(function() {
	jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {
		if (~settings.url.indexOf("/cart/add")) {          
          
          var items = [];
          items.push({
            item_id: data.product_id,
            item_name: data.title,
            item_category: data.product_type,
            price: ( data.price / 100 ),
            google_business_vertical: "retail",
            id: data.product_id
          });
          
          if (typeof data.brand != "undefined") items[0]['item_brand'] = data.brand;
          
          var dataLayer = window.dataLayer || [];
          dataLayer.push({
            event: 'add_to_cart',
            ecommerce: {
              currency: "GBP", 
              items: items
            }
          });
        }
    });
});
</script>

Purchases:
Add this to the Settings > Checkout > Additional Scripts section.

{% if first_time_accessed %}
<script>
	var items = [];
	var temp = {};

	{% for line_item in line_items %}
		temp = {
		            item_id: {{ line_item.product.id }},
		            item_name: "{{ line_item.title }}",
		            price: {{ line_item.final_line_price | money_without_currency }},
		            google_business_vertical: "retail",
		            id: {{ line_item.product.id }},
                            quantity: {{ line_item.quantity }}

		};

		{% if line_item.product.type %} 
			temp['item_category'] = "{{ line_item.product.type }}";
		{% endif %}

		{% if line_item.product.vendor %} 
			temp['item_brand'] = "{{ line_item.product.vendor }}";
		{% endif %}

		items.push(temp);
		
	{% endfor %}

	var dataLayer = window.dataLayer || [];
  dataLayer.push({
  	event: 'purchase',
    ecommerce: {
    	affiliation: 'Online Store',
    	transaction_id: '{{ order_number }}',
    	value: '{{ total_price | money_without_currency }}',
    	tax: '{{ tax_price | money_without_currency }}',
    	shipping: '{{ shipping_price | money_without_currency}}',
    	currency: "GBP", 
      items: items
    }
	});


</script>
{% endif %}

The Event Tag & Variables can be setup with the below template:
File:Shopify-ga4-container-elements.json

Shopify Links

Cheat sheet for Variables:
https://www.shopify.co.uk/partners/shopify-cheat-sheet