Improving Activation with Personalisation: GA + FullStory + GTM

by Preston Daniel

posted on: March 30th 2018

User onboarding acts as a bridge between acquisition and activation, and can be a major growth driver for your activation efforts.
In this article you'll find:
- How we analysed UserTest.io's user onboarding flow,
- What we did/are doing to improve UserTest.io's activation,
- How you too can analyse your user onboarding and improve

Let's get started!

Analysing User Onboarding

“If you’re aren’t improving, you’re falling behind” – Unknown

Improving is a lot easier when you know what your benchmark is.

We took advantage of  Google Analytics and FullStory to provide the data we needed to find our benchmark.

Google Analytics served us the what and where, with FullStory providing us the why and what is going on?

Google Analytics Audit

1: VPV Funnel

The first thing we did was to identify where in our sign-up funnel our users were dropping off the most.

With most funnels, you could create a “Segment” and build a “Sequence” to identify your drop-off rates e.g. Page = Equals + Page = Equals etc.

However, when a page loads content dynamically without requiring a full-page load, it can be difficult to track drop-off rates, for example: single page checkouts or the UserTest.io homepage.

With GTM, there are a couple of ways to skin a cat (create virtual page views) – all with their advantages and disadvantages.

For example, we could fire a virtual page view upon a button click, however, what if a user has just clicked that button but was not shown new content? You’ll have inaccurate tracking.

For us, we found using the “Element Visibility” trigger and sending data to the dataLayer the best ways to accurately track virtual page views.

2. Identify Channels

We did this  so we could start to paint a picture to what experience the users were having before they landed on our page e.g. if they came organically – what did they search for? If they are referring users – how is UserTest.io framed on that page that they just came from?

To identify your channels and what sources are driving relevant traffic, dive into Google Analytics -> Acquisition -> All Traffic -> Source/Medium

For instance, we can see the following for UserTest.io:

(Tracking issues – we know)

3. Channel Analysis

We’ve identified which channels and sources are driving relevant traffic to our site, now we need to understand what those users are seeing before they land on UserTest.io.

Let’s use Quora as the example.

Doing a quick search of Quora with Google, provided some quick relevant questions for me to answer, for example:

usertesting-quora-questions

I answered all the above questions and left a link to UserTest.io. Every link I provided was built with Google’s UTM builder for added tracking (and personalisation, which we’ll talk about below).

All the questions above are “intent” based questions, e.g. people are actively looking for an alternative, making it slightly easier to create a personalised experience as we can match their “intent” with their on screen behaviour – this is where FullStory comes in.

On all the questions above, UserTest.io is framed to the user as a more affordable alternative to UserTesting.com.

Bonus. Tracking

To make sure we’re tracking the intent from the users coming from the answers to the above questions, we added UTM parameters to the links we provided in the questions – for example:

https://usertest.io/?utm_campaign=alternative_to_usertesting

Including UTM parameters will make your personalisation efforts easier later on – trust me!

Google provides a free UTM parameter builder here in case you get stuck.

We now know where our biggest drop-off rates are, where these users are coming from and what their experience is before they come to our site. It’s now time to reveal their onsite behaviour…

FullStory Screen Recording Analysis

1. Identifying Behaviours

FullStory’s most powerful feature is their “Omnisearch“, which allows you to search for practically any user or site parameter, for instance: city of user, page path, OS, element clicked etc

We’re going to use the Omnisearch to search for the UTM campaign we created to track our Quora answers.

fullstory-segment-alternative-to-usertesting

Once we had the list of session recordings, we created and named a segment: Intent – Alternative to UserTesting

Likewise, we continued doing this for other relevant traffic sources and user behaviours. For example:

  • Users being referred from UserConversion.com – intent: looking for ways to increase conversion rates
  • Users being referred from Remoteresear.ch – intent: comparing remote user testing tools and platforms
  • Users who entered a URL on the homepage, but didn’t signup – intent: have a website/prototype they need testing

2. Behaviour Analysis

We’ve created our traffic source and intent based segments – now we anaylse!

The analysis was done using our screen-recording analysis spreadsheet, in which we started to identify reoccurring patterns of behaviour and listing our observations.

Some reoccurring behaviours included:

  • Checking out our FAQ’s and more specifically checking out: What is the difference between UserTest.io and your competitors? Can I pre-screen your worldwide testing panel?
  • Entering a URL to test and not signing up, but would later return and continue to scroll up and down the page.
  • Clicked the “Pricing” link in our top nav and highlighting the pricing for our tester options – this was prominent with those coming from our Quora answers.

