Google Analytics - freeCodeCamp.org

How to Add Google Analytics to your Astro Website

Ihechikara Abba — Wed, 18 Oct 2023 18:07:14 +0000

You can use data insights derived from your website or app to make important decisions that'll help grow your business. This information can help you improve user experience, create effective content strategies, and so on.

Google Analytics is an effective tool for tracking and analyzing traffic and events on your websites and mobile apps. In this article, you'll learn how to add Google Analytics to your Astro website.

To follow along, you'll need the following:

A Google account.
A deployed Astro project.

Let's get started!

How to Add Google Analytics to an Astro Website

Before adding Google analytics, make sure you've already deployed your project. Here's one that I've deployed using Netlify: https://astro-article.netlify.app/. This is an Astro blog template created with the npm create astro@latest -- --template blog command.

This section will be divided into two sub-sections. In the first sub-section, you'll learn how to create an Analytics account and how to set up your account for tracking and monitoring your website.

In the second sub-section, you'll learn how to configure your code to sync with Google Analytics.

How to Set Up Google Analytics

You can follow these steps to set up Google Analytics:

Step #1 – Account Creation Page

The first step is to create a Google Analytics account. You can do that by visiting the Google Analytics website.

When the page loads, you should see something similar to this:

Google Analytics home page

Click on the "Start measuring" button. This will take you to the account creation page where you'll fill in some info about your website/app. That is:

"Create an Account" page on Google Analytics

After inputting an account name, scroll down the page and click on the "Next" button.

Step #2 – Property Creation Page

On the property creation page, you can create a property name, time zone, and currency.

A property acts as a unique identifier for your websites and apps. So it is like a container for all the data related to a specified website or app.

"Create a Property" page on Google Analytics

Step #3 – Business Details Page

On the business details page, you can specify your industry category and the business size.

"Describe your business" page on Google Analytics

Step #4 – Business Objectives Page

The business objectives helps Analytics generate personalized reports for your business. You can select the options that are important to your website, app, or product category.

"Business objectives" page on Google Analytics

After selecting the options, click on the "Create" button.

Step #5 – Data Collection Page

On the data collection page, you can choose between different platforms to collect data from. Since we're working with a website, we'll go with the Web option.

"Start collecting data" page on Google Analytics

Next, you'll have to create a data stream by inputting your website URL and your stream name (this can be whatever you want, but I'll recommend using a name related to your website).

Page to setup a data stream on Google Analytics

In my data stream information, I used https://astro-article.netlify.app/ as the URL and "Astro Blog Template" as the stream name.

Make sure you remove the "https://" part of the link in the input box so you don't get the "Valid website URL is required" error.

So instead of https://astro-article.netlify.app/, it should be astro-article.netlify.app/.

This is what mine looks like:

Example of information entered properly in data stream setup page

Go ahead and click on the "Create stream" button.

On the next page/prompt, you'll see your stream name, URL, ID, and measurement ID values.

The measurement ID will be important in our code integration so you can copy and paste it somewhere.

Here's what the page looks like:

"Web stream details" page on Google Analytics

If you click on "View tag instructions", you'll see a code snippet for manual integration with code. Copy the code and paste somewhere because we'll make use of it soon.

Installation instructions

Here's the code snippet if you missed it:


<script async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID">script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'MEASUREMENT_ID');
script>

If you're copying the code above, make sure you replace the two MEASUREMENT_ID values with the actual value of your measurement ID.

How to Integrate Google Analytics and Astro

At this point, we've created a Google Analytics account and generated our project's measurement ID. The next thing to do is to sync our code to Google Analytics.

But first, we have to install a library called Partytown. When using third party integrations, you may run into performance issues because you're making use of third-party code.

Partytown allows these integrations to run as expected without reducing your site's performance. You can read more about that here.

Step #1 – Install Partytown

Head to your Astro project terminal and run this command to install Partytown:

npm install @astrojs/partytown

Step #2 – Configure Partytown

