Show Content to First Time Visitors on a Page in Hubspot

This post is to show you how to display content for first time visitors only through Hubspot with the help of cookies.  I recently became Hubspot Certified for their Developer CMS and had a request for showing certain content for new visitors on a page.

Hubspot already uses several cookies to track visitors on a site, and through those, I could easily determine whether or not a visitor was there for the first time or not.

Now, I have to say, this doesn’t necessarily mean they haven’t been there before — but it does mean they had either visited in a private browser without tracking, hadn’t visited in a very long time, or declined cookies on the site.  Otherwise, they are a first time visitor.

Requirements

In order to utilize the cookies provided by Hubspot, a few things have to be done first:

  1. Set up your cookie tracking and privacy policy through the CMS.  You need to ensure that you’re using cookies through the settings and that the domain is set up correctly.  It is recommended you also choose to notify your users that you use cookies.
  2. Install Hubspot tracking.  I actually don’t know if this imperative to the exercise we are doing today, but it’s probably a helpful tool to have anyway.  This can give you more insight and detail about your visitors.
  3. Set up a custom module in the Design Manager.  This is where you will be placing your code to determine first time visitors.
  4. Add the newly created custom module to a page or template you are using.

How to Get Cookies in HubL

Here is a list of the cookies Hubspot sets for a visitor. Since Hubspot does the heavy lifting for us by setting and keeping track of cookies, we need to figure out how to use those in our module to show or hide content based on those cookies.

Thanks to HubL’s HTTP Request Variables, you can call those cookies at any point in your custom module and use them however desired.  The one we are working with specifically today is {{ __hstc }} .  This is the main cookie for tracking visitors and contains the domain, initial timestamp (first visit), last timestamp (last visit), current timestamp (this visit), and session number (increments for each subsequent session).  Those are all very valuable things to know when determining what content to show to your visitor.

If this is a first time visitor, that cookie is not set.

Hide or Show Content For New Visitors

Now that we have a good idea as to how we determine a first time visitor… let’s get those cookies and set up a condition in our module to hide or show content based on that.  Below is a very simple code snippet accomplish that:

{% set cookies = request.cookies %}
{% if cookies.__hstc %}
  Our visitor has returned!
{% else %}
  Our visitor is new!
{% endif %}

This is about as simple as it gets, but it provides all the control and power you would need to determine your first time visitor.  At it’s core — if the cookie is set, then that has to mean the visitor has come before and accepted cookies.

Redirect First Time Visitors

Below is an example of how you would redirect a first time visitor using an unless condition in HubL:

{% set cookies = request.cookies %}
{% unless cookies.__hstc %}
  <script>window.location.replace("https://rcneil.com");</script>
{% endunless %}

You would place this before any content you would like to show to returning users.  For example, place this module on your home page if you would like to redirect them somewhere else if they are a first time visitor.  Unless that cookie has been set, it will execute that Javascript and send the visitor elsewhere.

Loop Through All Cookies

Here is a simple HubL snippet to loop through all of the cookies set in Hubspot in your module:

{% set cookies = request.cookies %}
{% for key, val in cookies.items() %}
   {{ loop.index }} - {{ key }}: {{ val }}<br />
{% endfor %}

This detailed list will show you all of the Hubspot cookies set and their values.  You can get much more defined about what you would like to show visitors based on the cookies’ values.  From this list, you could decide to show a returning visitor something else as opposed to a new visitor.  You could also decide to show a returning visitor who hasn’t been back in a while a specific message.  The possibilities are endless!

Smart Content

It’s important to note that Hubspot gives you the ability to modify content based on certain factors — making it “Smart Content”.  Those factors include what type of device they are using (desktop, tablet, phone), what referral source they are coming from (Google, Facebook, etc), what language they prefer, and a myriad of other factors.  Unfortunately, this does not include first time visitors.  Hopefully, this is something the Hubspot team is working on to include in the future so custom modules aren’t require for this type of thing.

Hope this helps!  Happy Coding!

Leave A Comment

Your email address will not be published. Required fields are marked *