3. Intent Creation

We have 3 key behavioural patterns from the FullStory recordings.

These 3 behavioural patterns fundamentally determine what will be changed on our page, when the user first lands on the page and when/if the user returns.

We created (and by created, I mean wrote down) an intent called, Alt to UserTesting, and started to list copy changes and element changes based on the behaviours identified.

For example, change pricing copy to “Pay As You Go” on first visit.

If price is highlighted, change above the fold copy to “Get Started With $13” on return visit.

The above changes were supported with forum comments and product reviews of users complaining about the extremely high prices of UserTesting and their lack of pay as you go payment.

usertesting-pricing-review-3

usertesting-pricing-2

usertesting-pricing

Improving User Onboarding (Activation)

Personalising with Google Tag Manager

Johannes of @Truly, created this gem, on how to use GTM for free website personalisation.

Note: All of part 1 and part 2 (below) is a re-written interpretation of Johannes’s post.

Naturally, we had to test this (it’s what inspired this blog post).

Here’s a quick re-cap of what you’ll learn and be able to implement:

  1. Setup tracking of your personalisation efforts, by pulling your data into custom dimensions
  2. Create custom tags and implement jquery to make changes to your website
  3. Wizardry of free site personalisation

A. Infrastructure Creation

By infrastructure creation, I mean doing the following:

  1. Creating UUID (universally unique identifier) for your users (you may be able to use GA’s Client ID for this). This is used to track each user who has/has not had a personalised experience.
  2. Splitting your user groups – this is essentially splitting your users to those who have and those who have not had a personalised experience, and dumping the data into a custom dimension.
  3. Custom Dimension – super easy to create (30seconds).
  4. Essentially these allow you to send data to your GA account that wouldn’t necessarily be tracked by GA. For instance, the UUIDs.

Let’s get started!

1.1 UUID + splitGroup

In order to track our efforts, we need to do two things first:

Create a UUID and split these users from everyone else.

Head on over to Google Tag Manager and create a new HTML tag – don’t forget to name it something memorable.

We called ours “UUID to dataLayer” (it says what it does on the tin).

html-gtm-tag

Paste the following code into your HTML tag:

<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");

var splitGroup = localStorage.getItem("splitGroup");  

}

// Push UUID to DataLayer

dataLayer.push({'uuid': UUID});

dataLayer.push({'splitGroup': splitGroup});

</script>

Add a trigger to the tag you just created.

The trigger type you want to add is: Page View. Fire this trigger on: All Page Views

What does this code do?

A couple of things:

  1. If the dataLayer can be accessed. The code will run. If not, it won’t run. (The dataLayer cannot be accessed by old browsers such as IE 7)
  2. The following:
    1. If a user has no ID assigned:
      • The script will run and will generate a UUID
      • It will then save the UUID in the localStorage
    2. If the user already has a UUID,
      • The script will run and take the UUID from the localStorage
      • The UUID and splitGroup will then be pushed into the dataLayer (which we can access later on if needed)

1.2. Custom Dimensions

Real-quick this one.

Log in to your GA account -> Admin -> Product Linking -> Custom Definitions -> Custom Dimensions.

We want to create two dimensions. One for “splitGroup” and the other for “UUID”. These are both “session” scope dimensions.

Be sure to take note of the index number, for example:

custom-dimensions-index

The index number for the above two dimensions are 3 and 4.

B. Intent Creation - Variables

To define the personalisation, we need to define what show’s the user’s intent and match that with some personalisation rules.

Our personalisation rules are pretty straight-forward:

  1. If utm_campaign equals “Alternative to UserTesting” -> intent is “Alternative to UserTesting”
  2. If utm_campaign equals “Alternative to Loop11” -> intent is “Alternative to Loop11”

(You see why adding the utm_campaigns come in handy?)

We need to translate the above personalisation rules into a RegEx Table.

Why? It allows the RegEx table to determine an output and allow other Tags to lookup the defined output. The output can then be used to define our personalisaition.

For example: the RegEx table will lookup the URL path to see if utm_campaign=alternative_to_usertesting and output: Alternative to UserTesting, if the query matches (we define the query below).

From there, our personalisation tag (which we will create below) will match the output to the intent of the user and change the elements we wanted changed.