After the installation is complete, you'll need to add the integration to your astro.config.mjs file:

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import partytown from '@astrojs/partytown'

import sitemap from '@astrojs/sitemap';

// https://astro.build/config
export default defineConfig({
    site: 'https://astro-article.netlify.app/',
    integrations: [
        mdx(), 
        sitemap(),
        partytown({
            config: {
              forward: ["dataLayer.push"],
            },
        }),
    ],
});

In the code above, we imported the Partytown library: import partytown from '@astrojs/partytown'.

We then added this piece of code to the integrations object:

partytown({
      config: {
        forward: ["dataLayer.push"],
      },
})

Everything else in the code came with the Astro project.

Step #3 – Add Google Tag to your Pages

Remember the code snippet from Google Analytics? This is where we'll use it.


<script type="text/partytown" async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID">script>
<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'MEASUREMENT_ID');
script>

Note that we added the type="text/partytown" attribute to both

Wrapping up

This brings me to the end of this article. I have tried to explain with simplicity and details that I felt lacking when I was learning how to set up custom tracking for my own requirements. Hopefully, this step by step guide helps you in setting up tracking for your custom goals that best fit your needs.

Feel free to share your thoughts or ask any clarifying questions related to this post in the comments.

In case you want to take any free online courses on Google Analytics, you can visit here.

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.

How to set up reliable and maintainable Google Analytics in Webpack

Colby Fayock — Mon, 13 Aug 2018 14:15:37 +0000

One of the messier bits of a new app setup is trying to figure out where to stash your Google Analytics initialization scripts. There are some existing options like React Helmet to manage the head of your document. You can toss it in your monolithic index.html file.

The thing is, those setups rarely work out the way you want them to. They end up as ugly blocks of HTML strings in your JavaScript. You end up having to manage that monolith of an index.html file I mentioned before throughout your project’s lifecycle.

Why this matters

Beyond how you manage your code, if analytics is crucial to you and your business, you want to make sure the setup is reliable and correctly installed.

Many developers assume that because it’s a JS snippet, the best practice is to toss it at the bottom of the page. The issue with this is that throwing it at the end leaves a higher risk that you’ll miss tracking a hit before a user exits the page, as Analytics won’t initialize until the rest of the page loads. That’s why Google itself recommends installing the snippet as high in the head as possible.

As important as I say this is, you might not care as much if you’re more relaxed about it and want to get a general idea about how things are running on your portfolio site. However, if you expand your reach into other tools like A/B testing with Google Optimize, it’s even more critical to have GA recognize the page and the experiment running to avoid additional delays or worse, page flickering. ?

Undesirable content flicker while running a test

How we’ll fix this

Partials for HTML Webpack Plugin is an extension of HTML Webpack Plugin that simplifies your partial management. Its goal is to specifically try to avoid the practice of maintaining an index.html file in Webpack projects and instead defer to maintainable partials simplifying your setup.

For now, we’re going to focus on getting Google Analytics set up, but I recommend checking out Google Tag Manager for managing tags generally, which I’ll cover later in a followup post.

TL;DR — If you want to jump straight to the solution, you can grab the code here.

Getting started

We’ll want to start out with a basic Webpack setup with HTML Webpack Plugin already configured. This guide won’t walk you through that setup, but here are a couple of starting points if you’re not familiar:

Webpack’s Getting Started guide
Webpack’s guide for HTML Webpack Plugin
A ton of excellent tutorials out there you can find by Googling around a little bit

Lastly, if you already have an index.html set up, I won’t judge you for now, but hopefully this inspires you to approach other snippets the same way and remove the need for a managed index.html file at all.

Installing Partials for HTML Webpack Plugin

Once you already have your basic setup and HTML Webpack Plugin installed, our Partials plugin is an easy add:

yarn add html-webpack-partials-plugin -D

Note: make sure to properly set up the package dependency based on your project configuration.

Set up your partial

Next, we’ll want to create our partial. My preference for generally managing them is to create a new directory called partials in the source root. For example, if your entry point lives at src/main.js, your partials directory would be right next to it at src/partials.

