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>
/**************/
// 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);
/**************/
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, be sure to set the type of const w to type "any":
// get window object
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.
Important information about the user id custom variable:
- This variable is required to track individual users accurately
- This is the individual user's unique identifiable trait in your system (this can be a string of digits, a database primary key, an email, a name, etc.)
- It MUST be unique across your ENTIRE system
- If you pass a user's e-mail address as user_id it is mapped to both user_id and user_email
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.