Personalization is increasingly being used on websites to provide customized experiences for visitors.
This has led to the rise of user-friendly personalization platforms like Mutiny, AB Tasty and Google Optimize to give marketers the tools they need to provide hyper-targeted user experiences for their visitors.
Gradually these kinds of tools are becoming something that a web team has to have in their arsenal to compete in the modern era of the web.
At Webstacks, we use Gatsby.js as the framework to power the frontend of our website. So if you hop over to webstacks.com, you’ll be entering a Gatsby-powered website that serves personalized content via HubSpot and Google Optimize. Here’s what it looks like for me:
Wait, how did that happen!? How does it know who I am?
Why Webstacks migrated to Gatsby
Okay, let’s start from the beginning. We’re a digital agency, so we figured we should invest in improving the experience of our website.
We wanted pages to load faster while providing our marketing team with the tools they needed to build out new pages without the need of tapping into our engineering team. We chose Gatsby for the fast performance of the sites it powers, impressive out-of-the-box optimization features, and friendly developer community. (You’re here on the Gatsby blog, so hopefully you know a bit about it.)
We’re glad we went with Gatsby. But sometimes, we found ourselves missing a feature from our previous CMS, HubSpot CMS — the out-of-the-box support for personalization with data powered by HubSpot CRM.
After spending a few hours sifting through HubSpot’s API and tinkering with Gatsby Cloud Functions, we found a solution. It involved tying together three technologies:
- HubSpot – For this to work we needed to take advantage of HubSpot’s hubspotutk. This is the cookie that keeps track of a visitor’s identity. It is passed to HubSpot on form submission and we will later use this to retrieve additional data about our visitors.
- Google Optimize – Google Optimize will serve as our personalization platform that allows our marketing team to create personalized experiences for our visitors.
- Gatsby Cloud Functions – Because HubSpot’s Get a contact by its user token endpoint does not support CORS, we will take advantage of Gatsby Cloud’s serverless functions to interface with HubSpot to get the required data.
Here’s how it works.
How We Built Personalization Into Our Gatsby Site
Step 1: Retrieve your visitors HubSpot user token. We are retrieving the uniquehubspotutk cookie value and storing it in a variable called hubspotutkCookie.
We wrap this in useEffect because it’s client-side code — it references the document global. We want it to run in the user’s browser on page load, not on the server during build time.
Step 2: Create a Gatsby Cloud function to pull data from HubSpot
Next, we’ll go ahead and create a getContact.js file in src/api/. With Gatsby Functions, JavaScript and Typescript files in src/api/* are mapped to function routes just like files in src/pages/* become pages.
This is how will retrieve our contact data from our visitor. In the example above GATSBY_HUBSPOT_API_KEY is an environment variable we are using to store our HubSpot API Key. req.body.hubspotutkCookie is a prop that passes through our hubspotutkCookievalue. We’ll touch on this next.
Step 3: Retrieve data on our frontend and storing it in local storage
Good client-side personalization often relies on clever use of localStorage— and this is no exception. (If you’re not familiar, localStorage is basically an object that can be used as a key/value store and persists across browser sessions; here’s the MDN article.)
In the example above we are storing our visitors’ first names in a localStorage item calledhs_contact_firstname. We will later be able to retrieve this data to personalize via Google Optimize.
Step 4: Personalizing content with Google Optimize
Now that we have our contacts’ first names stored as local storage we can use this to run a personalization via Google Optimize. Feel free to get creative with the data you are pulling from HubSpot – there is so much you can do.
The first thing to do — open Google Optimize and create a new personalization experience.
Step 5: Select the block of text you’d like to personalize and click Edit HTML.
Add an empty span with a unique id to represent the variable that you will be using to personalize your experience.
Here’s an example:
Now, click the “add code” button in the top right corner of Google Optimize, select “Global Javascript”, and insert the following snippet:
The above snippet will pull take the value that we have successfully saved in our local storage in the previous step and replace our empty span with that value.
Step 7: Set proper audience targeting
The last step is to ensure we are only showing this experience to visitors that have their first name on their contact record in HubSpot. In Google Optimize, in the audience targeting section, add a new rule with a rule type of Custom JavaScript. Configure a new function with the following snippet:
The function above returns the value that we have stored for our visitors’ first names. The next step is to ensure that the rule does not equal “null”.
Naturally, all contacts that have not provided their first name will have a value of “null”, so this will ensure our personalization is only served to those visitors who have shared their first name with us.
That’s it! You now have a fully functioning personalization engine powered by HubSpot, Google Optimize, and Gatsby Cloud Functions:
(Note: this was cross-posted from the Webstacks blog: How to Personalize your Gatsby Website with Google Optimize, HubSpot, and Gatsby Cloud Functions)