Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add Google Analytics Tracking ID to GitHub Pages

Update: Added steps descriptions for others

Solved it:
had to include username.github.io (link that I want to track) in Google Analytics website section.

you can check GitHub help page here


enter image description here


After that I was provided with an Tracker ID.


Note: You can easily change or add more websites on Google Analytics page from your Google Analytics admin panel.


Update 2: - Adding Google Analytics Tracking ID to Already created Github pages (As requested by @avi-aryan )

  1. Browse to your github pages branch - which would be something like -
    ( https://github.com/YourUserName/YourRepository/tree/gh-pages )
  2. Then edit index.html from listed files
  3. Now in within HEAD tag of index.html - paste your Google Analytics Tracking ID Script ( if have already signed up for Google analytics then you can browse it under admin and then tracking info tab )

For anyone interested, if you are using Jekyll with GitHub pages, I just wrote a post showing how to correctly add Google Analytics Tracking ID to Jekyll.

  1. You will find your Universal Analytics tracking code under Admin > Property > Tracking Info > Tracking Code.

  2. Create a new file called analytics.html in the _includes folder found in your Jekyll website’s directory.

  3. Add Google Analytics Tracking ID code to analytics.html.

  4. Finally, open _layouts/head.html, and add {% include analytics.html %} just before the end </head> tag. Google recommends this placement to track all of the pages on your website correctly.


If you are using the minima template provide by Jekyll then -

  1. Add google_analytics: UA-xxxxxxxx-x to your _config.yml
  2. Create a file _includes/google-analytics.html and add the google analytics js code in it.

Replace

ga('create', 'UA-xxxxxxxx-x', 'auto');

with

ga('create', '{{ site.google_analytics }}', 'auto');

and you are set!

The google analytics code will now display if your site is built in production environment. For reference see the template's source code here - https://github.com/jekyll/minima

You can follow the same approach if you are using a different template by referencing the template's source code and replacing the corresponding files.


Is better to use GA-Beacon for that. GA-Beacon can track all your GitHub repo, even if the visited link isn't an html document.

Please check: https://github.com/igrigorik/ga-beacon


Adding analytics via _config.yml.

All GitHub themes (supported themes) natively support google analytics. You just have to provide a tracking code (UA-XXXXXXXXX-X).

Google analytics comes in two flavours - Google analytics 4 (GA4), and Universal analytics. You will have to use the latter for this. GA4 will not work #.

  1. Create a new Universal google analytics property (and not GA4 property). By default the tracking property you create will be of type GA4. You will have to select "Create a Universal Analytics property" for the property to be universal. Once a GA4 property is created it cannot be converted to Universal property. You can only do this while creating a new property.

Show advanced options

1.1 Turn Universal analytics on in the advanced options.

Create a Universal Analytics property

1.2 Configure Universal analytics options.

Universal analytics options

1.3 Copy the tracking ID for this newly created property.

Tracking ID

  1. Add this tracking ID to your gh-pages sites's _config.yml.

    google_analytics: UA-XXXXXXXXX-X

The following is from modernist's readme - the theme I was using for my site.

modernist theme readme

  1. Commit and Push the changes to github, and after few minutes navigate to your site's URL.

  2. Verify that everything went fine.

If you search the source code now for the tracing ID, you will be able to find it. Google analytics dashboard too will start showing activity.

Tracking code in site's source

The above steps show how to add google analytics to an existing gh-pages site. You can use the same code while creating a new gh-pages site too. Although it seems automatic page generator no longer exists - Can't locate "automatic page generator" button in Github

# Maybe there is a way to use GA4 natively by configuring _config.yml. I wasn't able to do that, and had to resort to universal analytics.

Reference(s)

https://www.analyticsmania.com/post/downgrade-from-google-analytics-4-to-universal-analytics/


You can add Google Analytics to a Jekyll site the same way you would any other site.

First, after setting up your Google Analytics account, navigate to the admin tab.

navbar

Next, under the accounts panel, on the left, click: Create New Account.

add account

In Google Analytics, an account represents a set of pages that you would like to track. Set up the website's account as desired.

After your account has been created you will be sent to a page which tells you your Tracking ID and has a JavaScript snippet for you to put on the pages you would like to track. Simply put this snippet in all the pages you would like to track. Or, if you use a default layout put this snippet somewhere in it.

By the way, since you are hosting on GitHub Pages you don't need Google Analytics unless you want very detailed analytics. If all you care about is page views GitHub has this.