Once you have your preferred location, let’s create an analytics.html file in our new partials directory. For now, let’s throw in some test code, so we know it works. In analytics.html:

<style>
body { background-color: #5F4B8B; }
style>

Configure your partial

Open up your webpack.config.js and let’s set up the partial to get included in our build.

First, require the plugin at the top of your config. In webpack.config.js:

const HtmlWebpackPartialsPlugin = require('html-webpack-partials-plugin');

Next, and this is very important, include a new instance of the plugin AFTER your instance of HtmlWebpackPlugin(). In the plugins section of webpack.config.js:

...
plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackPartialsPlugin({
    path: './path/to/src/partials/analytics.html'),
    location: 'head',
    priority: 'high'
  })
...

Now let’s first break down that config before moving on:

path: this is what it sounds like, the path to the partial file in our project. Make sure to update this to the right location so the plugin can find it.
location: the HTML tag the plugin looks for.
priority: this determines whether at compile time, our plugin adds our partial at the beginning of the specified location tag or the end (opening vs. closing).

Like we covered earlier, we want to add this as high in the ad> as possible. For most HTML tags used in location, Partials add it right after the opening tag if the priority is high. But with the tag, Partials looks for your charset meta tag and injects it immediately after, as it’s important to render that in the document first.


Test it out
Compile Webpack, open your project in your browser, and you should now see a nice, ultraviolet background. ?

If you take a look at the source, you should see the snippet get added right after the charset tag!
Now to Analytics
Let’s update our analytics.html file to look something like this:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X">script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-X');
script>

Just make sure to update the IDs (UA-XXXXXXXX-X) to your match your Google Analytics property value. Your Analytics snippet may also vary depending on your setup.
You should now be able to recompile Webpack and see your page start to ping Google Analytics! ?
Note: you might have to load your project file from a server before GA is recognized rather than straight off of your local filesystem
Let’s take it a step further
This is great and all, but when dealing with Google Analytics, it’s nice to have a few different properties, such as one for development and one for production. This helps avoid polluting the production property with data from your development team (or you) poking around the application.
Setting up partial variables
Let’s go back to our webpack.config.js file and set up a variable to pass our property ID in:
...
plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackPartialsPlugin({
    path: './path/to/src/partials/analytics.html'),
    location: 'head',
    priority: 'high',
    options: {
      ga_property_id: 'UA-XXXXXXXX-X'
    }
  })
...
Next, update your analytics.html file to recognize this value. Similar to HTML Webpack Plugin, Partials uses Lodash templating to make this work. In analytics.html:
<script async src="https://www.googletagmanager.com/gtag/js?id=<%= ga_property_id %>">script>
<script> window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '<%= ga_property_id %>');
script>

Now compile again and profit!

Google Tag Assistant showing successful pageview request
To verify your tag is appropriately set up, I recommend checking out Google Tag Assistant available on Chrome.
Setting this up for different property IDs
From here, you have a few options as to how you manage your different property IDs. You can:

Set up separate development and production Webpack configs
Create an environment config (ex: env.config.js) that allows you to import the settings
Both (recommended)

Setting it up this way will give you the opportunity to run the properties dynamically between your local development and production builds. Just remember not to store your env file in git if you’re going to add sensitive data. ?
So what are we getting out of this?
The ideal scenario is you take this and run with it for the rest of your HTML living in index.html. This helps split your code up into more manageable pieces and lets Webpack generate the file for you rather than you trying to override and manage it yourself.
Specifically for Google Analytics, we have a few benefits:

Ensuring the snippet is loading in a reliable location
Providing a more reasonable way to maintain the snippet itself
Managing your property ID through your Webpack config
And bonus: loading it as an env variable through your Webpack config

To see the full solution with some example code, check out the example in the GitHub repo.

  
    
      
    
  
  
    
      ? Follow Me On Twitter
    
    
      ?️ Subscribe To My Youtube
    
    
      ✉️ Sign Up For My Newsletter
    
  


