User.com on Single Page Application
Learn how to properly implement User.com on SPA
Remember! This guide is to be treated as an addition to a standard integration process.
Single Page Applications work differently than standard websites and therefore you need to take different approach while integrating User.com.
As on Single Page the page does not reload at any point in the process, you need to have a way to send Page Views while user navigates through your website and update User information upon Log in/Log out and Registration. Here are the two of possible ways:
Google Tag Manager with User.com JavaScript methods - it will allow you to integrate User.com with minimal help of your Developers.
Modyfing source code using JavaScript methods - here the best approach would be passing this article directly to your Development Team.
Google Tag Manager
Remember! JavaScript methods refer to global window object UE therefore you always have to load Basic Script before using any of JavaScript methods mentioned below. Here is the guide for Basic Script implementation which can be done in GTM as well.
First, please do this check on your Website:
When you navigate from page A to page B, does the URL change in your browser?
If the answer is Yes, continue reading
If the answer is No, skip to the section below
Making GTM acknowledge the change of the URL.
Useful links: GTM integration and JavaScript methods
Open your GTM Container and go to Variables
Click Configure and select all positions under History section
Close the slide-in window and go to Triggers
Click on New and enter trigger configuration
Here click on History Change and configure it as shown on the picture below and Save
Now everytime URL changes, the history event will be fired and can be used as a new Trigger to send data to User.com for example.
Open the preview mode, go to your Website and once loaded navigate to another part of the Website, for example About Us. If you see History event in the Debug window then all is set!
Now go back to GTM and create new Custom HTML Tag. The goal is to send a Page View whenever User navigates to another subpage. We will use UE.pageHit for that.
Code of the UE.pageHit should look somewhat like this:
<script>
UE.pageHit({
apiKey: "a13Kgi",
});
</script>
Correct apiKey can be found in your application, go to Settings -> Setup & Integrations. Finished tag will look similar to this:
Now refresh the GTM, refresh your website and try navigating through your website. Then check if you see correct Page Views in the user timeline. If yes, congratulations, this part is done!
Implementing UE.pageHit to update users profile on Log in or Register
Useful links: GTM Integration, JavaScript methods and GTM dataLayer
The goal here is to correctly update user tracked as anonymous in User.com app when he/she logs in or registers.
You need to think about unique happening when your user successfuly logs in or registers, for example url has signup#success at the end or you send a custom event to GTM? Here is the article covering that matter.
You need to create a new Custom HTML tag containing UE.pageHit but now populated with all the user information that you gather during the log in/registration process.
The trigger you should use is either your custom event or, again, history change. If you've chosen the latter, create a new trigger of type History Change and make it fire only in specific case, for example if the new URL contains signup#success
Now everytime someone logs in or registers, anonymous user in User.com will get updated with correct data. Please test it using GTM Preview mode and if everything updates correctly, congratulations again!
Developer help
Remember! JavaScript methods refer to global window object UE therefore you always have to load Basic Script before using any of JavaScript methods mentioned below. Here is the guide for Basic Script implementation which can be done in GTM as well.
This part will be useful if your Single Page does not change URLs at all or it does it in a way that will not be useful to send to User.com.
Here is a list of resources for the Developer:
You are not tied to use GTM the integration on Single Page App, but JavaScript approach is a must and will prove really handy when integrating User.com.
Sending correct amount of Page Views
Our script send data and page views on a page load, since SPA loads only once, upon initial visit, you will lose all of the page views when visitors navigate from page A to page B.
To overcome this, send UE.pageHit on every route change, it will pass new URL to the User.com
Updating anonymous user upon Log in/Register
In a similar fashion, when your user logs in or registers, the profile in User.com will not be created until the page reloads.
To overcome this, send UE.pageHit populated with all of the users data on log in and register, this way new user will automatically update anonymous one
Additional tips
Remember that JavaScript methods always refer to global UE object so you should never allow UE.pageHit to be sent before loading User.com standard script
Good practice is sending populated script or UE.pageHit only when user Logs in or Registers and update page views with basic UE.pageHit afterwards(containing only apiKey)