Adding Klevu Recommendations to your Google Analytics tracking is quite straightforward, but can vary from one integration to another depending on your own Google Analytics configuration, plus the provider and method you have used for the integration.
You will already be familiar with the following image from your own eCommerce tracking in Google Analytics. With the instructions on this page, you can configure the same for Klevu Recommendation banners.
Prerequisites
- You already have Google Analytics tracking configured.
- Your Google Analytics integration includes “Enhanced Ecommerce”.
- Your Google Analytics is configured using Google Tag Manager and dataLayer.
- Your enhanced ecommerce integration is already trackingthe following events:
- Add to Cart
- Checkout
- Purchase
If one or more of the above prerequisites do not apply to you, it is still possible to integrate Klevu Recommendations in to your Google Analytics account, but you will need to discuss with your internal team how to adapt these instructions to fit your purpose and fill in any gaps.
Adding Klevu Recommendations
We will be building on top of your existing Google Analytics integration by adding two new events:
- Klevu Recommendation Banner View NEW
- Klevu Recommendation Product Click NEW
- Add to Cart PRE-EXISTING
- Checkout PRE-EXISTING
- Purchase PRE-EXISTING
This will allow you to see details of Klevu Recommendation views, clicks and conversions right within your own Google Analytics dashboard, alongside your existing campaigns.
JavaScript Modifications
First we will need to make some JavaScript changes to your website theme. The code references included below should be added immediately below your Klevu Initialisation script, which looks something like this:
<script type="text/javascript">
klevu.interactive(function () {
...
});
// Add new event code here!
</script>
To track banner views and clicks, a snippet of JavaScript is needed to send some data to Google Analytics at the appropriate times.
You can find the appropriate code to add in the snippet below. We have tried to make this code as generic as possible, but you may need to tweak aspects of it for your implementation, so we have added inline comments for what each section is doing. Click here for the Klevu Recommendation Google Analytics code.
Google Tag Manager Configuration
You also need to configure some new variables, tags and triggers within Google Tag Manager, to associate to the above JavaScript events, so you can see the customer interactions in Google Analytics.
Variables
- Go to Variables → User-Defined Variables → New.
- Create three new variables with the following names:
- "GA Tracking ID".
- In the Variable Configuration select Google Analytics Settings.
- Enter the Tracking ID “UA-XXXXXXXX-XX” (your own Google Analytics ID).
- "DLV - Product List (Click)"
- In the Variable Configuration select Data Layer Variable.
- Enter the Data Layer Variable Name “ecommerce.click.actionField.list“.
- “DLV - Product List (Impression)”
- In the Variable Configuration select Data Layer Variable.
- Enter the Data Layer Variable Name “ecommerce.impression.list“.
- "GA Tracking ID".
Triggers
- Go to Triggers → New.
- Create two new triggers with the following names:
- "klevuProductListClick"
- In the Trigger Configuration select Custom Event.
- Enter the Event Name “klevuProductListClick”.
- “klevuProductListImpression”
- In the Trigger Configuration select Custom Event.
- Enter the Event Name “klevuProductListImpression”.
Tags
- Go to Tags → New.
- Create two new tags with the following names:
- "Klevu Recommendations - Click"
- In Tag Configuration select Tag Type: Google Analytics: Universal Analytics
- Select Track Type: Event, then enter the following values:
- Category: “EnhancedEcommerce”
- Action: “Clicked Product List”
- Label: “List: {{DLV - Product List (Click)}}“
- Non-Interaction Hit: False.
- In the Google Analytics Settings dropdown, select “{{GA Tracking ID}}”.
- Check the Enable overriding settings in this tag checkbox.
- Open More Settings → Ecommerce.
- Set the Enable Enhanced Ecommerce Features to True.
- Tick the Use Data Layer checkbox.
- Next Click on Triggering and select “klevuProductListClick”.
- Select Track Type: Event, then enter the following values:
- In Tag Configuration select Tag Type: Google Analytics: Universal Analytics
- “Klevu Recommendations - Impression”
- In Tag Configuration select Tag Type: Google Analytics: Universal Analytics
- Select Track Type: Event, then enter the following values:
- Category: “EnhancedEcommerce”
- Action: “Viewed Product List”
- Label: “List: {{DLV - Product List (Impression)}}“
- Non-Interaction Hit: True.
- In the Google Analytics Settings dropdown, select “{{GA Tracking ID}}”.
- Check the Enable overriding settings in this tag checkbox.
- Open More Settings → Ecommerce.
- Set the Enable Enhanced Ecommerce Features to True.
- Tick the Use Data Layer checkbox.
- Next Click on Triggering and select “klevuProductListImpression”.
Publish / Submit Changes
After all of the above has been completed and saved, you must submit the changes so they will take effect on your storefront. You can do this by clicking the blue Submit button in the top right of the screen.
Configurable Products
If your store uses configurable products, ie. parent products with one or more configurations or variants like colour or size, you will need to check your existing Google Analytics integration to see which data you are currently sending as the unique identifier of each product.
Some merchants send the variant level ID or SKU, eg.ABC-Red or ABC-Green, whereas other merchants use the same parent level SKU no matter which variant has been purchased, eg.ABC.
It is important that the tracking identifier used for Klevu Recommendations Google Analytics data exactly matches the identifier you are using in your existing Google Analytics implementation, otherwise the flow of data through the system will not match up and you will not see any conversions happening.
Adding a Different Variant to the Cart
There is one additional scenario which we recommend you cater for in order to get the most accurate tracking of Klevu Recommendations. Please consider the following customer scenario:
- Customer views a Klevu Recommendation banner
- Customer clicks on a Red Shirt.
- Customer views the product and tries a few different colours.
- Customer adds the Green Shirt to the cart.
- Customer purchases the Green Shirt.
If your tracking is at the variant SKU level, it would seem like a customer viewed a Red Shirt and then purchased a completely different product, the Green Shirt. However, they are actually from the same parent product and the transaction should usually be attributed to a recommendation-lead conversion.
In this scenario, when the customer adds the product to the cart we recommend you include two additional event calls:
- A new Klevu Recommendation Banner View, including only the SKU that was added to the cart.
- A new Klevu Recommendation Product Click, with the SKU that was added to the cart.
With these two additional events, even if your customers end up purchasing different colours or sizes of your products, you can still benefit from the recommendation tracking in your Google Analytics data.
It is important that you only fire this additional event tracking when the customer has just clicked on a recommendation banner containing the same product, so you will need some logic to determine this, either via a URL param or some local storage. If you omit this logic, it will appear as though every transaction is Klevu Recommendation lead, which will skew your analytics data.
We have included a sample implementation of this in another code snippet, which you can find below. We have also included some platform-specific instructions at the end to guide you in your own implementation. Click here for examples of how to handle this scenario.
Viewing Klevu Recommendations in GA
Once all of the above steps are completed and you have some interactions with Klevu Recommendations on your website, log into Google Analytics and go to Conversions → Ecommerce → Product List Performance to see how each banner is performing.