Originally published at https://www.colbyfayock.com/2018/08/reliable-and-maintainable-google-analytics-in-webpack.



 How (and Why) to Get Started with Google Analytics 
freeCodeCamp — Fri, 16 Mar 2018 01:07:25 +0000
 By Julia Bourbois
What is Google Analytics?
Essentially, Google Analytics is the go-to solution for monitoring website usage. Though it is frequently used in conjunction with Google Adwords, for e-commerce, and in improving website user experience, it is flexible and powerful enough to be used by any organization that has a website. Indeed, you do not need coding prowess to utilize Google Analytics.
So, this guide is directed principally to individuals who do not consider themselves or their principal professional responsibilities to be tech. It will touch only on the essential elements to get started with Google Analytics.
What can Google Analytics do for me?
Odds are your organization has a presence on the web. Google Analytics collects and renders a tremendous amount of data. Raw data is curated into a variety of reports depending on your needs. The data-driven insights that are applicable to your organization will depend on your goals for your site and your organization. Even if your goals are not yet defined there are areas of Google Analytics that are useful for most organizations.
Google Analytics can also help you identify underlying issues with the site. For instance, if there are performance or usability issues for mobile users of your site.
Acquisition Overview
Acquisition Overview answers questions like: How much traffic does the site receive? What is the origin or top traffic for your site? What is your goal conversation rate? What is the break down of new versus returning users?
This is particularly useful when examining change over time. Comparing weeks or months will give you a better idea of site performance over time.

courtesy of Google Analytics Demo Site
Behavior Overview
Some pages will be more important to your organization than others. On the Behavior Overview page, individual page performance will help you identify which pages are bringing in the most traffic. It will also provide you with an overview of your site’s technical performance, such as the bounce rate.

courtesy of Google Analytics Demo Site
If you are working in e-commerce, pages such as the home page, product pages, search results, the shopping cart, check out, and the thank you page, will be critical pages on your site to track.
However, if you’re a museum you may want to track pages for education, exhibition, and programming. You may also be interested in targeting geography to get a better idea of your target audience. Museums, as well as restaurants, diners, and cafes, will want to prioritize the local search optimization.
Conversion Overview
For Business impact reports, it is necessary to configure goals or e-commerce transactions. Google Analytics will not automatically establish your goals for you. Goals can be established for your site in the Administration Panel under “View.” Goals are very broadly defined and can be e-commerce transactions, or lead captures from submissions or reservations.
Goals with a dollar value illustrate the strengths and weakness in the pages of the sites. The Conversion Overview will enable you to drill down in your goal conversions and well as learn more about your customer’s path.

courtesy of Google Analytics Demo Site
How — The Basics
So how do you get started?
Create your account by logging on to Google Analytics. In the upper right corner, login or create an account if you don’t have one.

courtesy of courtesy of Google Analytics Demo Site
Then select either website or mobile app. You will provide account name — typically the name of your business. Then set up the URL. Select either HTTP or HTTPS — start with HTTP if your site switches between HTTP and HTTPS.
Then select an industry category. This is an important step as it enables Google to set benchmarks for your site and compare your site’s performance with others in the same industry.

courtesy of Google Analytics Demo Site
Then select the reporting country and time zone. While not a critical issue, consider the time zone you select to be permanent. Though it can be changed, it will not retroactively change the data. Leave everything checked as these resources can become invaluable. You can read the “ReadMore” to learn how Google uses your data.

courtesy of Google Analytics Demo Site
Next, select “Get Tracking ID”. Review terms and services, and select “I accept”.
Now you will install your tracking tag. Select “Tracking Info” and then “Tracking Code”. The tracking code is a snippet of unique code that you will need to copy and paste to every page of your site that you want to be tracked by Google Analytics.
Copy your tracking code just below the ad> on your HTML page. Then go to “Google Tag Manager.” You can select the link to learn more about this. Click on “Status”. Here Google will let you know whether you are receiving data.

