Good Marketing is all about creating a customer experience that’s relevant to a person’s intent. It’s the reason you turn to Amazon for one product, but end up buying 3. It’s why you love browsing your Netflix, and turn to Spotify to discover new tunes.
But you’re probably not working for Netflix, and don’t have a team of data scientists and programmers developing a recommendation engine. So where do you start creating an experience that’s relevant to your visitor’s intent? **Update May ’18 to include my slides about this topic**
Segmentation is standard in email marketing, even paid advertising like Facebook. But what about your website? Tons of data can be leveraged, even right from the first session (referral, campaign, landing page, location, screen size, operating system…).
But isn’t overwhelming? Where do you get started?
If you don’t want to spend over $1000 per month for solutions like Optimizely Pro or Yieldify or just want to test the waters with a free solution – you’re in the right place. I’ll show you exactly how to create a more personal user experience while in turn boosting your conversion rates.
And the best? You’ll be able to do it all for free, 100%! (your boss will love this)
And I’ll even show you how you can measure exactly $$$ you’re making because of it (your boss will love this even more).
What I am going to show you in the complete guide, step-by-step, with no coding experience required:
- How to show a different homepage to returning users based on their intent (Conversion boost for Truly +30%)
- Change the headline on your landing pages based on the campaign or channel your visitors come from (landing page conversion rate +20-80%)
- How to create intent-based pop ups on your blog to capture email addresses using Sumo.Me (increased our email captures +200%)
These are just example use cases – after reading this article, you will be able to use the same framework to personalise almost everything on your website.
There are 2 main parts in this guide:
PART 1: Setting up the Infrastructure: Tracking, User IDs & Split Groups
PART 2: Personalising your Website Based on your Visitor’s Intent
Looking for my slides from All Things Data 2018 Tel Aviv / MeasureCamp London? Here you go!
What's in it?
PART 1: Setting up the Infrastructure: Tracking, User IDs & Split Groups
1. THE PERSONALISATION STACK – Tools you need
GoogleTagManager (GTM): It’s the most versatile tool and does a lot more than just ‘managing tags’. In order to benefit from this guide, you’ll need to have GTM installed on your website.
Analytics tool: We’ll be using Google Analytics in this guide, but you can also use Mixpanel (my preferred tool to measure A/B tests),
That’s all that’s needed! Even though a little bit of brain might be helpful too đ
2. THE BASICS – Assigning a unique ID to your visitor, and creating a split testing logic
Let’s get started with this. In order to create unique Unique User ID (UUID) with Google Tag manager, I am using Abhishek Tiwari’s code as a basis, which he published in this great article.
Firstly, we need to assign every visitor to our website a random unique user ID (UUID) and store this ID locally for the user. This will allow us to persist settings across different sessions.
The old way to do this would be to drop a cookie on the visitors computer. Cookies have been around since the inception of the web, and have become limited in terms of their functionality (for a great overview, check Simo Ahavaraâs article here).
So letâs save some carbs and use a more modern solution: the Web Storage API.
Note: That means old browsers such as IE 7 & older wonât support this. But I wonder if people using such old browsers would even notice personalisation? I am fine to make this sacrifice (if youâre not, the same article from Simo explains a fallback method).
Assigning a UUID & create SplitGroups in Tag Manager
Firstly, head to Google Tag Manager and create a new Tag (HTML) and call it for example “UUID to DataLayer”.
Then paste in the following code use the following code based on Abhishek’s code:
<script type="text/javascript">
var UUID;
try {
UUID = localStorage.getItem("UUID");
} catch(e) {
// localStorage isn't available.
}
if (localStorage.getItem("UUID") == null) {
(function()
{
var CHARS = '0123456789'.split('');
// Generate UUID
Math.uuid = function() {
var chars = CHARS, uuid = new Array(36), rnd=0, r;
for (var i = 0; i < 36; i++) {
if (i==8 || i==13 || i==18 || i==23) {
uuid[i] = '-';
} else if (i==14) {
uuid[i] = '4';
} else {
if (rnd <= 0x02) rnd = 0x2000000 + (Math.random()*0x1000000)|0; r = rnd & 0xf; rnd = rnd >> 4;
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
}
}
return uuid.join('');
};
})();
var UUID = Math.uuid()
// Generate and set visitorUUID localStorage
localStorage.setItem("UUID", UUID);
}
else if (localStorage.getItem("UUID") != null) {
// Get UUID from localStorage
var UUID = localStorage.getItem("UUID");
}
// Push UUID to DataLayer
dataLayer.push({'uuid': UUID});
</script>
Here’s how it should look like…

