Quick-Start Guide: Install Instructions for Tracking Snippet
This article will guide you through the process of installing UserIQ Tracking Snippet on your app. It also features a few FAQ's that you may find useful.
How do I install the UIQ Tracking Snippet?
To start tracking, simply add the JavaScript snippet below to the footer of your application in the QA or test environment and fill in the variables* that are highlighted in green.
*Please note that you should replace the text highlighted in green with variable names and not actual values. For example, consider all user id's in your app are stored in the variable named 'uid', then you replace (var user_id = 'INSERT_YOUR_APP_USER_ID_HERE') with (var user_id = uid) and not (var user_id = 1234)
Place it just before the </body> tag. Hopefully, you'll only need to add this to one file since it is the same on each page of your application.
UserIQ Tracking Snippet
<script type="text/javascript">
(function(){
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)}
// We have dynamically assigned your useriq_site_id
var useriq_site_id = "INSERT_SITE_ID_HERE"
//You will be provided with a SiteID once you register for a trial
//All green highlights indicate the areas in the UserIQ script that should contain your own variables
// user id is required
var user_id = 'INSERT_YOUR_APP_USER_ID_HERE'
// account id is required for account analytics
var account_id = 'INSERT_YOUR_APP_ACCOUNT_ID_HERE'
useriq.setSiteId(useriq_site_id)
useriq.identify(user_id, {
user_name: 'INSERT_USER_NAME_HERE',
account_id: account_id,
account_name: 'INSERT_ACCOUNT_NAME_HERE',
user_email: 'INSERT_USER_EMAIL_HERE',
signup_date: 'INSERT_USER_SIGNUP_DATE_HERE_YYYY-MM-DD',
})
useriq.startTracker()
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>
What does a correct Tracking Snippet look like?
<script type="text/javascript">
(function(){
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)}
// We have dynamically assigned your useriq_site_id
var useriq_site_id = "12345678"
//You will be provided with a SiteID once you register for a trial
//All green highlights indicate the areas in the UserIQ script that should contain your own variables
// user id is required
var user_id = uid
// account id is required for account analytics
var account_id = accId
useriq.setSiteId(useriq_site_id)
useriq.identify(user_id, {
user_name: uname,
account_id: account_id,
account_name: accName,
user_email: emailID,
signup_date: signupDate,
})
useriq.startTracker()
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>
What does an incorrect Tracking Snippet look like?
<script type="text/javascript">
(function(){
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)}
// We have dynamically assigned your useriq_site_id
var useriq_site_id = "12345678"
//You will be provided with a SiteID once you register for a trial
//All green highlights indicate the areas in the UserIQ script that should contain your own variables
// user id is required
var user_id = '12345'
// account id is required for account analytics
var account_id = '123'
useriq.setSiteId(useriq_site_id)
useriq.identify(user_id, {
user_name: 'John Doe',
account_id: account_id,
account_name: 'UserIQ Inc.',
user_email: 'johndoe@useriq.com',
signup_date: '2018-01-01',
})
useriq.startTracker()
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>
Why and how do I install Tracking Snippet for a Single-Page Application?
Why: To properly split the tracking snippet between a static footer and dynamic variables in a single page application (using Angular, for example).
How: You will use the following tracking snippet in your footer (this can be a static JS resource):
<script type="text/javascript">
(function(){
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)
}
var useriq_site_id = ""
//You will be provided with a SiteID once you register for a trial
useriq.setSiteId(useriq_site_id)
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>
And you will set the variables in Angular.
You’ll notice that there are no user identification variables being passed in the snippet above. That’s because we’re going to pass those variables from Angular once the user is logged in.
Here is a working example of a user authentication service that sets the user variables as soon as the user is logged in:
What is Dynamic Angular Code and why is it used?
UserService.get().$promise.then(function(current_user_data) {
$scope.current_user = current_user_data;
_uiq.push(['identify',$scope.current_user.email,{ user_name: $scope.current_user.name, account_id: $scope.current_user.customer_id, account_name: $scope.current_user.account_name, user_email: $scope.current_user.email
}]);
_uiq.push([‘startTracker’]);
});
You can make this call anywhere in your application and it will establish the user as identified.
Why: Installing this Dynamic Angular code snippet allows UserIQ to track user behavior without page refresh.
How: Once this code is called, UserIQ recognizes when an Angular view has changed and will send tracking data automatically.
What are Taboo Values?
Taboo values are essentially dummy values that are being passed into UIQ for tracking purposes and this excludes any personal data like email, username, etc. For example, if you would not want us to know the username of the users that are associated with the account, you can pass in values like <useriq-unknown> in your <user_name> custom variable which will essentially hide the username from our view.
If you need to pass a dummy value as you do not want to know the user’s information, we will automatically parse the following strings into nothing on our end.
['useriq-unknown','insert_user_id','insert_user_name','user_name','account_id','account_name','guest','not logged in','insert_account_id','insert_account_name','Anonymous','null','user_id','nil','none','empty','visitor','unknown','INSERT_YOUR_APP_USER_ID_HERE','INSERT_YOUR_APP_ACCOUNT_ID_HERE','INSERT_USER_NAME_HERE','INSERT_ACCOUNT_NAME_HERE','INSERT_USER_EMAIL_HERE','INSERT_USER_SIGNUP_DATE_HERE_YYYY-MM-DD']
What do we use these values for in UserIQ?
- User ID is a required value for UserIQ as it is the cornerstone for most of our analytics.
- Username is simply used for display purposes
- Account Id is used for associating users to accounts as well as accounts to organizations. This is a critical variable for anyone wanting to leverage account segmentation
- Account name is simply used for display purposes
- Signup date is used for a number of pre-populated segments and is required to be formatted as “YYYY-MM-DD”
- Email is used for a number of different segmentation options and to use the email campaign feature without importing lists.
Does it matter what type of value is passed to UserIQ?
Nope, we will cast all values to a String before sending it to our API which then converts them into proper formats depending on type.
What if I want to exclude a page from tracking?
This frequent request can be handled in a few ways. One way is to use the current method used by UserIQ and a few others when a login page does not need to be tracked:
if(/sign_in/.test(window.location.pathname)){
useriq.setDoNotTrack(true)
}
The above line of JavaScript can be included inside your snippet at any point in time but you will need to change the bolded “sign_in” part to match your specific use case.
What if my login is on a page I do want to track?
You're in luck! We have recently restructured our tracker to allow for users to initialize it once they know their data has returned. Here is a brief example:
UserService.get({user_id: id}).then(function(user_data) {
// set user data
_uiq.push(["identify", user_data.user_id, {user_name: user_data.name, account_name: user_data.account_name}]);
// user data has been set
_uiq.push(["startTracker"])
})

How do I view Tracking Snippet information once it is installed?
Once the tracking snippet is installed properly and you are able to see the UIQ bubble on your app, you can have a look at it after logging in to UIQ App as well by visiting the following url: https://app.useriq.com/#!/tracking.

You can also look here for additional information on the tracking snippet.
Comments
0 comments
Article is closed for comments.