How to measure WordPress form conversions in Google Analytics

If you have spent money on a website, and time and effort getting visitors to it, then you need to measure what works and what doesn’t.

Regardless of whether you are a large ecommerce store optimising sales, or a one person freelance business looking for leads, how can you work out how to spend your time and money if you don’t know what works?

As we specialise in WordPress website design services, this guide will show you how to measure website conversions, such as a lead from a website form, on your website. If you don’t run on WordPress, the principles are exactly the same, you’ll just need to install it differently depending on your CMS.

This deep dive guide is split in to chapters, feel free to jump ahead:

1. What Goals are in Google Analytics
2. How to track website form conversions as Goals
3. What Events are in Google Analytics
4. How to install Google Tag Manager and Google Analytics on your WordPress website
5. Creating an Event Tag to fire whenever somebody fills out your website form
6. Creating a Google Analytics Goal from the Event Tag

Why you need Google Analytics

If you use Google Analytics, from a basic set up you can work out where your website visitors are coming from. This on its own is useful. You can see how people are finding your website and that can help you to work out if you need to spend more effort on other traffic sources, or if you should spend more money on what is working.

Looking at Kabo’s analytics, if we click on the Acquisition tab we can see that nearly 50% of our website traffic is coming from social media. Whilst it is great that 217 new people have found us using this method, it does help us work out that we need to concentrate more on organic search and referral traffic to help other people find us.

As a new business, any traffic is great, but to grow we need to keep a close eye on these stats and check that our efforts are paying off. If we focus on growing our organic search traffic, we’ll need to check back in with analytics regularly to see if it is working.

What is a Google Analytics Goal?

A Google Analytics Goal records activities that you would like to measure. This might be submitting a contact form, making a purchase or starting a livechat.

Goals are useful as they allow you to work out which website traffic sources are converting on your website. If you are generating leads, a conversion will most likely be filling out a contact form, whilst for an ecommerce site a conversion would be making a purchase.

Once you have set up goals, even if it is just one, you can then work out your cost per lead (CPL) for your digital marketing efforts. A simple example for a lead generation website:

• You spend £100 on Facebook advertising which leads to a page with a lead generating contact form
• You spend 10 hours creating a great piece of content on another website that links back to your own website (a backlink) that also has a lead generating contact form
• You set up a goal for contact forms on your website
• Using Google Analytics you can measure which traffic source converts the most Goals
• Through Facebook you receive 12 contact form conversions, meaning your cost per lead is £8.33: £100 / 12 conversions
• Through referral traffic from your backlink you receive 20 conversions. If your hourly rate is £50/hour, then your cost per lead is £25: (£50 x 10 hours) / 20 conversions

It is a very simple example, but from this basic set up you can work out that leads from Facebook ads have cost significantly less. Obviously, the issue with advertising is that as soon as you stop, you lose those leads, while a backlink will continue to direct traffic for long after you put the effort in.

If you measured again a month later, you might find your cost per conversion from your backlink is much less as you have received more conversions during that month.

How do you track website form conversions in Google Analytics?

It used to be very simple to set up goals for website forms in Google Analytics. Website forms almost always worked by redirecting to a thank you page.

When you put your details in to a form, and clicked submit, you’d be taken to a new page with /thank-you or /success added to the end of the website URL. If you still have a website that works like this, then this guide will show you how to quickly and easily set up Destination Goals to track them.

It is becoming more common for the website form submission to refresh on the page instead of redirecting to a new page. This typically is done using AJAX, and gives a better user experience. Many WordPress form plugins now use this method.

As a website visitor, you fill out the form, click submit and then you are presented with a message in place of the form to make it clear the form has worked. You can continue browsing as you were previously, rather than finding yourself on a new page.

Whilst this is brilliant for website visitors and user experience, it makes the job of tracking conversions much more difficult for website owners. You can measure AJAX form submissions using Events and Event Goals in Google Analytics. If you are reasonably techy this can be achieved using Google Tag Manager, if not you are best off contacting a website development company and asking for their help. If you fancy the challenge, read on!

What is an Event in Google Analytics?

An Event is a user interaction with some content on your website, that can be tracked separately from the website page loading. Examples of events include downloads, video plays and AJAX embedded elements such as a website form submission. For a deep dive into how events work and the various elements that make them up, this Google guide explains it all. You can find Events in the Behaviour tab in Google Analytics.

In the example above, we’ve filtered events to show which page they occurred on and where the traffic came from. It shows that website visitors have filled out a form (the Event) on the /home, /contact and /website-design pages of the website, and that they reached the website directly and from an email signature link.

How to set up Google Analytics and Google Tag Manager

To set up Events you can either code them in directly, or use Google Tag Manager. Unless you are very comfortable with Javascript, it is probably best to learn how Tag Manager works.

Google Tag Manager is a solution to help non-developers manage the various code snippets that modern websites need to track and optimise website activity. Rather than writing and embedding the Javascript yourself, you can use Tag Manager to decide what needs to fire when an action happens and the tool embeds the necessary code in to your website to make this happen.

