Tracking Conversions with Intercom

“Every trackable interaction creates a data point, and every data point tells a piece of the customer’s story.”

Paul Roetzer, Founder and CEO of PR 20/20, & Author of Marketing Performance Blueprint

Intercom is a great tool for communicating with your audience and has some powerful data on your user’s behavior within the app’s toolset. However, in addition to knowing how users are interacting with my application, I wanted to know one more piece of data:

“How did my most engaged users find our app in the first place?”

Of course, I could reach out to them personally and ask, and that does give us some great insight, but honestly, this data should be discoverable without their direct input.

I set out to discover how to retrieve this data for our financial planning SaaS app for freelancers, Harpoon. I couldn’t find much out there in terms of how-to articles, or features that I could “turn on” in Intercom. To throw another curveball, our app and marketing site is on separate subdomains (www.harpoonapp.com vs. app.harpoonapp.com)

How can I track acquisition data from the marketing site, and assign that data to our users within Intercom?

I had to roll my solution (don’t worry, I’ll walk you through it and provide the exact code you’ll need to install on your site to track this data). There were a few pieces of information that I knew that I could track automatically:

• Query strings like UTM parameters that we were already providing to Google Analytics (utm_campaign, utm_source, utm_medium).
• The referral URL that is generally passed in with every http request.

I knew my solution would likely be cookie-based, since passing a cookie from one sub-domain to another is pretty easy, and I can track this data for some time, in case they don’t sign up for the app until a later date.

In the end, I knew I wanted to see something like this in my Intercom data:

Also, in addition to the referral data, to see the UTM parameters we build into the links using Google’s URL Builder:

As you can see in the screenshots above, as I’m writing this article we are acquiring a handful of new users from an advertisement we are running in Web Design Weekly, an email newsletter. We can now track exactly how many signups we are receiving via this advertising push, not only during the week of sponsorship but also for residual signups that are to come in the weeks ahead.

A Primer on UTM Parameters

I used to be confused by UTM parameters attached to URLs, but that confusion was fairly unwarranted. UTM parameters are simply tags that you add to any URL after a question mark to track the source of that link. They don’t affect the actual destination of the link, but they do pass along some information to the browser rendering the page.

These tags can be anything, and the only magic about the tags “utm_campaign”, “utm_source”, and “utm_medium” is that they are given a specific purpose as outlined by the “Urchin Tracking Module (UTM)” and Google does specific stuff with this data (like show you graphs on it within Google Analytics).

For example, if you are advertising you would likely want to know how effective that advertisement is, right?

At the time this article is being written, at Harpoon, we are advertising with Laravel News. Naturally, we want to know whether or not this is going to be a valuable sponsorship for us by tracking the results. If we simply had the links in the advertisement post to https://harpoonapp.com, we wouldn’t quite know that they were coming from the advertisement.

Instead, we have provided a link for the advertisement that points back to a specific URL, letting us know that the source of the referral was for our November Laravel News sponsorship:

https://harpoonapp.com/?utm_source=LaravelNews &utm_medium=Sponsorship&utm_campaign=November

In a moment, we’ll see how to pass this valuable data over to Intercom, but I’d like to point out how it then becomes convenient to view this information within Google Analytics.

If you navigate to Google Analytics > Acquisition > Campaigns you can click on individual campaigns to view their overall effectiveness in driving traffic. In just a couple of days, we’ve received this data for our traffic from Laravel News:

We see that we have had 40 sessions, with 34 of those being by new visitors. However, this tells us nothing about how valuable this traffic is for us.

• How many of those visitors signed up for the free trial?
• How many of those visitors returned to the app after initially signing up?
• How many of those visitors converted to paying customers?

These are the important questions, and ones that we must track if we are to be intelligent about our advertising budget and channels.

Tying this Information into Intercom

By connecting our Intercom account to Stripe, we can easily see within the dashboard which users are returning to the app, how much they are spending per month, and what their lifetime value is. What we need to do is a tie in how they got there in the first place so we know where to double-down our marketing efforts.

Intercom allows you to set custom user attributes in addition to the usual name and email. What we set out to do is come up with a process that does the following:

On Marketing Site

1. Check to see if there are any UTM parameters in the URL.
2. Check to see if a cookie has already been set that recorded previous UTM parameters.
3. Write the UTM parameters to cookies if none exist already.
4. Apply steps 1-3 to the “referrer” url if it is provided to the browser (this is not something that you typically see in the browser window, but you can access it with JavaScript).

On the Application

Because Intercom is tied into user ids that correspond to real users within our application, we wait until after the account has been created on Harpoon before we pass in the cookie information captured on our marketing site. For our specific use-case, we wait until our “Welcome” page to pass in our information to Intercom via custom attributes:

1. Check for the presence of cookies passed in from the marketing site for the UTM parameters and the referrer.
2. Use JavaScript to provide those values to Intercom.
3. Watch the data roll in as new users sign up for the app!

Now, using filters in Intercom’s sidebar, we can build queries to answer the following questions pretty easily:

• What is the referral data for users who have been paying for the app for more than 3 months?
• How many of the customers from Campaign A are currently paying to use the app?

The Detailed Implementation

As promised, I’ll outline here the code needed to make this wonderful data marriage happen.

First of all, both your app and marketing site will need to include jQuery and the jQuery Cookie plugin.

Code for the Marketing Site

After you’ve included both jQuery and jQuery Cookie, this code will record the UTM parameters and referrer into cookies that can be read across subdomains:

/* --------------------------------------------------
  :: Track Referrers
-------------------------------------------------- */

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

$(function() {

  if ($.cookie('myapp_referrer') == null || $.cookie('myapp_referrer') == "" ) {$.cookie('myapp_referrer', document.referrer, { expires: 180, path: '/', domain: 'myapp.com', secure: true });
  }

  if (getParameterByName('utm_source') !== "") { $.cookie('utm_source', getParameterByName('utm_source'), { expires: 180, path: '/', domain: 'myapp.com', secure: true });
  }

  if (getParameterByName('utm_medium') !== "") { $.cookie('utm_medium', getParameterByName('utm_medium'), { expires: 180, path: '/', domain: 'myapp.com', secure: true });
  }

  if (getParameterByName('utm_term') !== "") { $.cookie('utm_term', getParameterByName('utm_term'), { expires: 180, path: '/', domain: 'myapp.com', secure: true });
  }

  if (getParameterByName('utm_content') !== "") { $.cookie('utm_content', getParameterByName('utm_content'), { expires: 180, path: '/', domain: 'myapp.com', secure: true });
  }

  if (getParameterByName('utm_campaign') !== "") { $.cookie('utm_campaign', getParameterByName('utm_campaign'), { expires: 180, path: '/', domain: 'myapp.com', secure: true });
  }

});

Note that you will need to change “myapp” to your appropriate app and domain.

Code for your Application

For this tutorial, I’m assuming that you are already using Intercom to track your visitor data. In addition to providing the user id, email, etc. you can add the following to your Intercom settings on page load:

    window.intercomSettings = {
      ...
      "harpoon_referrer" : $.cookie('harpoon_referrer'),
      "utm_source"       : $.cookie('utm_source'),
      "utm_medium"       : $.cookie('utm_medium'),
      "utm_term"         : $.cookie('utm_term'),
      "utm_content"      : $.cookie('utm_content'),
      "utm_campaign"     : $.cookie('utm_campaign')
    };

This will provide the appropriate data if it exists, and if not, Intercom will simply show “Unknown” in the columns for each corresponding variable.

Final thoughts

Marketer and author Ryan Holiday defines the new marketing landscape, known as “Growth Hacking” by describing a new type of marketer:

“…someone who has thrown out the playbook of traditional marketing and replaced it with only what is testable, trackable, and scalable. Their tools are e-mails, pay-per-click ads, blogs, and platform APIs instead of commercials, publicity, and money.”

Ryan Holiday

In our digital age, we have more capabilities and information than we can handle. The problem is, that we often don’t have that data connected in the right ways to show us how to make better decisions. By typing in your user’s behavior with the method used to bring them into your audience in the first place, you gain the insight needed to spend your resources wisely.