This article walks you through how to:
- add the in-app tracking code to your app;
- associate users of your app with contacts in Autopilot; and
- display in-app messages to your users.
You must complete steps one and two in order display Headsup messages inside your app.
1. Add the in-app tracking code
Go to Settings, then under Tracking Code click For Apps:
Paste the code into the <head> tag of your app’s HTML.
This app-specific version of the tracking code makes two changes to the way the web page tracking code works:
- it allows tracking of visits due to URL changes within the same page (that is changes to the hash segment of a URL, or changes via history.pushState.); and
- it will prevent an additional jQuery library being loaded on your page. This is based on the assumption that your app already includes the jQuery library. Note that for form tracking and Headsup messages to work properly in app mode, you'll need to add jQuery to your pages.
The tracking code is fully asynchronous. This guarantees it will never to get in the way of other parts of your app loading.
2. Implement user association
In your HTML, after the Autopilot tracking code script, associate your app user with an Autopilot contact by doing the following:
Note that if a user logs into your app who isn’t yet in Autopilot as a contact, we’ll automatically add them as a new contact.
You can also provide further contact details, in addition to the user’s email address, for example:
} }); </script>
Note that "Logged In" is a custom field in the above example. Please remember to add the custom field in Autopilot here.
Please note that:
- email address is required, as we use it as a unique identifier for contacts in Autopilot.
- if you want to update an existing contact, run a new associate with the updated details or use the API method here.
You can also add a special key, _simpleAssociate:true that will prevent updates occurring for already associated sessions. You may be asked to use this approach by our support team in cases where you are calling associate frequently, such as on every page load. For example:
Email: "firstname.lastname@example.org" }); </script>
3. Create your Headsup messages to be displayed inside your app
Once you've completed the above steps, you can now show Headsup messages inside your app by following the instructions here. Learn how Hint Health uses Headsup to create a killer user on-boarding experience here.