Note:
Here’s how to install the Google Analytics tracking tag on your Wordpress pages.
Here’s how to install the Google Analytics tracking code onto your HubSpot pages.
Creating a View

courtesy of Google Analytics Demo Site
It is considered a best practice that the first “View” you create is a Master View. A Master View contains an unfiltered history of the analytics, sort of like a backup.
Creating a Filter
Google applies filters to your data before it presents it to you in your reports.
The most important filter to start with is excluding yourself and your employees from appearing in your data. You do not want your data appearing along with that of your users.
Create a filter that excludes the IP addresses for yourself. If you do not know you IP address, simply do a Google search for “what is my IP address?”. You will need to exclude the IP address for each computer used by yourself and your employees for work. These will need to be added individually.
From the Admin Panel, select the “Default View”. From the drop-down menu, select “Add Filter” and give it a name (such as Exclude Employees). Next, you have the option to select from a predefined filter or a custom filter.

courtesy of Google Analytics Demo Site
A predefined filter acts as a template for what you’d like to do. Select “predefined” and choose from the drop-down menu. Select “Exclude or Include only”. In this case, you will select traffic from the IP addresses and then select the appropriate expression. Enter the data to exclude, such as an IP address. Then “Save.”
From this point moving forward, all of the data in the default view is going to exclude any data that is excluded by this filter, but it is not going to historically exclude data.   
It is very common to add multiple filters. However, filter order matters. Filter order affects the subsequent results. Filter order matters because the output of one becomes the input of the next. Explore the filters to see what is most relevant to your organization’s goals.
Note: If you want to include/exclude two things, you are essentially creating an “or” Filter. Go to Filter Field, then filter pattern. Type the first term to exclude then the pipe symbol (|) and the second term.
Output
Google Analytics makes printing or sharing your analytics reports very easy. In the top right corner, you have the option of printing or sharing your report. It can also be saved and edited.

courtesy of Google Analytics Demo Site

courtesy of Google Analytics Demo Site
Moving Forward
Google Analytics offers numerous reports, as well as data segmentation options, which are beyond the scope of this article. Find the reports that most closely align with your needs.
With the introduction of Google Analytics 360 Suite, formerly Google Analytics for premium users, Google’s analytics is only getting more advanced. Google Analytics 360 provides analytical data that companies can be used to track return on investment (ROI) and marketing indicators.
Further Reading
For a deep dive into Google Analytics, read Google Analytics for Web Designers and Developers.
For tutorials for beginners can be found on Google Analytics for Beginners.
If you are a novice to coding, I recommend Moms can: Code and CodeNewbie.
Follow me on Twitter.
 


 Learn Google Analytics from Santa and his Elves 
freeCodeCamp — Tue, 20 Dec 2016 18:41:46 +0000
 By Christian-Peter Heimbach
The holidays are here! It’s time to grab some egg nog, kick back by a fire place, and toast to all the coding you crammed into 2016.
But wait! Before you sink into a carbohydrate-induced hibernation, let me tell you about a project that’s taking the North Pole by storm.
Rumor has it that Santa spent his summer break reading up on data and analytics. You didn’t think his global distribution empire ran purely on magic, did you?
Some tech savvy elves are indulging Santa by setting up Google Analytics in time for the big night.
You see, Santa, his elves, and children everywhere have a secret shared website that they all use to register and review wishes. I’m sworn not to reveal the actual URL, so we’ll just call it www.wish.io.
On this site, children can:

See the benefits of wish.io
Have an opportunity to register as a good kid
Choose a present they wish to receive
Review their choice
Submit their wish

As you can imagine, Santa and the elves can learn a lot from Google Analytics as to how they can further improve wish.io. Here’s how they’re putting it to work.
Setting Up Google Analytics for Santa
To get Santa’s secret page ready for tracking, the elves need a Google Analytics tracking code. This is a Javascript code snippet (also often referred to as ‘pixel’ or ‘tracking snippet’) that you get after signing up for Google Analytics.
You can set up as many as 100 accounts, which can all contain multiple properties. These properties in turn can contain multiple views. This can seem confusing at first (especially if you’re an elf) but it’s not so bad if tackled one step at a time.
The elves will accomplish this in the admin area of Google Analytics. Let’s take a look.

