Before the Basics – Why it is so Important
Even before you begin thinking about marketing your business online, there are several tools that you need to have in place to be able to successfully track and analyse your website. In fact, this should really be taken into consideration at the development stage of your site to ensure all elements are in place from the very beginning which will enable you to have the clearest picture, right from the onset.
An Essential Digital Marketing Tools List
Before we go into the explanations for each check, website tracking tool, or code that you should implement on your site, here is a checklist that you should take with you to the meeting with your developers and/or marketing team. Some of you may know some, or all of these, but it never hurts to have a reminder of them and an explanation of exactly how, and where they should be.
- User Tracking and Script Management
- Google Tag Manager
- Google Analytics
- Website Health
- Google Search Console
- Site Speed
- Paid Advertising
- Google Adwords Scripts
- Facebook Pixel
- Testing & Analysis
- Google Optimize
- User Journey Tools
Website Visitor Tracking Tools & Script Management
It is important to set up a method for tracking users on your website, how they got to you as well as what they do once they visit your website, and when and why they leave. This section isn’t the only one where we can determine why users leave your site or what they do once they are there, but, Google Analytics specifically, will give you all the information you need, in order to make smart decisions about improving your website if it is set up and the information is analysed correctly.
Google Tag Manager Implementation Guide
Starting with Google Tag Manager implementation. This tool is free and allows you to asynchronously load multiple different scripts on your website (not just Google’s) without the need to hardcode them into the html of your pages, this has three main benefits:
- It keeps the code off your pages and gives you more control over where and how it is being displayed.
- The code is loaded asynchronously which means that it will minimally effect the page load time (which is a Google ranking factor).
- There is no need to ask your developers every time you want to add, or remove a script from a page or pages, as it can be simply done, and tested through Google Tag Manager before deploying the code.
To ensure that Google Tag Manager is correctly installed on your site, you simply have to add the code that you are given upon signing up to each page on your site (this part, you can ask the developers to do). If you are using WordPress, you can simply install the plugin called DuracellTomi’s Google Tag Manager for WordPress and put in the GTM Container ID (image 1) into the settings (image 2). In the settings of the plugin (image 2), select the codeless injection (never had any problems on the 150 or so WordPress sites we’ve personally worked on) and click, save changes. So, if you have WordPress, you are now done with the implementation of the Google Tag Manager Code on your website.
In order to manually install the Google Tag Manager code, you will need to place it in two locations on every page of your site, the first place is as high up in the <head> part of the code as possible and the second, immediately after the opening of the <body> part of the code. You will have an option to copy and paste this code so that no mistakes are made.
Google Analytics Implementation Guide
Now that we have Google Tag Manager set up, we’ll move onto Google Analytics implementation. Google Analytics is probably the most important tool in your arsenal to track how you are acquiring and retaining your users, what they are doing on your site (if set up correctly), ecommerce tracking, and much, much more!
Once you set up a free account with Google Analytics, you will again, be given the code to install on each page of your website, however, since we have Google Tag Manager set up, we do not need to implement the code directly on the site, nor do we have to copy and paste this code anywhere, as with Google Tag Manager, all we will need, is the Tracking ID which can be found in the property settings under Tracking Info > Tracking Code (Image 4 and Image 5).
You will then take the tracking ID and choose to add a new tag to your website. You will then choose the Google Analytics – Universal Analytics (GA UA) option and under Google Analytics settings select new variable, enter the Tracking ID into the input field, name the variable GA UA or similar and click save. Then, click triggering and choose all pages. Then name the tag Universal Analytics – Pageviews or similar.
You are now set up with basic Google Analytics tracking, which, isn’t basic at all. In future articles, we will cover other aspects and reporting within Google Analytics for you to discover and analyse your traffic.
How to Check Website Health
Google Search Console Implementation
Google Search Console is an important tool for any webmaster or website owner to have on their website. This is another tool that is free to use and can give you great insights into how Google sees your website, issues they find with regards to technical aspects, indexation of your website, content, links and more.
You can verify Google Search Console in a number of different ways, the easiest is through Google Analytics. Once you set up an account with Google Search Console, you will be asked to verify your website property.
How to Check Your Site Speed
There are many plugins for WordPress that can assist with website speed and I could write all day about all the different elements that you need to take into consideration when looking to speed up your website, from code bloat to image optimization and css to server load. However, that is for another article, or many articles. For now, we’ll tell you about a few website performance tools that can help you assess your site speed and one or two that can help you implement some of these changes on your own. Please note that site speed is becoming more and more important as time goes on, specifically with one of Google’s more recent updates and their shift to Mobile First.
Aside from Google’s update however, we are strong believers that it is important to provide your users with the best possible experience when they visit your site and that means, the pages should load fast. By all accounts, you have approximately 7 seconds to capture a users attention before they bounce off your website in sheer desperation that they didn’t find the information they wanted to consume fast enough!
So, back to site speed. First, you can test your website speed with multiple tools, including Google Search Console. Simply put in your URL into the Console and click the return key. This will not only give you some information on speed and mobile usability, but it will also tell you if the page can be accessed by Google’s spiders. However, it isn’t the most comprehensive tool in terms of actionable items. For more action items from a speed perspective, head over to one or more of the following tools and test your pages there. Be sure to test multiple pages of your site and not just the homepage, as every page on your site has different resources on it and/or can call on different resources whilst it is loading, depending on the content of the page.
- https://gtmetrix.com/
- https://developers.google.com/speed/pagespeed/insights/
- https://search.google.com/test/mobile-friendly
- https://tools.pingdom.com/
- Google Analytics – Behaviour > Site Speed
It is important that your website is hosted using a good hosting provider, don’t use cheap services such as a shared server. You wouldn’t want to live in a bad neighbourhood, don’t put your online business in one. Choosing a good hosting provider will not only ensure that you have good uptime, but it will also guarantee that your website doesn’t live on the same server as other questionable websites. If you have a lot of traffic, or aim to have, then being on a shared server can cause bottlenecks and website downtime.
Paid Advertising
Both Google Ads Scripts and Facebook’s Pixels can be added through Google Tag Manager. We will cover both of these in more details in future articles to give you more control and features, but for now, we’ll start with the basic setup for each one.
Google Ads Tags Implementation
There are two tags for Google Ads that you can add via Google Tag Manager’s featured tags. Google Ad Conversion Tracking and Google Ads Remarketing. We’re going to assume that you already have Google Adwords set up and configured and take you through the tag setup on Google Tag Manager.
For Google Ads Conversion Tracking, you will enter the relevant information from Google Adwords (image 6) in the appropriate boxes in Google Tag Manager (image 7). This tutorial will take you through a simple “thank you page” style conversion.
To set up a conversion in Google Adwords, go to Tools > Conversions and click the plus to create a new conversion and follow the steps. Then, go the the Use Google Tag Manager tab to find the information needed.
Once you have put all the information from Google Ads into Google Tag Manager, click on triggering and click the plus sign in the top right corner. Then, select Page View > Some Page Views. Then, choose Page URL > contains > thank-you or whatever your thank you page URL is (Image 8).
Then name your trigger, thank you page or similar, click save, name your tag appropriately and click save, submit, publish. Done.
The next tag you want to create is for Google Ads Remarketing, this is important, even if you are not setting up ads yet as you can start building lists of users to remarket to, once you do decide to get the ball rolling.
In Google Ads, go to Tools > Audience Manager > Audience Sources (on the left). Then click set up on Google Ads tag and scroll do tag setup and click on Use Tag Manager. Copy the conversion ID into the Google Ads remarketing tag and complete the setup, save, submit, and publish. You are all set to start setting up your remarketing lists.
How to Implement Facebook’s Pixel
To publish the Facebook pixel to your site, you have to do this with a Custom HTML tag in Google Tag Manager. Simply copy and paste the code from Facebook into the section in the Custom HTML tag in Google Tag Manager and trigger it on all pages. For more in depth uses of Facebook’s pixel you can read Facebook’s guide here.
Website Performance Testing & Analysis
Google Optimize
You guessed it, this is another free tool from our friends at Google. Google Optimize allows us to create tests on our website, without the need to change the designs, have developers implement several variations of the page or ask them for any help at all. This will give you the ability to change design elements of your site on the surface, before jumping straight in changing them through the code. This allows you to first test and prove the change to yourself and colleagues that it is the right move. Once you install the Google Optimize script through Google Tag Manager, you can change elements on any page of your site you want with ease!
There are several tests you can run, we are going to set up an a/b test in this tutorial (Image 9).
The first thing that you will want to do is add the page hiding snippet to the top of the <head> code on every page of your website. You can do this through a plugin if you use WordPress, or simply ask your developers to put in the code. Do NOT try to publish this code through Google Tag Manager as it will not work. The reason that you should add this code to your site is to avoid a page flicker, where users will see the original version of the page and then the test variant which can lead to confusion.
<!– Page-hiding snippet (recommended) –>
<style>.async-hide { opacity: 0 !important} </style>
<script>
(function(a,s,y,n,c,h,i,d,e){s.className+=’ ‘+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(‘ ?’+y),”)};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,’async-hide’,’dataLayer’,4000,
{‘GTM-XXXXXX’:true});
</script>
Please note, that if you are using Google Tag Manager to implement the Google Optimize code, as shown below, then the GTM code above should be your GTM container ID and not your Google Optimize ID. If you are implementing it directly in the code, then use your Google Optimize container ID.
Creating the Google Optimize Tag should be done next, simply add your Google Optimize ID into the input field and do not add any firing triggers (Image 10). Then click save.
Then, head over to your Google Analytics – Pageview tag that you created earlier and click on Advanced Settings. Under Tag Sequencing click on Fire a tag before Google Analytics – Pageviews fires and choose the Google Optimize tag (Image 11).
Then click save, submit, and publish. You should then head over to Google Optimize, connect Google Analytics and you are now ready to start creating tests. For each test, it will verify that the code is implemented correctly before publishing, so you will know if there are any issues before you begin.
The great part of Google Optimize is the seamless integration with other Google products such as Analytics, Ads and more so you can even to a/b testing on your landing pages for paid advertising.
User Journey Tools
I’ve been rambling for a while now, so I’m going to keep this section short. There are many, many tools out there that can help you visually see the user flow of your website visitors, either, individually, or at an overview level.
These tools are specifically interesting when you are trying to analyse a specific goal or event that you want users to conform to. Our advice for these tools is not to set it up on every page of your site, but pick a few goals that you want to track specifically, and start by analysing and fixing any issues you see there. This way, you can keep your focus on what you want to achieve rather than trying to find something in all the data, which can be overwhelming.
Also, please be sure to check the effect on page load time when using these tools, as some can have a larger impact than others, depending on your website setup, server, and other elements.
Most of these tools have a free version, as well as a paid one. So, you can always start small and grow as you need.
- HotJar
- Clicktale
- Crazyegg
- Mouseflow
- LuckyOrange
- Inspectlet
- Yandex Metrica
- userTrack
- Seevolution
Once you have all the above set up, the real work begins, analysing the data and making improvements to your website in order to ensure your users have the best experience possible when visiting your site, from any device, and are finding the information they are looking for, whilst following the process on the site that you want them to follow.
Wrapping Things Up
Once you start setting things up, you’ll most likely find that it isn’t as complicated as it might seem. However, remember that proper implementation is crucial for accurate analysis, and therefore your overall website potential. So, if you have any doubts, or having difficulty with the implementation, don’t hesitate to hire a professional digital marketing service to help you and educate you along the way.
