If you use Google Tag Manager, you can set up Nickelled Interactive Guides without making any changes to your site.
Here's how to do it:
1) Head to your Nickelled account at https://app.nickelled.com/
2) Click 'Settings' to open your account settings:
3) Click 'Sites' to open your sites:
4) Open the site you want to install your Flows on. Then, click 'View code snippet' to get your javascript snippet:
5) Head over and add a new tag in Google Tag Manager.
6) Paste in the following code:
<script type="text/javascript">
(function () {
var NickelledLaunchers = window.NickelledLaunchers = NickelledLaunchers || { setUser: function (u) { this.userData = u } };
NickelledLaunchers.userData = {
appId: "YOUR_NICKELLED_APP_ID",
userId: ""
}
var s = document.createElement("script");
s.async = true;
s.src = "https://cdn.nickelled.com/launchers-2.min.js";
var f = document.getElementsByTagName("script")[0];
f.parentNode.insertBefore(s, f);
})();
</script>
Note that you'll need to tweak this code to ensure you're passing the correct Nickelled app ID (we've added the placeholder YOUR_NICKELLED_APP_ID in the code above).
7) Next, you'll need to ensure your data layer is set up correctly in Google Tag Manager.
This is how we'll extract the user ID (and any other data you wish to pass into Nickelled) from your website.
This is normally done by using a data layer variable (which needs to already be set up on your site). You can find instructions on how to pass variables to the data layer from Google themselves, here.
In most cases, it's a simple piece of javascript added to the page before the Google Tag Manager snippet is loaded.
<script>
dataLayer = [{
'user_id': '123456'
}];
</script>
In this case, the website is already passing a data layer to Google Tag Manager, and the setup shown simply extracts that information and places it into a variable which we can use in the next step:
8) Once you have access to the user_id variable from the data layer in Google Tag Manager, you should modify your Nickelled tag to pass it through to Nickelled.
In the example above, where the data layer variable name is user_id, we'd modify the code as follows:
<script type="text/javascript">
(function () {
var NickelledLaunchers = window.NickelledLaunchers = NickelledLaunchers || { setUser: function (u) { this.userData = u } };
NickelledLaunchers.userData = {
appId: "YOUR_NICKELLED_APP_ID",
userId: "{{user_id from Datalayer}}"
}
var s = document.createElement("script");
s.async = true;
s.src = "https://cdn.nickelled.com/launchers-2.min.js";
var f = document.getElementsByTagName("script")[0];
f.parentNode.insertBefore(s, f);
})();
</script>
9) Finally, add a trigger to fire the tag, which is normally when your DataLayer is detected (and so there is a userId to pass).
11) Preview your setup if required, to make sure that tags are firing in the right order and the user ID is being set up as intended. You may also wish to pass in further variables.
12) Publish the Google Tag Manager container.
Once it's live, you'll see that your site is marked 'Code Snippet Installed' in your Nickelled settings:
