User.com + Enhanced Ecommerce GTM integration
Learn how to connect your enhanced eCommerce enabled website events to User.com
What is Enhanced E-commerce, and why use it?
Google Analytics Enhanced E-commerce is a popular standard for tracking E-commerce events.
The basic idea is that if more websites used the same tracking standard, the entire industry could create reusable reports and people would understand analytics across different companies.
From your perspective, this is also quite beneficial because you don't have to think about all the events that you need. Someone has thought about all of that, and has prepared ready-to-use documentation for your developer to implement.
That's why we've created a reusable GTM container that will enable you to connect User.com with your Enhanced E-commerce website.
At the bottom of this article, we provide a list of Ecommerce Plugins for most well-known Ecommerce Platforms.
How to use it
In this tutorial, we will walk through the entire process of implementing our reusable GTM container.
1. Get Enhanced E-commerce implemented
If your website doesn't yet have Enhanced E-commerce implemented, send this document to your developer. It lays out everything they need to know to implement it. Bear in mind that the strongly suggested event names include:
- Ask your developer to create a dataLayer variable ue.userID that will include the user ID of the website user. They can learn more about dataLayer here.
- Ask your developer to create a dataLayer variable ue.email that will include the login email address.
- If you haven't already, make sure to implement Google Tag Manager. It's a simple tool that you'll use in the next steps.
If you already have all of this on your website, you're ready to go.
2. Import our GTM container
- Download this file containing the integration GTM container.
- Go to your GTM -> Admin -> Import
- Select "Existing" as the destination of the file and choose the option, Merge, below.
- Click "Choose container file" and select the newly downloaded container file.
- Confirm the operation.
3. Edit the implementation code
- Go to your app and check the API key. Settings > Setup and integrations - There you'll see your API key.
- Go to the tab, Tags, in GTM.
- Open the tab UE - Implementation.
- Paste the app key in the API key field of the tag.
- Save the tag and click the button "PREVIEW" in the top right corner of the screen.
- Open your website and check two things: does the bar at the bottom of the screen appear, and does the User.com widget appear on the page.
- If the bar at the bottom of the page does not appear, make sure that the GTM is correctly connected to your website.
- If the bar at the bottom of the page does appear, but the User.com chat widget is not visible on your page, double-check that the app code is correctly implemented in the tag.
4. Check the event names
To demonstrate the implementation, our example website is saturn.de: the website of a large German electronics shop. (We'll use the Analytics Pros plugin to simulate the implementation.)
If your developer respected the naming standard proposed in Step1, you won't need to perform this step of the process at all.
If you already have Enhanced E-commerce implemented: You will have to check the name of every event that you want to use. Here's how:
- Go to your website (with GTM preview mode still on).
- Try to generate events that you want to track; for example, we'll open a product to trigger the detail event.
- Check the log of events on the left side of the GTM preview tab.
- As you can see the event "EECproductDetailView". Click on it and go to Data Layer. If we see "ecommerce" attribute inside, it means it's the enhanced ecommerce event.
- This is how we found out that the detail view event is called "EECproductDetailView". We can go back to Tag manager and change Triggers from "detail" to "EECproductDetailView".
- Now, save, refresh the container, and check inside the website if GTM is sending the event.
- As you can see, UE - event - detail appears on the list, Tags Fired On This Page, which means it has been sent to UE.
- Now let's check UE user.
- As you can see, the event has been correctly imported to User.com. Don't worry if, in your case, there are fewer attributes in the event; Saturn.de simply added those as additional dimensions.
- Now, perform the same process for all the remaining events such as "add" or "checkout", until User.com catches them all.
5. Submit the container
After checking that all the events are being correctly imported to User.com, submit the GTM container by clicking the button, SUBMIT, in the top right corner of the screen.
Limitations of the integration
- Lack of Product Impression support: you can add this function yourself, but we've decided that it would create too much of a mess inside User.com with little value in return.
- User.com keeps a little bit different structure of product events, such as "purchase" or "checkout", so instead of having one purchase event with all the purchased products, we will generate as many events for a single item as you have purchased at once. The checkout event works similarly.
- Problem: User logs-in, but their email address is not included in the user profile.
- Solution: Your developer didn't set up the email collecting stage of the development; they need to provide you with a Data Layer Value, and you have to make sure it's the same as the Data Layer Variable in GTM.
- Problem: Users from different browsers logged in to the same account and did not merge.
- Solution: Ask your developer to handle userIDs as described in Step 1.
- Problem: Some push events do not appear in the preview bar.
- Solution: Some events such as "productClick" may not be visible because your page reloads and deletes the event log. In such cases, open the console and click "preserve logs" to see past events. If you still can't see them, ask your developer if they have been implemented.