Tracking Code Setup with Spark

Installing tracking code without development access

If you need to deploy some tracking code quickly, the process in Spark is relatively simple. This recipe will walk you through how to install some of the most common types:

NOTE whilst this is quick & easy through Spark, we recommend that this process be completed through your standard development workflow (if possible)

Google Analytics

Modification Element Value
Modification Type HTML Injection
Name GA Injection [UA-XXXXXXXX-X]
Page Group ^((?!wp-admin|wp-content|wp-includes).)*(\/?)$
Experiment? No
Parent Sector head
Position Prepend
Content Template <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxx-x"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxx-x');
</script>

Recipe Explained

Page Group

This is regex for "Everything except /wp-admin/ /wp-content/ and /wp-includes/ directories" which will stop the code being injeced into admin areas and other places you don't want it to. It goes without saying but this will not work with Magento, Drupal, Joomla or other CMS - you need to be sure you add in the correct admin directories.

Parent Selector

As Google Analytics needs to be placed within the <head> the selector is simply "head".

Position

Set to Prepend to inject this high into the head of the web page.

Content Template

This is the code which Google Analytics provides in Admin > Property > Tracking Info > Tracking Code. Copy + paste this into the Content Template field and be sure it contains the correct UA code for your analytics account.

Google Tag Manager

Google Tag Manager will take two modifications in order to successfully install.

Modification #1 - Head

Modification Element Value
Modification Type HTML Injection
Name GTM Injection Head [GTM-XXXXXXX]
Page Group ^((?!wp-admin|wp-content|wp-includes).)*(\/?)$
Experiment? No
Parent Sector head
Position Prepend
Content Template <!-- 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-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Modification #2 - Body

Modification Element Value
Modification Type HTML Injection
Name GTM Injection Body [GTM-XXXXXXX]
Page Group ^((?!wp-admin|wp-content|wp-includes).)*(\/?)$
Experiment? No
Parent Sector body
Position Prepend
Content Template <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->

Recipe Explained

Page Group

Same idea here as with the GA deployment, this page group installs it to every page on the site except the admin areas (on wordpress).

Parent Selector

Part #1 goes into the "head" and Part #2 into the "body" both as high as possible

Position

Both set to prepend here to push the code into the highest point in their respective elements

Content Template

Copy + Paste the relativel pieces of code from Admin > Install Google Tag Manager.

Google Search Console Verification

Element Value
Modification Type Content
Name Content
Page Group ^/$
Experiment? Content
Parent Sector head
Position Append
Content Template <meta name="google-site-verification" content="String_Google_gives_you">

Recipe Explained

Page Group

We are just adding this onto the homepge to keep things need

Parent Selector

Another simple addition into the "head"

Position

This isn't really relevant here, but appending it keeps it below any more important tags.

Content Template

The code that Google Search Console provides in the verification steps when you setup a new site on GSC.

Important Notes on Installing Tracking this Way

If you need to quickly install tracking code, there is no quicker way unless you are a developer with direct access to content on the server.

With the majority of web analytics tracking, it's not wise to have more than one code present on the page (otherwise your data can become polluted), so installing them via Spark needs to be something all those who have access to the site are made aware of. This is more to stop conflicts and/or duplications.

When you install tracking directly into a header file of a CMS it usually means that the tracking code is only present on the front-end of the site. Because we are using Spark it could, in theory, be injected onto ANY HTML CONTENT TYPES WITH 200 STATUS CODES. So please ensure you have thoroughly tested the page rules and then test the data your analytics accounts are receiving - the same way you would when you install any new service like this.

If you are not using Wordpress, or you just need assistance - please let us know via the support Slack channel.