A simple guide to explore customer behaviour in your app
Setting up Adobe Analytics & Tealium to understand your users
We, engineers, are continually striving to make our products more usable for users by adding new features. We surely get the feedback from users during planing phase and write features that should be loved. What if we were implementing faster horses and hoping it would function as a sports car. We should find out as fast as possible whether we built some horse sh*t. How do we do it?
We can make use of an analytics tool such as Google or Adobe Analytics. To collect the data, we utilise a tag manager like Tealium or Google Tag Manager. In Axel Springer, we were already using Tealium and Adobe analytics so I continued to build upon them.
I’ll be using Tealium and Adobe Analytics for my implementation. You can instead use Google Tag Manager and Analytics if you are starting out. The details should not vary that much from each other, but if it does, let us know in the comments.
From Theory Into Practice
Having a report that tells you the story of your features requires you to take three steps.
- Create a tag in your tag manager.
- Create a report suite in analytics tool that receives data from tag manager.
- Implement tracking code in your application.
Creating a tag in tag manager
Let’s talk a little bit about what a tag manager is. A tag manager is a tool that allows you to define tags which you can use to analyse your users’ behaviour^5 . In Tealium, you create one container tag and it will contain multiple variables. You use these variables to track different dimensions. One of those dimensions could be whether a user has signed up or clicked on the check-out button.
Go to your tag manager and generate a new container tag. Set up variables for dimensions you want to capture. To make your analytics tool to understand the meaning of your variables, you should map each variable in tag manager to another variable in analytics tool.
What you see in Fig 1 is that three variables (event_name, event_action and event_data) are mapped from Tealium to Adobe Analytics. That means you need to utilise the variable name event_name when you want to use it in your code instead of eVar170, prop47 or linkName.
Create a report suite
To analyse the data effectively, you want to lay it out in a more readable format. That’s where your analytics tool shines. Visualise the dimensions that you collected through the tag in your tag manager.
You should be able to see the variables in your analytics tool (s. Fig 2) and just drag-and-drop them. In case, you are not sure which name corresponds to the which name, then you can always use the original mapping that you used in your tag manager. That will reassure that you use the correct variable and also you’ll know what the name of the variable is for the next time.
Implement tracking
If you have achieved so far as a developer through the jungle of configurations, then the rest is a piece of cake. Tealium gives a small excerpt that downloads the small library utag.js trough which you will transmit the data to the tag manager. You should insert that excerpt in every page that you want to collect data from. In many of our cases, it will be a SPA (single page application) so just put it into your only html file and you’ll be fine.
<script type="text/javascript">
(function(a,b,c,d){
a='https://tags.tiqcdn.com/utag/{0-YOUR-ACCOUNT-NAME}/{1-YOUR-PROFILE-NAME}/{2-YOUR-ENV}/utag.js';
b=document;c='script';
d=b.createElement(c);
d.src=a;d.type='text/java'+c;
d.async=true; a=b.getElementsByTagName(c)[0];
a.parentNode.insertBefore(d,a);
})();
</script>It is recommended you put all variables into one global data object so that you have the overview for what is available to you. That applies especially well if you have a complex data structure, but for the beginning when you have 3–5 variables, you can collect the data which ever method is most suitable to you.
There are two main functions that transmit data from your app to the tag manager in Tealium. These are utag_view and utag_link. See further readings 2 to read in detail what they are, but in short: utag_view transmits data when a page loads and utag_link sends data when an event occurs.
Using utag_link is cleaner if you have an SPA, because you can customise it and decide when to fire an event. Since SPA loads only once, utag_view might cause some confusion^3.
You load the utag library from Tealium with the help of the excerpt and now, you can use it in your code via window object like the following:
const tracking = (event_name: string) => {
window.utag.link({
'event_name': event_name,
'event_action': 'my_event_action',
'event_data': 'my_event_data',
})
}This function, tracking, will send the object you put into window.utag.link to the tag manager for further processing.
Surely, you can reuse that tracking function in any (e.g. click) handler you want. For example, let’s assume that you want to call it in a signup handler. You could do something similar to the following:
const handleSignup = async (): Promise<void> => {
await registerUser(username, email, password);
tracking('signup')
};Omnibug
Now, you have a page that sends three pieces of information when a user sings up. As with any software-related endeavour, we need to debug that tag tracking system. We should know what is sent when signing up and maybe more importantly what is not sent. There is a browser extension called Omnibug^4.
The omnibug will intercept the requests and display it to you in a user friendly manner what each request contains. You can also access the same information by digging into developer tools -> network, but why bother?
The fun part starts after you get the data in your analytics tool. You can set up your dashboards, display user journey and get valuable insights.
Conclusion
That was a quick overview how you can get started to track user behaviour in your app. This process is very similar when you work with AWS. It can be really frustrating from time to time when you start out, but once you get it, then it’s just obvious. I hope that tracking through a tag manager, displaying in your analytics tool and implementing in your app are obvious by now.
