Tracking code integration into WordPress with Head, Footer and Post Injections
There are many ways to embed tracking codes in WordPress websites. One of them is the Head, Footer and Post Injections WordPress plugin .So if you are not manual hardcoders, this would be a reliable and relaxed solution.
In online marketing, it often happens that many tracking codes have to be integrated into websites. There are various integration options for this . Google has developed the Google Tag Manager for this purpose , which makes it possible to install several codes collectively and to install them on the website using a single tracking code. In practice, however, it is often the case that many developers do not place the code in the head area of the website – as intended – but in the body area. The reason for this is that they do the integration directly via the respective website’s privacy plugin, which puts the tracking codes in the body of the website. This often leads to problems. Actually, Google Analytics should be integrated into the head area of the website and not in the body area. If Google Analytics is integrated in the body area, we can no longer automatically activate the Google Search Console with this account. Also, there are problems connecting Google Analytics to Google Optimize, which is a mandatory requirement for website A/B testing with Google Optimize.
On the other hand, manually integrating the tracking codes into the website’s code can be nerve-wracking as providers’ tracking codes and parameters change from time to time . This would have to be recognized manually and added each time. If something is no longer being tracked correctly, we would have to look again and again to see where this code was integrated and what was wrong with it.
A good, code-light and reliable solution for WordPress websites is the Head, Footer and Post Injections plugin. This enables a collected and easily understandable implementation of relevant tracking codes (and indeed all possible codes) in important website sections. Above all, we can conveniently embed codes in the head area and the body area. This plugin makes it easier for you to manually enter the tracking codes into the website code by docking the codes together in the right places on the website.
Manual: embed tracking codes in WordPress with Head, Footer and Post Injections
Step 1 - Install plugin
First install the plugin.
You will then find the service under:
WordPress dashboard > left menu bar: Settings > Header and Footer
Figure: In the WordPress plugin Head, Footer and Post Injections you can place your tracking codes in a practical and collected way.
Step 2 - Enter codes one after the other
You can embed whatever you want on the website. You can find the tracking codes in the dashboards of the respective service. You can then enter the codes one after the other – i.e. one below the other – in the WordPress plugin Head, Footer and Post Injections (separated by Enter).
With it you can easily install these and more applications:
- Google Analytics
- Google Tag Manager
- Google Search Console (with separate integration)
- Google Optimize
- Meta pixels
- LinkedIn Insights Tag
- Microsoft UET tag
- Hotjar
- HubSpot
- SalesViewer
Here are some examples of the relevant codes (as of 2022). Where a sequence of numbers has been replaced by an X sequence, your own tracking code should be there. You can then use these codes, once you have copied them from the relevant services, into the plugin Head, Footer and Post Injections.M
Google Analytics
Integration in the head area of the website:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
Google Tag Manager
Integration in the head area of the website:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Additional integration in the body of the website (after the opening <body> tag):
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
Google Optimize
Integration in the head area of the website:
<script src="https://www.googleoptimize.com/optimize.js?id=OPT-XXXXXXX"></script>
Microsoft UET-Tag
Integration in the head area of the website:
<script>
(function(w,d,t,r,u)
{
var f,n,i;
w[u]=w[u]||[],f=function()
{
var o={ti:"XXXXXXXXX"};
o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")
},
n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function()
{
var s=this.readyState;
s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)
},
i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)
})
(window,document,"script","//bat.bing.com/bat.js","uetq");
</script>
Step 3 - Privacy compliant integration
Then we should block delivery of the codes on WordPress sites before cookie consent – for strong privacy protection. This is effectively done with the data protection plugin Compliance . Here the instructions:
Implementation of tracking codes in WordPress
If you have problems with tracking implementation on your websites, feel free to ask:
Ask your question
info@slavawagner.de
Overview
Embed Tracking Codes in WordPress with Head, Footer & Post Injections
With the WordPress plugin Head, Footer & Post Injections you can integrate all relevant tracking codes on your WordPress website. This applies, for example, to:
- HubSpot tracking code
- Meta Pixels (Facebook)
- Google Analytics
- Google Tag Manager
- Google Ads conversion tracking
- Hotjar or Smartlook
- LinkedIn Insights Tag
- Microsoft UET tag
- SalesViewer
Ask your question
info@slavawagner.de
You might also be interested in:
Track phone number redirects from Google Ads campaigns
With Google Tag Manager you can install phone number forwarding for Google Ads campaigns on your website.
Create reports with Data Exploration in Google Analytics 4
Many report views that were preconfigured in Google Analytics 3 must be manually created in Google Analytics 4.