Install Instructions for UserIQ Tracking Snippet
This article will guide you through the process of installing the UserIQ tracking snippet on your single page application.
To properly track in a single page environment, we must split the tracking code into two parts. The first part should be added to the body of your application (typically in an index.html file) in the proper environment (typically we recommend starting in a QA or test environment). Place it just before the closing body tag (</body>). This initializes the UserIQ tracking snippet to be available everywhere throughout your application.
Step 1
** Replace the red text with the site id provided from UserIQ.
<script type="text/javascript">
(function(){
/**************/
// UserIQ helper logic
var useriq = (window._uiq = window._uiq || [])
useriq.invoked &&
window.console &&
console.error &&
console.error('Useriq snippet already exists.'),
(useriq.invoked = !0),
(useriq.methods = [
'setSiteId',
'startTracker',
'setDoNotTrack',
'identify',
'track',
'group'
]),
(useriq.factory = function(e) {
return function() {
var r = Array.prototype.slice.call(arguments)
return r.unshift(e), useriq.push(r), useriq
}
})
for (var i = 0; i < useriq.methods.length; i++) {
var key = useriq.methods[i]
useriq[key] = useriq.factory(key)
}
/**************/
// All red highlights indicate the areas in the UserIQ script
// that should contain your own variables
// site id is provided by UserIQ
var useriqSiteId = "INSERT SITE ID PROVIDED FROM USERIQ HERE"
// set site id
useriq.setSiteId(useriqSiteId)
/**************/
// UserIQ helper logic
var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
g.defer=true; g.async=true; g.src="https://feed.useriq.com/useriq.js"; s.parentNode.insertBefore(g,s);
/**************/
})();
</script>
*If you are in the EU, replace the last few lines of UserIQ "helper logic" above with these lines instead. Thats it!
/**************/
// UserIQ helper logic
var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
g.defer=true; g.async=true; g.src="https://feed.useriq.com/useriq-eu.js"; s.parentNode.insertBefore(g,s);
/**************/
The second part of the tracking snippet will be placed somewhere inside of your single page application framework.
You’ll notice that there are no user identification variables being passed in the code above. That’s because we’re going to pass those variables once your application has identified the current user's information. Once you find the specific place in your application that initializes your current user, you can use these examples below to better understand how to start tracking them with the UserIQ tracking snippet within your own application.
Step 2 (Angular Example)
** Replace the red text with the corresponding variables in your system.
// All red highlights indicate the areas in the UserIQ script
// that should contain your own variables
UserService.get().$promise.then(function(currentUser) {
// get window object
const w = window
// identify user
w._uiq.push(['identify', currentUser.id, {
user_name: currentUser.name,
account_id: currentUser.accountId,
account_name: currentUser.accountName,
user_email: currentUser.email,
signup_date: currentUser.signupDate //(YYYY-MM-DD)
}]);
// start tracker
w._uiq.push([‘startTracker’]);
});
Step 2 (React Example)
** Replace the red text with the corresponding variables in your system.
// All red highlights indicate the areas in the UserIQ script
// that should contain your own variables
export const getCurrentUser = () => {
// get current user information
const currentUser = await Axios.get<any>('/users/current_user.json')
// get window object
const w = window
// identify user
w._uiq.push(['identify', currentUser.id, {
user_name: currentUser.name,
account_id: currentUser.accountId,
account_name: currentUser.accountName,
user_email: currentUser.email,
signup_date: currentUser.signupDate //(YYYY-MM-DD)
}])
// start tracker
w._uiq.push(['startTracker'])
}
** If using typescript include the any value to the windows object.
Example: const w: any = windows
You can make this call anywhere in your application and it will establish the user as identified.
Once the code is called, UserIQ is able to recognize when an single page view has changed and will send tracking data automatically. In other words, UserIQ doesn’t need a page refresh to track user behavior.
How do I configure additional custom variables?
To pass additional custom variables, simply add an additional key: value pair inside the UserIQ "identify" call within your existing UserIQ tracking snippet. See examples below for multi page and single page applications.
*Note: don't forget to put a comma after the last current custom variable before adding your new custom variable!
// identify user
w._uiq.push(['identify', currentUser.id, {
user_name: currentUser.name,
account_id: currentUser.accountId,
account_name: currentUser.accountName,
user_email: currentUser.email,
signup_date: currentUser.signupDate, //(YYYY-MM-DD)
// add additional custom variables here like so:
user_role: currentUser.role
}]);
Comments
0 comments
Article is closed for comments.