A tag is a code snippet which sends information from your website to a third party, such as the Google Analytics tracking code snippet. Every time somebody visits your website, the tag is fired sending the website visit information to your analytics account.

If you don’t use a tag management solution then you must add these code snippets directly to your website. That’s fine if you are just using Google Analytics, but if you’d like to track events such as video plays or AJAX form submissions, it’s worth setting up tags to make it easier to implement the various snippets.

Set up Google Tag Manager

Setting up Tag Manager is easy, just follow the steps. There is a video below to show how to follow each step with screenshots to make the process easier.

1. Sign up to Google Tag Manager
2. Create a container for your website
3. Add the container snippets to your < head > and < body > sections of your website

If you have a WordPress website, you can add the snippets using the Appearance > Editor menu, and adding it to your header.php file. If you aren’t too sure how to do this, here’s a great guide to show you how to install Google Tag Manager snippets on a WordPress website.

Some WordPress themes also have extra options to make this process even simpler. For example, at Kabo we use the Divi theme for client sites. You can add the container snippets using Divi by going to Divi > Theme Options > Integration.

Set up Google Analytics using Google Tag Manager

Adding Google Analytics to your site using Tag Manger will help you get used to how Tag Manager works. If you already have Analytics on your website, it is worth removing it and adding it again using Tag Manager.

1. Click ‘add a new tag’, then choose ‘Universal Analytics’ as your tag type
2. Leave ‘Track Type’ on the default (Page View) and from the drop down menu. Add ‘New Variable’ to add your Analytics Tracking ID. It’s worth setting up the variable now as you’ll reuse it for future tags.
3. Name your Variable, I’ve used ‘Google Analytics Tracking ID’ and input the ID from your Google Analytics account. It starts with UA-XXXXXXX. If you are unsure of where to find this, this guide will help you.
4. Select your new Variable, then click on Triggering and select ‘All Pages’. Name your new tag, we’ve used ‘Google Analytics Tracking Code’ then hit save.

Whenever you create a new tag, or make changes to existing tags, they won’t be live on your site until you publish them. Before publishing it is a good idea to preview your changes and test if it works.

Previewing allows you to visit your website and check if the tags are firing as you would expect them to. Within the main workspace in Tag Manager, click the Preview button at the top right of the screen.

Now you can visit your website and use the Tag Assistant plugin (you need to be using Chrome as your browser for this to work). Using the plugin on the Kabo home page, we can see the Google Analytics Tracking Code tag we created earlier is firing.

Once you’ve seen your tag is working as it should, you can go back to Tag Manager and publish your changes by clicking the blue Submit button next to the preview button.

Use Google Tag Manager & Google Analytics to measure website form conversions

Now that your website has Google Tag Manager and Google Analytics installed you can set up website form conversion goals in three steps:

1. Set up a tag to fire whenever your AJAX website form is submitted
2. Measure the event in Google Analytics
3. Use the event to set up a goal to measure web form conversions

AJAX website form submission tags in Google Tag Manager

For any tag to work in Google Tag Manager you need a tag, and a trigger to make it fire, just like the Analytics tag we created earlier.

Setting up a tag for AJAX form submission is a little more in depth, but with patience and a little trial and error it is manageable. The final tag looks like this:

Analytics mania have written an incredible guide to track AJAX forms with Google Tag Manager that will hold your hand and take you through every step to recreate this tag. Following the steps in the guide, you need to:

Once you have created the tag you can move on to tracking the event in Analytics and finally, creating the goal to measure website form conversions.

Tracking an event in Google Analytics

Once your tag is live on your website, you can test if it is sending through successfully to Google Analytics using the following steps.

1. Fill out your contact form to fire the tag.
2. Measure the event in Analytics by going to Real Time > Events on the left hand window.
3. If you can see the event show up, then it is all working. If you can’t, you may have some rules set up to block your IP address from showing in Google Analytics. Open an incognito window (in Chrome) and try again.

Turning an event into a goal

Now that you have set up your tag, and the event is registering in Analytics, the final step is to configure the goal.

1. Navigate to Admin > View > Goals.
2. Click the ‘New Goal’ button.
3. Under Goal Setup select the ‘Custom’ option.
4. Under Goal Description, give your Goal a name. We’ve chosen ‘Contact form submission’. For the Type, choose ‘Event’.
5. Under Goal Details fill out the Category, Action and Label fields. For the Goal to work, this must match identically to the same values in your Tag. As shown below, our Category is ‘Form submission’, the Action is ‘Submit’ and the Label is ‘Contact form’.
6. Save the goal and you are done.

You have now successfully created your Goal. To test it, you first need to close your browser, reopen and clear your cache. Or open a new incognito window. Then fill out the website form and navigate in Analytics to Real Time > Conversions. In the table under ‘Goal’ you should be able to see your new goal showing as in the example below.