The above rules are pretty easy to translate into a RegEx table and look like the following:

utm-regex-table

To create the “input variable” for the “utm_capaign intent variable” (RegEx Table), create another variable and set the variable type to be: URL.

utm-variable-query

Our “Query Key” is: utm_campaign.

What does this do?

This variable essentially makes a query on the URL path based on your criteria. In our case, we’re make a query on the URL for: utm_campaign.

The input variable we’re querying  then pairs up with the pattern we defined in our RegEx table i.e. (alternative_to_usertesting).

B. Intent Creation - TAGs

We need to define what it is we what to change. This is done with some simply “if” statements in jquery and element selectors.. For example:

if (intent == "Alternative to UserTesting") {

jQuery("#pricing-slide > div > h2").text("Pay As You Go Pricing");

}

Translation: If the intent is “Alternative to UserTesting“, change element selector “#pricing-slide > div > h2” to text: “Pay As You Go Pricing“.

You may notice the following in the above: intent ==”Alternative to UserTesting. This matches up with the outputs specified in our “utm_capaign intent” variable. These need to match for the tag to fire correctly.


To define the element you want to change, simply right-click the element and inspect it. You then want to copy the “selector” for that element. For example:

Once you’ve defined the element you want to change, you need to tell GTM what you want to change it to. For example:

.text("Pay As You Go Pricing" )

You can read more on jquery here and here.

This is what your tag could look like (depending on what you’re changing):

gtm-usertesting-tag

To fire this tag, we used the DOM Ready trigger.

DOM-ready-trigger

We took this a bit further than the standard “select element + “specify change” = “changed element” equation and instead, incorporated the use of custom variables to make changes to UserTest.io.

The custom variables we created were for the following:

  1. Input URL on the homepage
  2. Name entered in the sign-up form
  3. Company entered in the sign-up form

What did we do next?

Just like the personalisation tag, we injected the tracked information back into the page when a user returned to the site.

As an example:

custom-variable-dataLayer

 

 

D. Testing Changes + Reporting

As we’ve created two custom dimensions: one for splitGroup and one for the UUID, you can now track your personalisation efforts in GA.

In our case, we’d add a secondary dimension for our splitGroup within our campaign reports.

How can I improve?

1. Analyse the data

Take a deep dive into your data- both quantitative and qualitative data.

For quantitative data, look at your conversion funnel i.e. the straight line steps a customer needs to take to convert.

As an example – UserTest.io’s Signup

  • Homepage -> Select Testers -> Enter and submit info

How many people land on the homepage -> how many proceed to select their testers -> how many from the homepage, who select their testers, enter and submit their details

This level of analysis can be easily achieved with sequences in Google Analytics. The guys at LunaMetrics have a fantastic post about sequences here.

With qualitative data, you’re wanting to understand the what and the why.

What are they doing during the sign-up process and why are they doing what they’re doing.

Heatmaps, remote user testing and session recordings are good places to start.

2. Review The Sign-Up Process

When you’re reviewing the sign-up process, you’re looking to see where you can add soft walls and add hard walls.

Soft Walls: A page or step that the user can do as part of the sign-up process, but has the option to skip or continue later. For example, Duolingo’s account creation or UserTest.io’s selecting testers.

Hard Wall: Where the use cannot continue without committing e.g. signing up or paying. Again, going through Duolingo’s sign-up process, you’re able to complete a few lessons before being asking to sign-up (hard wall).

This is flipping the funnel and providing value to the user before they’ve committed to you.

3. Be Creative (AHA! Moment) & Implement

What value can you provide to the user without them having to sign-up?

The value you provide is influenced by where and what your soft walls are in the signup process.

For example, SimilarWeb, a market intelligence tool, allows you to run a free report without having to sign-up.

similarweb-aha-moment

As I scroll through the free report (soft wall), I’m given data on trends, traffic, source of traffic, competitors etc – SimilarWeb are providing value and I haven’t given them anything in return.

When you get to the bottom of the page, you’re presented with this nice message:

similarweb-pro-signup

You’ve just given me all this information and now I can get more with your pro account? Sign me up! (hard wall)

avatar for author

Preston Daniel

I take care of all things product and growth related to UserTest.io. I love experimenting with new technologies and long walks on the beach... APIs, Automation and AI are the future!

Improving Activation with Personalisation: GA + Fu…

by Preston Daniel Time to read: 11 min