A screenshot of the Admin area of Google Analytics
Account properties describe websites, mobile apps, or other systems, each represented by a tracking code and unique ID — called a UA code. Here you can set up the property “Santa’s wish.io”. If Santa later decides to build subdomains or separate-but-related pages — like Santa’s naughtylist.io — he can set up an additional property here to avoid mixing data about good and naughty children.
You can define your user management for each level, but permissions are inherited per detail (account > property > views).
The elves have to think carefully about who should be able to see and modify what. It only takes one little green user who doesn’t know what they’re doing to mess up the settings and data.
So Santa makes sure that all the elves read the Google Analytics permission guide before they can add users.
Google Analytics offers several views that the elves can use for a variety of purposes.
First, they can apply filters. This is useful because the elves generate a lot of internal traffic that needs removed, so that Santa can instead focus on the session data from children who are visiting the site.
Second, the elves can define goals and segments at the view level, so that each team can access the data that’s most interesting for them. After all, the logistics elves want a different sort of information than the front-end elves.
You can configure much more here, such as automatic reports and custom calculated metrics. But that’s a job for next summer.
Elf Best Practices in Setting Up Views
Next, the elves have to set up three standard views: www wish.io (Master), www wish.io (Test), and www wish.io (Raw).
These three views are essential due to the way Google Analytics operates: it applies filters between the steps of data collection and data processing.
This means that if the elves have a faulty filter, their data will vanish. For this reason, they need to set up a Raw view and never touch it so they have a fallback for emergencies. Every elf knows that the test view is for testing, and the master one is there to work with from day to day.

A screenshot of adding new view with Google Analytics
How the Elves Track Kids
With the backend of Google Analytics in place, the elves add a tracking snippet e of wish.io.
Yes, this is a gross violation of COPPA. But Santa doesn’t care about our laws. Heck, he doesn’t even care about the laws of physics.
They find the tracking code in the property section of the admin panel, then paste it into their website’s layout code.
The elves also take the vital step of ensuring that the script is located just before the ad> closing tag. Usually, developers don’t want any render-blocking scripts here, but this is a special exception. The Google Analytics script is asynchronous, and ultimately the elves want to catch all traffic. They can’t risk missing the information of children who might leave a page before all scripts are loaded.

The bounce rate — which tracks the proportion of visitors who drop out of a page without engaging with any of the content — is an important metric. It might show the QA and front-end elves that something is wrong with the page. It also helps the marketing elves check whether a certain activity was poorly targeted.

A screenshot of the Google Analytics tracking code section
Navigating Google Analytics
With tracking integrated, the elves were set to look at the initial data. Even though Google Analytics starts collecting real time data immediately, the elves decide to give it at least 24 hours so it can gather a meaningful amount of data.
Now the elves have to get familiar with Google Analytics, its various menus and data it displays.

Screenshot: Google Analytics Reporting Overview (Wish.io renamed Demo Account)
The left navigation menu shows the main sections the elves can use to look at a website’s data. The most important elements are Audience, Acquisition, Behavior, and Conversions.
This menu is also home to the Realtime and Intelligence Events view. Intelligence Events will cease to exist in Google Analytics soon, so Santa and the elves decided not to bother with it. The Realtime view is nice to show on flat-screens in Wish Operations HQ and boost moral among the elves. But meaningful decisions demand a longer-term view.
So the elves head back to Google Analytics main sections to check out what other tools it offers.
Audience Overview
When the elves open a new property’s view, they see the Audience Overview by default. Fortunately, the overview pages are all similar, making the learning process a little smoother for elf and human alike.