What does this code do?
- If the dataLayer can be accessed, the code will run. If not (e.g. older browsers), it wonât.
- Either A) If a user has no ID assigned or B) the user already had a UUID
(A) If a user has no ID assigned (i.e. = null)
- The script runs & generates a random ID based on some rules
- It then saves this ID in the localStorage of the Web Storage API under âUUIDâ, in the persistent localStorage.
(B) If the user already had a UUID, the script takes the ID from the localStorage
- The UUID will then be pushed into the DataLayer
Next, we need to define a trigger for this code. We want to assign this UUID for every page view – the script will handle the condition whether itâs a new or existing user.

Activate the Preview mode – you should see this:
Head to your website andâŚ
Using Chrome and Firefox, right-click and select âInspectâ (Chrome) or âInspect Elementâ (Firefox). Then click on âconsoleâ.
Enter ‘localStorage.getItem(“UUID”)’ in the console, press enter. You should see your UUID!
Yay! đ
So whatâs next? Well, I promised you weâd be able to measure the success of your personalisation activity easily, which we can do by splitting the traffic. How do you do that?
Firstly, we need to segment our visitors in different randomly assigned groups (e.g. A/B).
Well, we just created a UUID with random numbers, so letâs go ahead and use that. We only need to amend the tag we just created slightly.
Weâll be assigning our users to 10 different segments simply by using the first digit of their UUID, which can be a number between 0 and 9.
This javascript does the trick:
var splitGroup = UUID.charAt(0);
And in order to make it easily accessible, weâll also push this number to the dataLayer:
dataLayer.push({'splitGroup': splitGroup});
And hereâs the final code:
<script type="text/javascript">
var UUID;
try {
UUID = localStorage.getItem("UUID");
} catch(e) {
// localStorage isn't available.
}
if (localStorage.getItem("UUID") == null) {
(function()
{
var CHARS = '0123456789'.split('');
// Generate UUID
Math.uuid = function() {
var chars = CHARS, uuid = new Array(36), rnd=0, r;
for (var i = 0; i < 36; i++) {
if (i==8 || i==13 || i==18 || i==23) {
uuid[i] = '-';
} else if (i==14) {
uuid[i] = '4';
} else {
if (rnd <= 0x02) rnd = 0x2000000 + (Math.random()*0x1000000)|0;
r = rnd & 0xf;
rnd = rnd >> 4;
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
}
}
return uuid.join('');
};
})();
var UUID = Math.uuid()
var splitGroup = UUID.charAt(0);
// Generate and set visitorUUID localStorage
localStorage.setItem("UUID", UUID);
localStorage.setItem("splitGroup", splitGroup);
}
else if (localStorage.getItem("UUID") != null) {
// Get UUID from localStorage
var UUID = localStorage.getItem("UUID");
if(localStorage.getItem("splitGroup") == null) {
var splitGroup = UUID.charAt(0);
localStorage.setItem("splitGroup", splitGroup);} else
{var splitGroup = localStorage.getItem("splitGroup");}
}
// Push UUID to DataLayer
dataLayer.push({'uuid': UUID});
dataLayer.push({'splitGroup': splitGroup});
</script>
Wasnât so hard, right?
In order to make this work, we also need to create the variable âsplitGroupâ in our dataLayer.
GTM makes it quite easy – just go to âVariablesâ and add a new DataLayer Variable with the name “splitGroup”:
Letâs try this out: Preview the container and go to the browser of your choice. In the console, type in:
“dataLayer”. Press enter.
You will now see everything thatâs in your dataLayer (probably a lot more than Iâve got in this example):
You can see that the splitGroup is set correctly. Given itâs position in the array, you can also get the value directly by typing in:
dataLayer[2].splitGroup
â2â because itâs the 3rd item in the array (count starts at 0).
UPDATE: Some people had problems hat this stage with the splitGroup being ‘null’. I’ve added a little bit of code above to check if the splitGroup was set before, and if not, set it again. The code was fine before, it was just caused by going through the sequence of my template, which only sets the UUID first, and the splitGroup later.
Yayayay!
Well, itâs not completely done. đ
Didnât I promise that you could prove to your boss the impact of all of this?
Yes, and hereâs how we do it!
Measuring Results in Google Analytics
In order to measure any personalisation in your Google Analytics, we need to do a few more things. The aim is to have a custom dimension that allows you to look how your customers have performed depending what variation of your site theyâve looked at.
First, we need to create a custom dimension in your Google Analytics.
To do so, log in to your Google Analytics, go to âAdminâ and find the âCustom Definitionsâ section under the property menu.
From there, select âCustom Dimensionsâ and click to add a new dimension.
Create one Dimension for splitGroup, and (optionally) another one for the UUID of the user.
You should end up with something like this:
Now the most important thing here are the âIndexâ IDs for each of your dimensions. Note them down!
Next, weâll head to Google Tag Manager. Go to your Google Analytics Settings Variable (Note: Youâll only have that if you trigger Google Analytics through Tag Manager, which I strongly recommend).
Edit the variable and scroll down to âMore Settingsâ, where you can add the 2 Custom Dimensions weâve just defined and connect them to the variables weâve created earlier.
Hit save!
Does it work? Try it out by checking your Google Tag Manager Preview / Debug tool, select the âWindow Loadedâ Event and then find your Google Analytics settings variable.
You can see below that we’re passing on the two variables for splitGroup & UUID.
And in Google Analytics, you can segment traffic by this dimension:
Now weâre all set with our foundations. Letâs have some fun!
PART 2:Â Personalising your Website
Now that we’ve set up the foundation, let’s bring it to action.
What I am going to show you:
- How to show a different homepage to returning users based on their initial landing page (boosted my conversion 20%)
- Change the headline on your landing pages based on the campaign or channel your visitors come from
- How to create intent-based pop ups on your blog to capture email addresses using Sumo.Me (increased our email captures +200%)
(1) Personalising your Homepage for Visitors based on their Initial Landing Page
Let’s start by personalising our homepage for returning visitors based on their previous intent. I’ll break it down in 3 simple steps:
- Create a list of different intent categories, and map these to landing pages
- Capture the intent of a visitor based on their landing page and save it in their localStorage
- Change the homepage hero image and messaging for the returning visitor
Let’s start by defining what different intents your visitors could have. We’ll be using growth-consultant.com as an example.
Let’s say my visitors are interested in either of the following:
- Help with growth strategy
- Help with marketing personalisation
- Help with their Facebook advertising
For each of these intents, I’ve set up three landing pages which I am sending traffic to from different channels, e.g. Organically, with Facebook Ads and Google Adwords:
- Growth Strategy: growth-consultant.com/growth-strategy
- Marketing Personalisation: growth-consultant.com/marketing-personalisation
- Facebook Ads: growth-consultant.com/Facebook-ads
So far so good.
Now for your website, it might be a little more complicated! You may have hundreds of different pages, and mapping each will be difficult. Thank god, Google just released a new feature in Google Tag Manager which makes this a lot easier – it’s called RegEx tables.
Essentially we can use this to segment all of your pages based on characters the URL contains.
What? đ¤
Back to my initial example, assuming I’ve got the following pages:
- growth-consultant.com/growth-strategy/overview
- growth-consultant.com/growth-strategy/my-approach
- growth-consultant.com/marketing-personalisation
- growth-consultant.com/blog/ultimate-guide-to-personalise
- growth-consultant.com/personalisation/case-study
- growth-consultant.com/Facebook-ads
Now we need to assign the above pages to the intent groups I’ve defined above.
My rules are pretty simple:
- If page URL contains ‘strategy’ => intent is ‘growth-strategy’
- If page URL contains ‘personalis’ => intent is âpersonalisation’
- If page URL contains ‘facebook’ => intent is ‘facebook-ads’
We’ll now need to translate this into RegEx. I won’t go into detail here, but if you want to learn more about RegEx, here’s a great guide by Ryan to help you get started.
Fortunately, in this case itâs really simple đ¤
Let’s put this into tag manager, here’s how it looks like:
Important: Switch off the âFull Matches Onlyâ advanced setting AND âEnable Capture Groups and Replace Functionalityâ.
For more information about these settings, consider Simoâs article on the topic, which goes a lot more into detail.
Also, if you canât find the input variable {{Landingpage}} yet, donât despair. Weâll work on this next.
But first, we need to create a logic to set the landing page as a variable in the localStorage when the user lands on your website for the first time.
Weâll use a custom script for that. Here’s the code:
<script type="text/javascript">
var dateLandingPageSet;
try {
dateLandingPageSet = localStorage.getItem("date-landingpage-set");
} catch(e) {
// localStorage isn't available.
}
var path = {{Page Path}};
//calculate date difference between today and the date the landingpage was set before
var dateset = new Date(dateLandingPageSet);
var today = new Date();
var timeDiff = Math.abs(dateset.getTime() - today.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
//only set landingpage if we have set the previous landing page more than 2 weeks ago
//or we haven't set a landing page yet
if(dateLandingPageSet == null || diffDays > 14) {
try {
localStorage.setItem("date-landingpage-set", today);
localStorage.setItem("landingpage", path);
} catch(e) {
// localStorage isn't available
}
}
</script>
(Thanks Ben for simplifying this massively!)
This script sets the landing page path and the date the landing page was set, but only if a) it was not set before or b) it was set longer than 14 days ago. So in other words, weâre keeping the intent locked in for a period of 14 days – this of course can be amended.
Just paste this into Google Tag Manager and save it under something like âLandingpage to LocalStorageâ.
Weâre getting there, just a little step to make this landing page available in tag manager – weâre just creating a variable called âLanding Pageâ. This is one pretty simple – we just pull this information from the localStorage:
function()
{
return localStorage.getItem('landingpage');
}
Create this variable as a custom Javascript and weâre good to go:
So, does it work? You bet!
In Tag manager, enable the Preview mode for workspace you created the tags & variables in, and head to your website using any of the landing pages youâve mapped in your table.
You should see the debugger loading with the page. First, check if the necessary tags have been fired, and then head to the âvariablesâ section. Make sure you select âPage Viewâ on the left, as this would be the time when the variables were set:
Check the variables âIntent Tableâ and âLandingpageâ. Hereâs mine:
Et voila, my intent was mapped to âpersonalisationâ! đ
Now finally, letâs bring this to use – we need some personalised content! Iâll use a simple example here, but this can be applied practically everything on your website.
In order for this to work, weâll be using a technology called jQuery, which is a JavaScript library. As the jQuery Foundation puts it: The most basic concept of jQuery is to “select some elements and do something with them.â
In order to use it for our use case, you donât need to be jQuery pro, but having a little bit of HTML and Javascript knowledge certainly will make your life easier. But if you donât have that, donât worry, Iâll explain the basic bits.
(1) Selecting the elements we want to change
The first step is to select the elements on our site weâd like to change in order to personalise them. This could be the main headline of your website for example, or it could be the hero image or anything else, really!
How do we do that?
Let me explain this using an example:Â Asos.com.
We’d like to change the main headline of the homepage âTHIS IS ASOSâ to âUNIQUE FASHION FOR HERâ, because weâd like to be more relevant to visitors who you know have an intent to buy womenâs clothes.

