Integrating Unbounce with Google Tag Manager and Your Email Marketing Platform

Creating landing pages is part and parcel of digital marketing. And a tool I’ve recently started using with my clients, and for Metric Mogul, is Unbounce.

Unbounce is essentially a sophisticated WYSIWYG editor and a hosting platform for single pages, complete with sign up forms. The idea is you don’t have to hire a developer to get a page built, and can have something up and running in minutes.

But there is one problem.

The point of a landing pages is often to capture visitor details, such as first name and email. Unbounce integrates nicely with a few email marketing tools, but has no such integration with the smaller ones.

I use Vero as Metric Mogul’s data-driven email marketing tool. And lately I’ve been setting up a couple of landing pages for our soon to be released Attention Analytics product.

The plan is to drive people to the landing page, which will feature some marketing copy and a promotional video encouraging people to sign up to get some exclusive content on attention analytics and how they can implement it on their own websites.

So I spent some time getting a draft landing page up, and building a sample email flow in Vero, but got stumped trying to link the landing page form to Vero.

After a bit of playing around, I finally came up with a solution.

Google Tag Manager to the rescue

Rather than link Unbounce to Vero directly, I decided to put GTM on the landing page, and then have GTM send the sign up data to Unbounce.

My reasons for doing so were two fold:

  1. Placing the same GTM container I have on the Metric Mogul website onto the Unbounce landing page (which is hosted by Unbounce on a separate server) means that I can see the landing page stats AND my website stats within one Google Analytics property.
  2. Sending the sign up data (email and first name) from Unbounce to GTM means that I can pass it to multiple platforms in the future, should I wish. At the moment I only want to send it to my email marketing platform, but in the future I might also want to send it to another analytics system (for example KissMetrics or Mixpanel).

The process

Here’s a full description of how to go about this. It’ll work regardless of what email marketing tool you use. All you need is Google Tag Manager and an Unbounce account.

Step 1: Use a custom domain in Unbounce

Firstly, you need to do a bit of housekeeping. When you create an Unbounce account all your landing pages will be hosted on Unbounce’s domain. That doesn’t look very professional and I suggest you don’t go live with it like this.

Instead, use Unbounce’s custom domain feature. Choose a subdomain of your own site (e.g. get.metricmogul.co.uk) and use that. Follow Unbounce’s instructions, and you’ll be up and running in no time. It’s just a case of updating the CNAME record of your website’s domain, and takes minutes.

Not only will this make your page look more professional, but it is necessary in order to use Unbounce’s Script Manager feature.

Step 2: Add Google Tag Manager code

Next up, head to the Settings -> Script Manager section in Unbounce and click the ‘Add a script’ button.

Unbounce Script Manager

In the popup that appears, enter you GTM container ID (which you can find in the Google Tag Manager interface).

Unbounce GTM config

Click ‘Add Script Details’ and tick the checkbox next to the domain you created earlier.

Unbounce GTM domain

Then hit ‘Save and Publish Script’. Google Tag Manager will be deployed on your landing pages. To verify this, head into GTM and enable debug mode.

Unbounce GTM debug

Then visit the landing page. If its working you’ll see the GTM debug window appear at the bottom of the screen.

Unbounce GTM landing page

If you don’t see this window, re-check you’ve followed the steps outlined above.

Step 3: Pushing data to Google Tag Manager

The simple part is over.

Next up, we’ve got to write some JavaScript to ensure the visitor’s information is sent to Google Tag Manager when the form is submitted.

There are 3 approaches I could take to achieve the goal:

  1. Use the built in form submit listener in GTM, and write custom JavaScript within GTM to extract the information from the submitted form. Downsides are complex JavaScript that could easily go wrong if the landing page HTML changes in the future.
  2. Unbounce sends the submitted data to the confirmation page as URL parameters. Use GTM to extract these into custom variables for use in tags.
  3. Extract the form data from the URL parameters on the Unbounce confirmation page, and then send it to GTM using the data layer.

I’ve chosen option 3. I try where ever possible to use the dataLayer as a data conduit, and keep the code within GTM as simple as possible.

Open your landing page, and click the ‘Form Confirmation Dialog’ tab to access the page that will be shown to your visitor once they submit the form. If you are using your own, custom URL for your confirmation page the JavaScript below will still work, you just need to put it directly on your page rather than using Unbounce’s interface.

