With the affordability and availability of e-commerce platforms increasing year on year, the number of online stores increases significantly each month. In 2015, e-commerce had a total share of global retail of approximately 7%, growing to 14% in 2019. The COVID-19 pandemic is set to grow e-commerce’s share substantially in 2020.
Whilst high-speed internet connections and steady growth of retail giants such as Amazon have certainly played a pivotal role in the growth of online sales, the popularity of Shopify and Wordpress platforms coupled with the range of virtual offices & answering services available – has also increased the number of individuals who run their online stores from home. With growing awareness of Alibaba and the functionality of dropshipping accounts, the infrastructure of e-commerce has developed substantially in recent years.
It can prove relatively easy to set up an online store, setting up e-commerce tracking can be significantly more difficult and technical. Despite the development of Google Tag Manager and the data layer, tracking and analytics setup can still prove to be the most technical tasks concerning e-commerce and online marketing.
If you are investing in Google and/or Facebook ads, then installing the relevant tracking code is crucial to calculate your return on ad spend and other crucial metrics.
If you have not yet chosen an e-commerce platform, I would say that e-commerce tracking is a lot easier using Wordpress and the Woocommerce plugins, than setting up everything manually.
Create a Google Account
Before we get started, sign up to Google Analytics and Google Tag Manager.
When you sign up for Google Analytics, you should be given your tracking code. If not, you can find it in the Admin section of the interface, Properties>Tracking Info>Tracking Code.
This code needs to be added to all of the pages on your website. In Wordpress, this can easily be done using a Google Analytics plugin. You will usually just need the ‘UA code’.
Tag Manager is similar. Name your account after your company name, choose your country, and set up the ‘container’. Enter your website name as the container name and choose “Web”. Once you have accepted the terms and conditions, you will be presented with the Tag Manager tracking code. Again you will either need to copy and paste all of this or install a plugin.
Google Analytics eCommerce Tracking with Google Tag Manager
To begin with, we will need to enable “E-commerce” and “Enhanced E-commerce Reporting” in Google Analytics.
To do this, go to the Admin area in Analytics, then click on “E-commerce Settings” and make sure both the blue buttons for “E-Commerce” and “Enhanced E-commerce Reporting” are switched on. Turn them on, then click “Save”.
You will also need to create some kind of coupon-code if you are working on a live site – so that you don’t have to make an actual purchase each time you test the tracking code is working.
Installing the Custom Data Layer in WooCommerce
This is relatively easy if you are using WooCommerce for Wordpress.
Go to the dashboard or WP-Admin area of your Wordpress store. Go to “Plugins” in the left-hand side menu and then click “New” – search for “WooCommerce Google Analytics Integration”. The ratings for this plugin are not very good, but I’m advised that this is because the first 2 versions were full of bugs and the newest version is much better.
Activated the Plugin and go to the WooCommerce>Settings option in the left-hand side menu.
Under settings, click on the “Integration” tab. Add your Google Analytics tracking-ID at the top of this section (this is found in the property settings section, of the admin area in Analytics).
Still in the Integration tab, check/tick every box, except the top one for Standard Tracking. Then click “Save Changes”.
Back in Google Analytics, in the Admin area, and View section, under View Settings you can change the currency if required.
If you do not see the checkboxes under the Integration tab in the WooCommerce settings, it is possibly because you have not integrated Google Analytics with your WooCommerce.
Install a Custom Data Layer Manually
The code for the Custom Data Layer needs to be installed onto the shop system itself. This is so that the data transferred to Analytics get to be updated depending on the order number and the order details such as the price and tax.
On a lot of websites or standard hard-coded website, you will need access to the server to implement the relevant code.
The code will need to go on the order-received pages, or whichever page is presented to a customer after making a purchase.
Example of the code is shown below, it will normally be added below the Google Tag Manager code:
Code Implementation example (Variables in ‘quote marks’ and to the right of the colons : need to be replaced with code that dynamically pulls in product variables on your won website/store):
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
‘event’: ‘transaction’,
‘ecommerce’: {
‘purchase’: {
‘actionField’: {
‘id’: ‘T12345’, // Transaction ID. Required
‘affiliation’: ‘Online Store’,
‘revenue’: ‘35.43’, // Total transaction value (incl. tax and shipping)
‘tax’:’4.90′,
‘shipping’: ‘5.99’,
‘coupon’: ‘SUMMER_SALE’
},
‘products’: [{ // List of productFieldObjects.
‘name’: ‘T-Shirt 2’, // Name or ID is required.
‘id’: ‘12345’,
‘price’: ‘15.25’,
‘brand’: ‘Measureschool’,
‘category’: ‘Shirts’,
‘variant’: ‘Gray’,
‘quantity’: 1,
‘coupon’: ” // Optional fields may be omitted or set to empty string.
},
{
‘name’: ‘T-Shirt 1’,
‘id’: ‘67890’,
‘price’: ‘33.75’,
‘brand’: ‘Measureschool’,
‘category’: ‘Shirts’,
‘variant’: ‘Black’,
‘quantity’: 1
}] //expand this array if more product exists
}
}
});
</script>
Notice: Variables need to be replaced dynamically according to the order data.
Note that the above code is an example code taken from the official Google documentation and will need to be updated and dynamically completed with variables by your website.
https://support.google.com/tagmanager/answer/6107169?hl=en&visit_id=637268637557234802-1168567311&rd=2
please also be aware that the code shown above may not work, as it may need to be reformatted as code by copying and pasting into a notepad.
If you were using WooCommerce without the WooCommerce Google Analytics integration plugin, then you would need to edit the WooCommerce plugin. This is not something to be done unless you are an experienced developer, but it should give a good example of where the code needs to go.
Click “Plugins” in the left-hand side menu and then “Plugin Editor” (again – not something to do unless you are a developer!)
Choose the WooCommerce plugin from the drop-down menu and the top right of the interface. In the “Plugin Files” section on the right, go to “Templates” and “Checkout” and then “thankyou.php”
By editing “thankyou.php” we are editing the template for the ‘order-received’ or thank you page that is presented to a customer straight after making a purchase.
You will need to find the equivalent page/file on your website.
Next, in the page’s code, copy the implementation code and paste at the bottom of the code, before the closing </script> tag.
Now – instead of the example variables, we will need to add code to pull in the correct variables. This is, unfortunately, specific to almost every website and e-commerce platform.
In WooCommerce this can be achieved using the echo function. For the id for example:
‘id’ : <?php echo $order->get_order_number(); ?>’,
You can now check this is working properly, by using the Preview mode in Google Tag Manager and clicking on the Data Layer tab.
Here you should check that the variables are updating dynamically and correctly according to the product in the shopping cart.
Setup Google Tag Manager Tags
First, we need to create a “Custom Trigger” for each e-commerce transaction.
In Tag Manager – go to Triggers, create a new trigger, make it a custom event and name the custom event “transaction” or similar.
Leave it on “All Custom Events” and save.
Now create a tag that sends the transaction data over Google Analytics. Go to Triggers and “New”. Name the trigger something relevant such as “G.A. – Transactions”. Choose the Track Type in the drop-down menu as “Event”, name Category something such as “Ecommerce Tracking”. Non-Interaction Hit – change this to “True” and pate in your Google Analytics ID or choose the Google Analytics variable in the “Google Analytics Settings” options.
Check/tick “Enable overriding settings in this tag” and under “More Settings” and “E-commerce” change “Enable Enhanced Ecommerce Settings” to “True” and tick the box next to “Data Layer”.
Add the trigger by clicking on the ‘grey circle’ in the bottom section and choose the trigger that you created in the previous step.