In the area marked “1” (above), the elves get the most important information about their audience. How many users came to their page, how long they spent on it, and pages they saw per session etc. All this is nicely presented in graphs, so the elves can spot peaks, lows, and overall trends.
Looking at annotation (2), you’ll see that it’s possible to segment these overviews. This is true for all the main sections in Analytics. Now Santa can see whether kids browsing wish.io on the mobile phones they received last year behave differently to other users. The creation of segments is an advanced topic, but can be very rewarding. Segments can unearth context from the data which is otherwise only presented in rough averages. Note: You can use Google’s in-depth guide on segments or check the Gallery to import popular community-made segments.
Below the summary values (3), the elves have quick access to more detailed information each category offers. For example, they can see more demographics by country, or the technical context of users.
Even more detailed insights are available in the sub-categories of the left navigation bar (4).
One aspect of the detailed audience data added fuel to an already hot debate the elves were having over summer: the big question of which version of Internet Explorer wish.io should be backwards compatible with.
You can no doubt imagine how heated that became. Thankfully, Google Analytics has replaced the bickering with data driven decisions. Just use the left navigation and check out: Audience > Technology > Browser/OS and click on “Internet Explorer” for version details.

Screenshot: Internet Explorer Sessions and Visitors per Browser Version
Luckily, Google Analytics records details of a browser’s specific version. Santa and the elves are pleased that 95% of Internet Explorer visitors use version 11. They also assuming that the good kids (who are the main audience for wish.io, of course) are diligent enough to either update Internet Explorer regularly, or to just use a better browser. Of course, the browser share for visitors to the upcoming naughtylist.io site will need to be evaluated separately.
There are lots of more great things the elves can learn here. For example, Google can show the kids’ Gender and Interest data (activated in the property settings under the admin panel — make sure you comply with your local laws, unlike Santa). It also allows them to delve much deeper into acquisition data and benchmark audience behavior based on the different channels visitors arrived from.
Acquisition
To learn more about where visitors came from to access wish.io, Santa can look at the Acquisition Overview.

Screenshot: Acquisition View showing visitors by traffic source
This view focuses on sources of traffic.
Google defines nine main channels in which it aggregates these sources:
Direct: Usually people typing the URL or using a bookmark.
Organic Search: People using Google or Bing, and clicking an organic search result link.
Referral: Someone following a link on another website or blog.
Social: Visitors originating from sites listed as social (click the ‘Social’ link to see the list).
Email: All visits coming straight from emails.
Paid Search: People accessing pages via paid links on Google and partner sites.
Display: People that clicked paid advertising banners.
Affiliates: Traffic received from affiliate partners that promote wish.io
Others: A summary of advertising traffic classed as “special.” For example, traffic bought on a cost per action rate.
It’s important to understand that these groupings are the result of a set of default rules stating which medium counts for which traffic group.
The elves can fabricate links for social or advertising purposes — so-called UTM links — which are also summed up in these groups. This way they can judge how successful an ad or blog post was.
For convenience, they use Google’s Link Builder tool. To prevent false counting, they need to be aware of the grouping rules and set ‘utm_medium’ correctly.
Once everything is up and running, the elves can discover lots of interesting details about their channels. They can see which social channels contributed most to wish.io, or which campaigns were most successful. They can even optimize their AdWords’ investments and see which landing pages kids usually arrive on from various sources.
The next logical step for Santa is to gain — and act upon — a deeper understanding of exactly how visitors to his sites behave.
Tracking kids’ behavior on wish.io
For Santa and his elves, it’s always been hard to keep up with the many millions of different wishes kids might come up with. So it’s important for them to understand trends, popular choices, evergreens, and also potential errors across their millions of pages.

