How to Set Up Conversion Tracking For Your Website
What is a marketing conversion?
In marketing, a conversion is when someone completes an action on your site that is considered a sale, or close to a sale for your business. Ultimately you need to choose what counts as a conversion for your business. For some, this could look like a website visitor making a purchase, registering for an event, booking an appointment or sales call, or signing up for a newsletter.
What is conversion tracking in digital marketing?
Conversion tracking is when you set up ‘event tags’ using Google Tag Manager on your website to track any time a visitor completes one of these conversion actions. You can then set up these Google Tag Manager event tags as ‘conversion’ events in your Google Analytics account. You can also link your Google Analytics conversion events with your Google Adwords account in order to help create ads optimized for conversions. If you do not take the steps to set up conversion tracking, then this data will not automatically be created, and you will have no sense of how effective your campaigns or website are.
Why should I set up conversion tracking for my business?
It is important to set up conversion tracking for your site because then you can actually measure how effective your marketing campaigns are. Sure, you want to grow the website traffic to your site, but you also want to know how many of those website visitors are actually going to become clients/customers. Once you add conversion tracking to your site, you can see how effective different marketing channels are (are my visitors from Instagram buying from me more than my visitors from emails?), different geographic regions are, or even if certain pages are convincing people more than others. Without setting up conversion tracking you are just guessing all of these things and possibly wasting time, money, and effort.
How do I know what conversion to track for my business?
You should try to choose the closest action a visitor could take to creating a sale for you as your main conversion. For some websites, this might be an actual purchase or registration for an event. For other websites, you may need to qualify a lead before they purchase something from you so your closest action to a sale on your site might be someone who decides to book a sales call with you or fill out your contact form.
Some example conversions you might want to track could be:
Purchasing a product
Registering for an event
Booking a sales call
Submitting a contact form
Signing up for your newsletter
Something unique to your business!
It can also be really helpful to choose what someone completing that action is worth to you monetarily. For example, if I sell SEO technical audits at around $1000.00, and someone books a sales call for an SEO technical audit, how much is that sales call worth to me? If 100% of people who booked a sales call bought the audit, then the sales call is probably worth $1000. But let’s say it was only 50% of people who booked a sales call that bought the audit afterward – then that action is probably only worth approximately $500.00 to me. (These are all fake numbers I am just using as a simple example by the way). Either way, getting a sense of how much that conversion is worth to you will help you make some important decisions later on.
How To Set Up Conversion Tracking On Your Website
Feel free to jump to a section if you are a step ahead using these quick links:
How to set up Google Analytics (GA4) and Google Tag Manager
To finish the rest of this tutorial you will need to have Google Analytics set up for your website. It is free and necessary for tracking marketing data to ensure the success of your business.
Please note there are a few different versions of Google Analytics out there, and we are going to be using the most recent version (GA4) in our examples. The older version of Google Analytics is ‘Universal’ and before that ‘Basic.’ If you have an older version of Google Analytics set up then you can always add a G4 dashboard to your account by going into your ‘Admin Settings’ in the left-hand panel and clicking ‘GA4 Setup Assistant’ under the ‘Property’ panel.
Where to find GA4 Setup Assistant in your Universal Google Analytics dashboard
Once you have set up Google Analytics, you will also need to make sure that you have properly set up Google Tag Manager for your site to be able to add custom event tags and your GA4 configuration tag for your site.
Once you have both a Google Analytics (GA4) account and a Google Tag Manager account for your website, you need to install your Google Tag Manager script onto your website. Go to the ‘Admin’ section of your Google Tag Manager account and select the ‘Install Google Tag Manager’ menu item for your website container settings.
Follow the instructions on that page for copying and pasting the two codes into the proper <head> and <body> sections of your website. If you have a Divi WordPress site you can copy and paste these codes in the ‘integration’ section of the Divi settings.
Once you have the Google Tag Manager scripts properly installed on the site, you will need to set up a ‘GA4 Configuration tag’ in your Google Tag Manager account.
Go to your Google Analytics (GA4) account, select ‘admin’ settings, and select the ‘data streams’ menu item. Select your website’s data stream from the list. If you do not have a data stream already set up you will need to do so. If that is the case, click ‘add stream’ and select ‘web’ for a website. You only need one data stream for your site.
Once you have opened the data stream page details, you should see at the top right corner a ‘measurement ID’ number. Copy the number for future use.
Open up your Google Tag Manager account, and select your website’s workspace and container.
Click ‘Add New Tag’ and name it GA4. For the ‘Tag Configuration’ select the ‘Google Analytics: GA4 Configuration’ tag and add and paste the ‘measurement ID’ number that you copied from your Google Analytics account. For the ‘Triggering’ setting select ‘All Pages’ and save and publish the new tag.
Setting Up Conversion Tracking For Your Website: Create a Custom GA4 Key Event Using Google Tag Manager
Jump to the tutorial for the conversion action (GA4 Key Event) you want to set up:
How to set up conversion tracking when someone clicks on a button
How to set up conversion tracking when someone sees a success message after filling out a form
Setting up a Custom GA4 Event in Google Tag Manager For When Someone Clicks a Button On Your Website
For this tutorial, we are going to be setting up conversion tracking for the “book a call” button on the bottom bar of the Boop Digital website.
Log into your Google Tag Manager account and click ‘add new tag’ for your website’s workspace/container. Let’s name the new tag for this example ‘book a call button click’
Choose the ‘Google Analytics: GA4 Event’ tag type.
Once you have selected the ‘Google Analytics: GA4 Event’ you will need to select a few settings. For the ‘configuration tag’ either select the ‘Google Analytics: GA4 Configuration’ tag we set up in the earlier step from the list, or if you didn’t use Google Tag Manager to create a GA4 Configuration Tag then you can choose the selection ‘None – Manually Set ID’ and then enter your ‘Measurement ID’ number from your Google Analytics data stream details. In this example, I selected my configuration tag (which I named GA4).
Enter your event name. For this example I entered ‘book_a_call_button_click’ It is important to note that for consistency sake we always use only lowercase letters and underscores instead of spaces when dealing with any kind of custom event Google syntax.
Click on the ‘Event Parameters’ settings and click ‘Add Row.’ We will need to add a ‘Parameter Name’ and a ‘Parameter Value.’
Enter the ‘Parameter Name’ into the field as ‘button-name’ (Take note we are still only using lowercase letters and underscores instead of spaces).
To add the ‘Parameter Value’ click the ‘+’ button beside the field to select a pre-created value type by Google. Choose the pre-created variable ‘Click Text’ (you may need to expand the list of pre-made variables by selecting the ‘built-ins’ option at the top right corner.
Next, we will need to set up the ‘trigger’ settings for the event. Click the ‘triggering’ box below and click the arrow in the top right corner of the list page that shows up so that you can create a new trigger.
Name the new trigger. In this example, I name the trigger ‘Check For Book a Call Button Click.’
Choose the trigger type ‘Click – All Elements’
Choose the option for ‘this trigger fires on’ for ‘Some Clicks’ (versus the ‘All Clicks’ option)
For the section that reads ‘Fire this trigger when an Event occurs and all of these conditions are true’ choose the following conditions/fields (in this order):
‘Click Text’
‘Contains’
Type in your button text. For this example, I typed in ‘Book a Call’
Click ‘Save’ to save the trigger and make sure to save the event. You should have the event and trigger properly set up now!
Before we publish the new event tag and trigger we are going to test it to make sure that it is firing properly. Navigate to your ‘Tags’ dashboard in your workspace to see the list of all the tags you have created. In the top right corner click the ‘Preview’ button to start running the test.
Once you have tested that the tag works using the Google Tag Assistant feature, you can press ‘Submit’ to publish the new event tag tracking for your site! Then the next step is to log into your Google Analytics account and set up the event tag being triggered as a ‘conversion’ event on that platform. So refill your coffee and let’s keep learning!
Setting up a Custom GA4 Event in Google Tag Manager For When Someone Gets Redirected To a New Page On Your Website After Filling Out A Form
For this tutorial, we will set up a custom GA4 event for when someone visits the ‘Thank You’ page after submitting a form on a client’s site. You can do this setup with any sort of action a website visitor takes where they would get redirected to another URL on your website afterward.
To set up the GA4 Event Tag in Google Tag Manager (GTM) follow these steps:
Create a new tag, select the ‘Google Analytics: GA4 Event’ tag type and copy and paste your GA4 Measurement ID number in the ‘Configuration Tag’ field (like in the tutorial in the section above)
Create 2 event parameters. Name one ‘event_name’ and make the value ‘page_view’ and name the other event parameter ‘page_location’ and make the value the end of the Page URL that the confirmation page exists at. In this example, the confirmation page is located at www.examplewebsite.com/thankyou
Create the trigger in the same way as the tutorial in the section above. And set it with the following conditions:
Choose the ‘Click – All Elements’ built-in option and set the trigger to fire when the ‘Page URL’ contains (or you might need to choose matches RegEx) and the character value of the confirmation page URL. In this example, we took the fake confirmation page ‘www.examplewebsite.com/thankyou’ and made the trigger Page Value to be set to ‘thankyou’
Setting up a Custom GA4 Event in Google Tag Manager For When Someone Sees a Success Message On The Same Page After Filling Out a Contact Form
In this case, when a user submits your lead form it does not redirect to a thank you page, but instead, shows a success message on the same page. Many forms are set up this way such as the popular Elementor WP plugin and theme’s native form builder. In some cases, you can use AJAX tracking for these types of forms, but for Elementor forms this method does not work so you must use the method below:
Log into Google Tag Manager and set up a ‘Element Visibility Trigger.’ You can do this by selecting Triggers > New > Choose “Element Visibility” trigger that looks like this:
The ‘Element Visibility’ trigger in Google Tag Manager allows you to trigger a GA4 event based on an element of the webpage becoming visible (such as a success message). To target the ‘success message’ element you will need to inspect the website code you are working with for either a unique CSS class or ID for the message. To do this, navigate to the webpage in a Google Chrome browser, right-click and choose the ‘inspect’ menu option to pull up the code inspector tool. Click the hover tool icon in the top-left corner of the inspect window and hover over your success image. This will scroll the code within the inspect tool window to the section that includes the success message code. In the example below we can see that when I hover the success message it takes me to the div class “elementor-message elementor-message-success.” It also appears that in this example there is no unique ID for this element, so we will need to use the CSS class option to target it. Copy and paste the CSS class to use in the Google Tag Manager trigger.
In your ‘Element Visibility’ trigger you are setting up you will select either a unique ID or CSS Class. In my example, we will be selecting the CSS Selector option because the success message only had a unique CSS Class and had no ID. I then need to paste the copied CSS class or ID into the field called ‘Element Selector'.’ Keep in mind you will need to reformat the CSS selector in the Google Tag Manager field. It is not formatted properly when you just directly copy and paste it from the code. If you are not familiar with the intricacies of CSS Selectors here is a complete guide on CSS Selectors and Google Tag Manager. In my example below I have reformatted the CSS Selector to be .elementor-message.elementor-message-success and entered that into the ‘Element Selector’ field in Google Tag Manager.
You will want to select the option of ‘Once per page’ if you only want to track the conversion once per user. However, if you have multiple forms on a page, you may need to select the ‘every time an element appears on screen’ option. In my example, I had to choose the ‘every-time’ option because there was an email form at the bottom of the page that used the same success message mechanism. So if I had chosen the ‘only once per page’ option I may have missed out on tracking conversions of people who had also signed up for the newsletter. Make sure to also check the box for ‘Observe DOM changes’ to make this trigger work.
Once the Trigger has been tested, I create a new ‘Tag’ in Google Tag Manager called ‘Lead Form Submission.’ I use the lowercase and underscore event naming conventions to call the ‘Event Name’ ‘generate_lead’ because this is what Google suggests when naming a lead form submission event.
As per usual, you will want to make sure this event works by using the debugging option in Google Tag Manager. Go to your workspace and click ‘Preview’ to test the new tag and trigger by entering the URL, completing the action on the live site, and going back to the debug window to see if the tag and trigger fired properly. If they did you are ready to go and can click ‘Publish’ on the new changes.
Setting Up Conversion Tracking For Your Website: Adding Your Google Tag Manager (GTM) ‘Custom GA4 Event’ To Your Google Analytics Account
You will need to configure conversion tracking for when someone completes the event on your website that you just set up in Google Tag Manager.
This will be done by creating an ‘event’ in your Google Analytics dashboard. There are many different types of events (and ways to track conversion for that matter) but we are going to talk about only one type in this particular article: the event type when someone ‘clicks’ something (like your button).
You need to complete the steps in the above section to set up an ‘Event Tag’ and ‘Trigger’ in your Google Tag Manager account before you start these steps. Once that is complete, log into your Google Analytics account. We will be showing screenshots from GA4 only. To convert your Google Analytics Universal account to a GA4 account follow the steps provided directly from Google.
Let’s configure your event tracking in Google Analytics:
Choose the ‘Configure’ option in the main menu on the left side of your Google Analytics account
Choose the ‘Events’ option and click the ‘New Event’ button in the top right corner, or the ‘Create’ button. You will need to choose the ‘event_name’ option and then copy and paste the event name from Google Tag Manager exactly as it appears (make sure all the capitalization and underscores remain exactly the same in Google Tag Manager, Google Analytics Event, and Google Analytics Conversion Event).
Setting Up Conversion Tracking For Your Website: Setting Your Custom Event As a ‘Conversion’ In Your Google Analytics Account
After you have created the ‘Events’ in your Google Analytics account you will need to set up the ‘Conversions.’ To do this, head to the ‘Conversions’ menu option and click ‘New Conversion Event.’ You will need to copy and paste the event name (make sure all the capitalization and underscores remain exactly the same in Google Tag Manager, Google Analytics Event, and Google Analytics Conversion Event).
Setting Up Conversion Tracking For Your Website: Adding The Custom Event Parameters (You Set Up In Google Tag Manager) As Custom Event Parameters In Your Google Analytics Account Too
You must remember to do this step because setting up the ‘custom event parameters’ in your Google Analytics accounts allows your conversion tracking to show up in some of Google Analytics’s reporting features such as funnels, free-form reports, and some standard reporting features. If you skip this step, the conversions will not show up in these places.
In Google Analytics 4, go to Configure > Custom Definitions. Create a new custom definition and copy EXACTLY (capitalization, spacing, everything matters here) the ‘Event Parameter’ name from the custom event details you created in Google Tag Manager (GTM). So in the example below, I would copy the Event Parameter ‘button_name’ found in my Google Tag Manager account to create my custom definition in my Google Analytics account.
So grab that parameter name from your Google Tag Manager (GTM) and head over to your Google Analytics account and click the Create Custom Dimensions button and then enter:
The name of the parameter from Google Tag Manager (GTM)
Set the ‘Scope’ as the Event option
Copy the Event parameter from Google Tag Manager exactly as it was
Then just press save and you are ready to go!
Setting Up Conversion Tracking For Your Website: Adding Your Custom Events As Conversions To Track In Your Google Adwords Account Too (Optional)
By default, your Google Adwords account will not automatically track your conversions. If you are advertising using Google Adwords, then use this tutorial to connect your Google Adwords and Google Analytics accounts, and set up conversion tracking in your Adwords account so that you can properly and automatically optimize your advertising for getting more conversions on your website. Here is the tutorial on How To Connect Your Website Conversion Tracking To Your Google Adwords Campaigns.
How To Set Up Conversion Tracking in Google Analytics For A Squarespace Site
Once you have properly set up your Google Analytics account and connected it to your Squarespace site you can set up custom events to track conversions.
Once you have Google Analytics properly connected, you can go ahead and create a Google Tag Manager account and connect it as well by inserting the provided code into the header and footer of the site via the Settings > Advanced > Code Injection panel in Squarespace.
You can then create custom events using the same steps above in Google Tag Manager and Google Analytics (GA4).
Hire help setting up your custom conversion tracking
If this is something that would like us to help you out with, you can book a sales call with me using this link.
