As a marketer, I firmly believe you can't truly master a new skill without rolling up your sleeves and getting your hands dirty.

Though marketers are seldom required to implement analytics solution, that's the job for developers. But making sure that the tracking code are properly implemented surely is definitely our responsibility.

In this blog series, we're going to create a simple website using Weebly (You can use other services like Wix or Squarespace if you like), but I prefer Weebly) and install the GA code from scratch.

Once you finished the set up and picked a theme (just any theme will do, you can change it whenever you want), head to the SEO section under Settings. You should see two areas called Footer Code and Header Code:

Here, you can choose to put the GA code in either the header or footer.

Since websites are rendered top-down, putting our GA code in the header ensures that we'll capture as many data as possible (if we put the snippets in the footer, we might not be able to track users who leave the website before the webpage is fully rendered).

Head to Admin panel of your GA account, then go to Your Property > Tracking Info > Tracking Code.

Copy and paste the tracking code onto the Header Code on Weebly. Click save and publish.

Now using a Chrome plugin called Google Tag Assistant, you should be able to verify GA is installed properly on your site.

Don't worry if you see more than one GA ID there. Since Weebly also has their own GA account on your site, as long as your GA ID is on this list, you are good to go :)

Now that we have the GA code installed, how do we know if it's working properly? Well, GA comes with a powerful feature called real-time report. Next we'll learn how to verify our GA code is working properly with this.

Head to Real-time report, you should see the screen below:

Using real-time report, we can monitor our website by checking where the current users are based in, the source of traffic as well as any events or conversions taking place right now. You can learn more about them here

We will use Behavior to check our GA code is functioning properly for now. (If you are using the previous version of GA, that's called Content)

Now go back to your published Weebly site and refresh the page. Then head back to the real-time report. You will see a rectangular bar moving from right to left that's you! Beneath that you'll also see a table indicating the active page that you are on, try to navigate to another page on your Weebly site, you should be able to see it switched to another page.

To see a list of active pages in the past 30 minutes, you can select the "Viewing" from "Active Users" to "Pageviews (Last 30 mins)"

In case you don't see the pageviews appearing on the real-time report, you can check if you've:

  • placed the GA code on the wrong section of the webpage
  • only copied and pasted in some but not all of the GA code (for some special cases, we do need to modify the GA code for virtual pageview, but more on that later)
  • missed the GA code on a particular page
    • the ga('send', 'pageview'); part of the tracking code sends a pageview hit back to GA, that's why it's important to have the GA code placed on ALL pages

Congratulations! In less than an hour, you've created your own site equipped with a fully functional GA. In the coming blog series, we are going to take a look on how to debug as well as implementing advanced features like virtual pageviews and event tracking.

Remember to subscribe (I won't spam you, I promise) and play around with Weebly.

Have fun and happy tracking!