Screenshot: Behavior View showing visitors by page
Each elf department has its own information that is of interest.
The front-end and QA elves should always keep a close eye on bounce rates, average time on page, and the speed score of their most important pages.
Every front-end elf hates the lengthy SEO meetings triggered by wish.io’s loading times getting out of hand. So it’s helpful for them to explore the Site Speed subcategory. Google delivers great insights by browser, country, and page — as well as suggestions on how to improve.
UX elves can get an insight into priority pages in the Behavior section. They can also look at the flow of where people enter Santa’s page, their journey, and where they exit.
But the most exciting topic for them is building content experiments. Basically, they can ask the front-end elves to build alternative versions of the same page, then automatically test these versions against measurable objectives.
For example, it might be of interest to find a page variant where kids stay longer or submit wishes at a better rate. They can set up initial experiments with the analytics tool, which has a simple guide. For advanced use cases, elves can carry out content experiments via the well-documented analytics.js API.
Finally, the Behavior tab also offers event tracking, which the marketing elves love. Events can be sent back to Google Analytics whenever kids initiate an important action that doesn’t trigger a new pageview.
For example, when kids click download buttons, submit their “I have been a good kid” forms, amend a wish, and more. Events are straightforward function calls to the analytics API. Elves add them to their Javascript event listeners and callbacks that control the interactivity of their page. All of this is described over at Google’s event tracking guide.
Marketing elves love event tracking because it puts them in a better position to configure the all-important Conversions element of Google Analytics.
Conversions
Setting up the Conversion section in the admin panel took some effort from Santa and his team, but it was worth it. Conversions will help the elves to understand the “business” effects of all formerly looked at insights. This closes the loop between having a lot of data and understanding how it leads to the ultimate goal: happy kids.

Screenshot: Conversions showing goal completion by location
Goals are not set by default in Google Analytics. Users need to define them in the admin panel. Goals are defined by the underlying type of interaction. This could be either the viewing of a certain page (e.g. thankyou.html), a behavior (minimum duration on site, amount of pages per session), or when an event is recorded. You can even define a series of destinations to show as a single goal.

This is important when you want to track how many children have gone through a whole conversion “funnel.” For example, they enter the registered kids’ area, browse through the wish options, and successfully submit a wish.
With this funnel goal tracked, the visualization shows how children go through every step. It also reveals to what extent (and when) they drop out, and where they go from there.

It’s important to note that goals should be defined in a way that they don’t overlap each other. If one event generates the counting of two goals, your conversion rates can be too high.
In addition to using Goals, it’s possible to wire the entire Santa ecommerce system into Google Analytics. But that’s a job for the new year. Once that deep integration is up and running though, Santa & Co. will gain insights down to a per-wish “order” level, and will even be able to track wish returns.
Another useful Google Analytics view was the Multi Channel Funnels sub-category. Before Google Analytics, the marketing elves often argued over budget allocation, and who contributed the most overall wishes submitted.
The brand advertising elves complained that their work not only impacted direct traffic, but search and social as well. They figured some children initially came via their social media posts, but returned later to submit wishes by typing the wish.io URL.
So why should the last elf involved take all the credit? They shouldn’t. Which is why every marketing meeting in the North Pole now includes a look at the Assisted Conversions and Top Conversion Paths. Here the elves can see not only their direct conversion value, but also the value of conversions they helped to close.

Screenshot: Assisted Conversions per traffic source
A job well done
Thanks to his Google Analytics project, Santa has dubbed 2016 as “the year of data driven decisions.” He’s happy his elves have turned once-heated discussions into data competitions and experiments.
From now on, he’ll be using the power of data to encourage his team’s scientific spirit — and to find ever-optimized processes for boosting happiness.
Now all that remains is for me to wish you and your loved ones’ happy holidays. I hope that this little tale from the North Pole has inspired you to make your 2017 even more successful, and data driven.
Now, let’s all slip into our ugly holiday sweaters and embrace the holiday spirit.
Special Thanks to Craig Rennie of Draft Punk and Quincy at Free Code Camp for all their editing efforts. May your holidays be extra happy!
Disclaimer: This story is written in a holiday theme for entertainment purposes only. Despite the above report about Santa, elves, and children it is important to note that Google Analytics doesn’t track or share audience information of anyone under 18.
All data and images are courtesy of Google. The data shown here is available for every analytics account via accessing the Google Analytics Demo Account