Unbounce scripts

Once open, click the ‘JavaScripts’ button at the bottom of the page and click ‘Add new JavaScript’ to bring up the scripts editor.

Unbounce GTM setup

Then click the ‘Add Script to this Variant’ button and enter ‘Form Submitted’ in the name field.

Unbounce GTM integration

Drop the following JavaScript into the page:

Code breakdown:

  • Lines 2-15: Defines a function to help extract query parameter values from the URL.
  • Line 17: Grabs the email data from the query parameter.
  • Line 19: We don’t want any JavaScript errors, so do a quick check to make certain Google Tag Manager is on this page, and the email value exists.
  •  Line 20: Push a ‘formSubmitted’ event to the dataLayer. This allows tags to be triggered when the event is seen.
  • Lines 21-28: I pass four parameters to GTM along with the event. The first two indicate the name and ID of the form. Why? Because if I am split testing two landing pages, or have multiple pages submitting forms I want to know where the event came from. The second two are the email and first_name of the user which we grabbed from the URL parameters.

Step 4: Google Tag Manager setup

We are now in the following situation:

  1. Someone lands on our page and submits the form.
  2. The confirmation dialog opens.
  3. Their first name and email are stripping from the page URL and sent to GTM via the data layer, along with a custom event.

Next, we need to configure GTM to listen for the ‘formSubmitted’ event, and also some variables we can use within tags.

Create 4 variables within GTM as follows:

Variable one (first name)

  • Name: dl.user.first_name
  • Type: Data Layer Variable
  • Value: user.first_name

Variable two (email)

  • Name: dl.user.email
  • Type: Data Layer Variable
  • Value: user.email

Variable three (form name)

  • Name: dl.form.name
  • Type: Data Layer Variable
  • Value: form.name

Variable one (form ID)

  • Name: dl.form.id
  • Type: Data Layer Variable
  • Value: form.id

Here’s a screenshot of one of them for reference.

GTM user variable

Perfect! Next up, create a trigger which will fire when GTM receives the formSubmitted event sent from the Unbounce confirmation page.

GTM Form Submitted

I use a customised naming convention for my tag and trigger names. Feel free to name however you want. The important thing is that you remember what the trigger is called.

As this point, you can either make a general trigger which fires on any formSubmitted events. Or you can choose to use the dl.form.id variable to be more specific, as I’ve done in this example. (Remember, this form ID variable is set by you in the data layer on the Unbounce confirmation page — line 23 in the JavaScript above.)

The final step, is creating a tag to fire when this trigger activates and send the email and first name data to the email marketing tool of your choice, in my case Vero.

Create a Custom HTML tag, with the following settings.

GTM Vero integration

Within the HTML text area input JavaScript that corresponds to your email marketing platforms API. The above is how I do it for Vero.

  • The first few lines identify the user in Vero so they will be tracked if they ever return to the website (in much the same way Google Analytics does).
  • The middle portion of the code assigns some tags to the user, so they can be easily segmented within Vero.
  • The final few lines send an event to Vero (again, very similar to the way Google Analytics does it). This is so that I can send out behavioural emails based on a user’s actions. For example, after they sign up I can send the initial video. After 3 days if they haven’t watched the video (which I know because I would fire a ‘Video Watched’ event) I could send a reminder video. This is just one example of moving away from the monthly newsletter approach and towards personalised email communications that help move people from visitor to prospect to customer to repeat customer.

Your code will vary, but the main point is to ensure the tag is set to fire on the trigger you created in the earlier step.

Summary

And that’s it! A neat way to integrate Unbounce and your own email marketing tool by using Google Tag Manager.

The benefits are that you can keep your tagging logic out of Unbounce and in GTM where it belongs. The code on the Unbounce pages is purely to get information into GTM. GTM decides what to do with it.

If you are interested in hearing about how we could help your business generate more leads and convert more visitors into sales using data-driven email marketing, get in touch and we’d be glad to help out.

Ed Brocklebank is the founder of Metric Mogul, a digital analytics consultancy. He helps business of all sizes become more data-driven through marketing technology. He runs training for General Assembly London on Google Analytics and Google Tag Manager.