How do we select this element?
Right-click on the headline, and click on âInspect’ (Chrome) or ‘Inspect Element’ (Firefox, Safari).
Youâll see the code of this particular element highlighted. Now right-click on that code, go to âCopyâ and âSelectorâ (Chrome) / âCSS Selectorâ (Firefox). In Safari, just right-click and click on âCopy Selector Pathâ.
Thatâs all we need for now! đ
(2) Change it to something else
Weâve already decided we want to change this headline to:Â ASOS – UNIQUE FASHION FOR HER.
So how does the jQuery look like?
The general structure is like that: jQuery(âWHAT WE ARE SELECTINGâ).WHAT-IS-IT(âWHAT WEâRE CHANGING IT TOâ);
So for our ASOS example, this is code:
jQuery("body > section > div > div > article.genericSplash__copy > div.genericSplash__copyContainer > h2 > span").text("UNIQUE FASHION FOR HER");
How can you test it works?
Head to the âconsoleâ tab (after you clicked âInspectâ / âInspect Elementâ).
Type in “jQuery” and hit Enter.
If you get an error like âUncaught ReferenceError: jQuery is not definedâ, just paste the following code into the console (thanks to Naftuli for this nifty code):
var body = document.getElementsByTagName("body")[0];
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
body.appendChild(script);
Ok, jQuery is now ready for us to inject code. Letâs paste in the line of code from above:
jQuery("body > section > div > div > article.genericSplash__copy > div.genericSplash__copyContainer > h2 > span").text("UNIQUE FASHION FOR HERâ);
Aaaand?
Letâs circle back – hereâs what Iâd like to do on my blog, and Iâll show you the full code that you can use on your site as well.
Iâd like to change my blog sub headline âDigital Marketing & Growth advice. No bs, just useful stuff!â depending on the usersâ intent.
- For people with the âFacebookâ intent, I want to show them this alternative sub-headline: “Digital Marketing Growth advice, with a focus on Facebook Advertising. No bs, just useful stuff.”
- Growth Strategy: Digital Marketing Growth advice, with a focus on Growth Strategy. No bs, just useful stuff.
- Personalisation: Digital Marketing Growth advice, with a focus on Marketing Personalisation. No bs, just useful stuff.
You get the gist! The element selector for this sub headline is: #masthead > div > p.site-description
So my jQuery reads:
jQuery("#masthead > div > p.site-description").text("Digital Marketing Growth advice, with a focus on Marketing Personalisation. No bs, just useful stuff.");
And it works..
Simple, right?
Letâs bring it all together. We need a script (a tag in GTM) to run the right jQuery depending on the userâs intent. Weâre already saving that intent as the output of the âIntent Tableâ (the RegEx table), so we just need to run a bit of âif this, then thatâ:
<script>
intent = {{Intent Table}};
if (intent == "personalisation") {
jQuery("div.site-branding >p").text("Digital Marketing Growth advice, with a focus on Marketing Personalisation. No bs, just useful stuff.");
}
else if (intent == "facebook-ads") {
jQuery("div.site-branding >p").text("Digital Marketing Growth advice, with a focus on Facebook Advertising. No bs, just useful stuff.");
}
else if (intent == "growth-strategy") {
jQuery("div.site-branding >p").text("Digital Marketing Growth advice, with a focus on Growth Strategy. No bs, just useful stuff.");
}
</script>
The script contains the variable (intent) which references our RegEx table. Then there are 3 âIFâ conditions, and if they are true, the jQuery gets executed.
Letâs create this in Tag Manager:
You can see that the âfiring triggerâ is not a normal page view, but the âDOM Readyâ, which stands for âdocument readyâ.
Basically, we need to make sure the elements we want to replace or manipulate have actually loaded. You can create this trigger very easily:
Save it, and preview. Congrats, youâve made it! đ
Note: If youâve got different copy (or images) on your mobile site, then you need to create a separate tag for that. Just make sure you execute only one of them by creating a trigger for âOn Mobileâ / âOn Desktopâ as âFiring Triggersâ.
SPLITTING INTO TEST GROUPS
Want to measure how this is affecting your conversion?
We need to add a bit of code that actually only applies this change to users who fall into our âtestâ group (and not in the âcontrolâ).
For that, we first need to decide what percentage of traffic weâd like to expose to the test variation.
Letâs assume weâd like to expose 50% of our visitors, while 50% donât see the personalisation (our control group).
The splitGroup variable can be any number between 0 and 9. So to expose 50%, weâll want to show this to anyone whoâs in groups 0-4.
Letâs add this little javascript condition to our code:
<script>
intent = {{Intent Table}};
splitGroup = {{SplitGroup}}
if (splitGroup < 5 ) {
if (intent == "personalisation") {
jQuery("div.site-branding >p").text("Digital Marketing Growth advice, with a focus on Marketing Personalisation. No bs, just useful stuff.");
}
else if (intent == "facebook-ads") {
jQuery("div.site-branding >p").text("Digital Marketing Growth advice, with a focus on Facebook Advertising. No bs, just useful stuff.");
}
else if (intent == "growth-strategy") {
jQuery("div.site-branding >p").text("Digital Marketing Growth advice, with a focus on Growth Strategy. No bs, just useful stuff.");
}
}
</script>
Cool, push it out and see if it works. Obviously, check what splitGroup youâre in if your preview isnât showing đ
Whatâs next?
How to show a different homepage to returning users based on their initial landing page (boosted my conversion 20%)- Change the headline on your landing pages based on the campaign or channel your visitors come from
- How to create intent-based pop ups on your blog to capture email addresses using Sumo.Me (increased our email captures +200%)
(2) Change the headline on your landing pages based on the campaign or channel your visitors come from
Itâs a classic feature of popular services like Unbounce – Dynamic Keyword insertion. Itâs not hard to build for free though!
We just need to apply the learnings from the homepage personalisation: changing content based on a variable, using jQuery to replace values.
I will go a little less in depth here, but please donât hesitate to ask any questions in the comments if youâd like to know more!
(1) Create a new variable that captures your customersâ campaign.
I am assuming youâre using UTM parameters here, but really any parameters will work.
Since the visitors to your site will be arriving via a URL that has UTM parameters, weâll use GTM to capture the UTM parameter as a variable.
Just head to to the Variables section of your GTM account and create a new variable, e.g. utm_campaign (you can do this for utm_source, utm_medium and utm_content in the same way).
Choose URL as your Variable Type, Query as your Component Type, and type in utm_campaign as your Query Key.
The configuration should look like this.
(2) Create a RegEx table with the different campaigns youâre using, and what value youâd like to assign to them (e.g. the âintentâ behind it)
Same principle as before – weâll be using a RegEx Lookup table to match campaign names with our intent segments.
(3) Define what change youâd like to make on your page(s) using jQuery
Woop, thatâs it!
Whatâs next?
How to show a different homepage to returning users based on their initial landing page (boosted my conversion 20%)Change the headline on your landing pages based on the campaign or channel your visitors come from- How to create intent-based pop ups on your blog to capture email addresses using Sumo.Me (increased our email captures +200%)
(3) How to create intent-based pop ups on your blog to capture email addresses using Sumo.Me
Iâd like to touch on one example featuring Sumo.Me. For this one, youâll need the premium version of Sumo. If youâd like to do it on the cheap, donât despair though – you can also create these in tag manager – check this great article from Marthijn.
A cool and underused feature of Sumo.Me is using âjavascript variablesâ for targeting.
Well, the nice thing is that we can actually access dataLayer variables directly via javascript!
Yap – we can just access our previously defined data layer variables within Sumo, and then show different popups, welcome mats etc. based on the intent or the splitGroup of the visitor. đ
Even if you don’t want to do anything glamorous, there’s a very practical reason: You might want to know how these popups are affecting things like bounce rate, or even conversion rate. Letâs run an A/B test, shall we?
Hereâs how it worksâŚ
(1) Set up a campaign in Sumo as usual
(2) Define you targeting conditions as usual
(3)Â Find out where in your dataLayer array the splitGroup variable sits
- Open your Console, type in âdataLayerâ. You should see something like this:
In my example, splitGroup is in array position â3â. So in order to retrieve the value, we just need to query for dataLayer[3].splitGroup. Try it yourself – just paste your value into the Console:
(4) Define when to show
Select a âNo Show Ruleâ, and choose âOtherâ, and âJavascriptâ. Assuming you’d like to run a 50/50 split test, you can set it as follows: âdataLayer[NUMBER].splitGroup” IS GREATER THAN â4â.
(3) Save it, and test it out!
You can now segment your sessions by splitGroups, and measure (in Google Analytics) if & how it affects your KPIs. Obviously, this can be used of a whole range of other things!
Sweet right?
Alright – these are just some simple use cases. Thereâs a lot more you can do – and itâs your turn now!
Let me know how you’ve used this guide to create your own personalisations and what results youâve achieved with this: leave a comment, tweet me at @joradig or drop me a line on LinkedIn. It really keeps me going and motivated.
Btw, did you see you can download most of the tags, triggers and variables I’ve described in this guide in one Google Tag Manager Container file? Yap, it’s all wrapped up nicely for you. Just click below and leave your email address. Don’t worry, I won’t send you any spam. đ¤
































Epic walkthrough on how to utilise Tag Manager to implement personalisation! Thanks for putting that together Johannes.
Hey Johannes – fantastic walkthrough! Thoroughly enjoyed it.
However, I can’t see any of the images – I think there’s a problem with you SSL certificate which is preventing your images to be loaded…
Hi Preston!
Thanks! Regarding the images – are you forcing to load the HTTPS version? It’s not fully configured yet. Can you let me know if it works for you under the non-HTTPS version: http://www.growth-consultant.com/blog/ultimate-guide-personalising-website-free/ ?
Hi Preston – UPDATE: the HTTPs version should now be working fine. Let me know! đ
johannes
Works a charm! All images are loading in now đ
Fantastic! Let me know how you’re using it, really curious to hear. đ¤
Awesome walkthrough article and some great concepts. Playing with the container you shared in GTM now. I really like how the UUID allows for pseudonymous personalisation through local storage without pushing user data to a third party server. Targeted marketing without creating vendor lock-in or sacrificing user privacy/choice. A solution built for the GDPR era!
One thing you might want to do for future shareables is set the domain where it needs to be changed (i.e. YOUR-DOMAIN.com) as a variable so people can just switch it up in there rather than hunt it down in individual tags. It will also for more complex usage too.
Thanks Daniel! Thanks for the suggestion to set the Domain as a separate variable, you’re right – it should make the container even more user friendly. Will include this in my next revision.
Let me know if/how you ended up using it on your site!
Best
Johannes
Great tutorial…
Are there any solutions for sub domain local storage, we have multiple sub domains and creating multiple UUID’s for each sub domain for a single user doesn’t make sense for us.
A single UUID for all sub domains for a single user would be great
Great question! Unfortunately localStorage is always domain-specific as you pointed out.
I’ve seen some solutions which involves using an iFrame and posting the data over from the iFrame to the subdomain-specific local storage. Bit hacky in my view, but seems to be the only work around. Here’s an article about it: https://jcubic.wordpress.com/2014/06/20/cross-domain-localstorage/
Alternatively, in this case a cookie solution might be easier.
Thanks
Implemented the cookie cutter solution, if anyone wants to know how let me know
Hi Johannes,
Great article, thanks for sharing. However I running into an issue. My splitGroup variable keeps NULL.. Not sure what is going wrong here, any idea?
Hi Stefan, I only just saw your comment. Did you solve your issue by now?
Hi Stefan – some other people had that issue, and I posted a fix. This was actually only happening for you (because the UUID was set before, but not the splitGroup). Check the new code and see if that works đ
Same here Johannes.
My splitGroup variable keeps coming NULL.\
Please advice.
Hi Rahul – hard to diagnose what the problem is. Can you share your code or your website? Did you use my template file for GTM? You’ll get it automatically when you sign up for the email capture on this page.
Best
Johannes