Adding Google Analytics using Publish

For regular front-end dev this is a quick fix. Just add some scripts to your head and you can be on your merry way. But if you are a Swift developer playing with publish, it's a bit different. Still quite easy though.

So you have your Publish-made website ready to go but now you want to track some stuff with Google Analytics or another analytics website? This quick tutorial should help out!

If you have some front-end experience it will definitely be helpful and easier as you are aware how these scripts are constructed. But for someone like myself (first ever language is Swift), it can be a bit confusing. Publish is an awesome tool that helps us create a website in a jiffy, and we can use standard HTML tags no problem. But scripts are a bit of a different beasts and it took me some trial and error.

Getting the tracking code

First things first, you need to register on google Analytics and follow all the steps until you are logged in. This is pretty standard and google already has a nice on-boarding process so you should have no issues there. If you do, let me know on emin.roblack@gmail.com

Next, we need to get the tracking code which is inserted into every HTML we want to track using analytics. This is done by going to the ADMIN menu inside your google dashboard, and then Tracking Info -> Tracking Code.

On that page you should find some code that looks a bit like in the snippet below. Copy all that, and let's get Swifty!

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-111111111-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-111111111-1');
</script> 

Adding the head script

Now we get to the fun stuff! We are going to create an extension on the Node so adding this tracker on multiple pages is easier in the future.

So, go to your theme file, or a default Foundation theme if you are using that one. Whatever the case is, you should be able to find madeIndexHTML function that generates your homepage HTML.

There, near the top and OUTSIDE of your Theme extension, add the following code.

public extension Node where Context == HTML.DocumentContext {

static func googleTrackerHead() -> Node {
    .head(
    .script(
    .src("https://www.googletagmanager.com/gtag/js?id=UA-111111111-1")),
    .script(
    """
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-111111111-1');
    """
    ))
}}
//
//
//
// public extension Theme { . . .

Using the code you got from Google Analytics, replace the strings in the above code with your own tracker info.

Now, in general you should have your extensions in a separate Swift file, like Node+Extensions.swift or similar. But for this I placed it in the same Theme file as I don't plan to extend as much and this is a quite specific use-case.

We have created a function which will return a .head whenever called, so next we just need to call it!

Inside func makeIndexHTML(for index:... and under the current .head, add our newly created function:

....
//.lang(context.site.language),
//.head(for: index, on: context.site, stylesheetPaths: stylePaths),
.googleTrackerHead(),
//.body(
....

I commented out the current code which you should not edit, just so you can see where to place our new function.

The waiting game

Now we play the waiting game. 🕰 If you did everything correctly you should start getting some information in your Google Analytics after a day or so.

On the page where you got the script from there is a Send Test Traffic button and it says that it takes about 30 seconds to show some results, but for me, it was much much longer.

Thank you for reading, you lovely person! ♥️ Lets hook up on Twitter?