How to add Google Analytics Tracking ID to GitHub Pages

Asked 20/6, 2013 at 7:14 Answered 1/7, 2022 at 5:2

Solved github google-analytics github-pages

232

Could be a simple question but I am full of doubts right now about adding Google Analytics Tracking ID to GitHub page.

I am using GitHub automatic page generator to create my GitHub page but it asks for "Google Analytics Tracking ID". I tried to sign up with Google Analytics but there on it asks for website URL.

Now what I am supposed to do?

One more ques: can we add Google Analytics Tracking ID later on after GitHub Page has been created?

Calli answered 20/6, 2013 at 7:14 Comment(4)

Quite a few suggested approaches but I can't get/confirm any of them working yet. I'm hoping it will just start working in 24 hours or so. – Righteous 3/5, 2019 at 10:46

/Headdesk. I had my Brave browser blocking trackers on my sites. It was working the whole time. Also a confusing thing for me was the (semi) recent move from ga (google analytics) to gtag (google tag). Apparently you only need the gtag() stuff now, no longer the ga() stuff. Fun. These links helped me diagnose my problem: chrome.google.com/webstore/detail/tag-assistant-by-google/… and analyticsmania.com/post/google-tag-manager-vs-google-analytics – Righteous 3/5, 2019 at 13:20

@ChrisEmerson that's some useful update :) – Calli 20/5, 2019 at 18:52

I had similar issues of my visits not registering, turns out AdBlock was responsible for them. – Fredricfredrick 6/1, 2020 at 19:35

185

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 )

Browse to your github pages branch - which would be something like -
( https://github.com/YourUserName/YourRepository/tree/gh-pages )
Then edit index.html from listed files
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 )

Calli answered 20/6, 2013 at 9:16 Comment(32)

@Bingo , I currently use <iframe> to include a footer.html in every page of my website. I have added the <script> to it's <head> tag. It doesn't seems that it is working. I will try your solution and report back. – Suh 15/7, 2013 at 6:58

@AviAryan you will have to add tracking script in main file as well like index.html and iframe html - you will have to add script in both – Calli 15/7, 2013 at 9:7

I have added them, however Google analytics say the Tracking is not installed. My page as specified in G-Analytics is http://avi-aryan.github.io – Suh 15/7, 2013 at 12:33

@AviAryan your files seems to be correct, have you added avi-aryan.github.io/ as website url in Google analytics profile setting under admin section – Calli 15/7, 2013 at 12:55

@Bingo No, but avi-aryan.github.io Does a / make a difference. – Suh 15/7, 2013 at 13:25

@AviAryan Although I think that shouldn't make any difference but surprisingly all my sites are listed there on with / at the end. And just for info, you can try statcounter.com as well it pretty much simple and is quiet fast as compared google analytics in updating results – Calli 15/7, 2013 at 13:33

@Bingo G.Analytics is working now. I can see the stats. It looks it takes 24 hrs to be activated. Thanks for your help and I wanna confirm / doesn't make a difference. – Suh 16/7, 2013 at 3:38

@AviAryan ohh congrats, and confirmation about / - will have to try it out by changing the website listing – Calli 16/7, 2013 at 4:36

@Bingo, have you tried statcounter.com. I get the error Double check your website address below and try again. when I use http://avi-aryan.github.io – Suh 16/7, 2013 at 8:17

@AviAryan Yeah I have been using statcounter.com. try with / in the end and BTW did you paste the statcounter script in your html page? – Calli 16/7, 2013 at 11:49

@Bingo Again, i got it working, don't really know what different I did as I was doing hit and trials again and again until I got something in favour. Thanks, now I will compare the two and think on what I should use. – Suh 17/7, 2013 at 9:2

@AviAryan ohh well go ahead, BTW I am using both simultaneously as one is fast (statcounter) and other one gives sort of detailed stats(Google Analytics) – Calli 17/7, 2013 at 9:10

Bitdeli provides a free badge that you can add to your READMEs in GitHub. It will give you access to the full request logs, which allows you to analyze who has been viewing your repositories. – Tights 14/12, 2013 at 9:2

@Tights No idea why you commented about this here out of no where but thumbs up for bitdeli - its nice :) and thanks for letting me know abt that – Calli 14/12, 2013 at 13:22

because unfortunately your suggestion did not work for me, so I had to keep searching for another way... – Tights 14/12, 2013 at 13:37

@Tights ohh sorry for that if it didn't helped u – Calli 14/12, 2013 at 13:46

FYI: I used the same logic for editing index.html for adding twitter's conversion tracking too. Thanks! – Obedience 25/2, 2015 at 1:42

It'd be great to see an updated answer to this question. It seems that the standard code snippet that GA provides just does not successfully install or track page views if creating a custom page on a gh-pages branch. – Octavie 12/5, 2015 at 4:45

@Octavie thanks for the uspdate. Let me check on the same and then will update the answer – Calli 12/5, 2015 at 4:49

I just tried this on a github page, adding the google analytical script in head of index.html, but it doesn't seem to work. Could anyone confirm this answer is still the correct solution? – Peterman 6/9, 2017 at 15:28

@Peterman just verified on my github pages and yeah I can see stats from google analytics. Are you getting error ? – Calli 6/9, 2017 at 15:35

Hi, thanks for checking. All I see is in Google analytics the status remains "No data received in past 48 hours.". I also tried the "Send test traffic", which correctly opens the page. I added the script snippet at the end of the <head> section. Is that really the right place? – Peterman 6/9, 2017 at 15:53

@Peterman when did you put analytics on your page? google usually updates the dashboard after quite a while – Calli 6/9, 2017 at 15:56

About an hour ago. I assumed the update would be fairly quick, given they warn that "the update can take up to 30 seconds", but maybe I should still wait a few hours after copying the analytics script for the first time? – Peterman 6/9, 2017 at 16:4

@Peterman no it usually takes a day or two.. check after a day or two – Calli 6/9, 2017 at 16:6

This is the simplest answer, and worked for me in a few minutes. – Lanchow 22/1, 2018 at 23:59

@Lanchow glad it helped you :) – Calli 23/1, 2018 at 2:29

is it safe to have your google analytics tracking ID public? – Dree 20/6, 2018 at 3:47

@Calli The github help article page link given in the answer is broken. help.github.com/articles/… The new link page is here... help.github.com/en/enterprise/2.14/user/articles/… – Descendant 21/5, 2019 at 12:45

@Descendant thanks for the update - updated the link – Calli 21/5, 2019 at 15:27

What about when you need to get analytics for a GitHub Page which is a sub-folder? Something like https://username.github.io/my-project/. – Breastbeating 19/10, 2020 at 5:33

@Calli how can I track a multiple pages (of the same website)? – Sangria 19/11, 2021 at 8:41

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.

You will find your Universal Analytics tracking code under Admin > Property > Tracking Info > Tracking Code.
Create a new file called analytics.html in the _includes folder found in your Jekyll website’s directory.
Add Google Analytics Tracking ID code to analytics.html.
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.

Skylight answered 22/4, 2016 at 15:15 Comment(4)

Thank you, great post. It's worth noting that within GitHub Pages it is set jekyll.environment == 'production' automatically (github.com/jekyll/jekyll/issues/1219), while the Jekyll default environment is 'development' – Urethra 4/6, 2016 at 8:28

I had _layouts/default.html, but it worked just fine (I'm not familiar with Jekyll) – Matty 9/3, 2020 at 3:48

Alternatively, just copy it directly into head.html – Dickenson 23/10, 2021 at 7:5

Is this out of date? Google Analytics now uses the 'Google tag' instead of the Global Site Tag. – Intuitional 21/1 at 3:43

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

Add google_analytics: UA-xxxxxxxx-x to your _config.yml
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.

Languish answered 23/4, 2017 at 18:4 Comment(2)

Step 2 is actually not needed. Check the documentation at github.com/pages-themes/minimal – Stoneblind 24/5, 2019 at 16:20

As of April 2022, the above theme has more directions re: Google Analytics and using GA's newer scripts: github.com/pages-themes/minimal/tree/… – Decagon 23/4, 2022 at 17:26

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

Marsala answered 8/9, 2014 at 13:22 Comment(3)

It works but all my real time data records it came from Ashburn VA. Even when i visit the page locally...very far from VA. – Rifkin 18/5, 2016 at 14:30

@Rifkin - Is there any chance that your image/pixel is being cached at a CDN in Ashburn VA? – Obedience 27/6, 2016 at 17:41

@Obedience I'm not entirely sure, That post was almost a month ago and I had been using it for a few weeks and data was always Ashburn VA. Looking back at my data now, the data shows location not set for real-time but there are queries from all over the world in history so I'm not sure where the error is. I will likely remove it because the data isn't correct. – Rifkin 27/6, 2016 at 19:29

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 ^#.

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.

1.1 Turn Universal analytics on in the advanced options.

1.2 Configure Universal analytics options.

1.3 Copy the tracking ID for this newly created property.

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.

Commit and Push the changes to github, and after few minutes navigate to your site's URL.
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.

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/

Jarlen answered 21/5, 2021 at 15:36 Comment(2)

In 1.2, is it okay to choose 'Create both a Google Analytics 4 and a Universal Analytics property' or should we create a Universal Analytics property only? – Atalya 6/7, 2021 at 13:8

@Atalya I went for universal analytics only (although I just noticed that the pic I uploaded shows radio button for both selected). Both might work, as long as you get ID of the form UA-XXXXXXXXX-X. The GA4 ID has a different format. – Jarlen 6/7, 2021 at 13:46

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.

Symmetrical answered 7/4, 2014 at 13:51 Comment(1)

I'm pretty use that GitHub's tracking is only for traffic onto the GitHub repository itself (including source code). My GitHub Pages site repo only shows traffic to GitHub URLs. – Kelvin 4/9, 2016 at 2:59

I use the README.md file as a source for my GitHub personal page. I also use one of the GitHub supported themes 'cayman'. No more files is required in the repository apart from _config.yml (unless you want to modify your supported theme).

To add Google Analytics, I just followed the advice in the 'cayman' repository (https://github.com/pages-themes/cayman):

Cayman will respect the following variables, if set in your site's _config.yml:

google_analytics: [Your Google Analytics tracking ID]

Full stop! Anything else! Everything works on the side of Google Analytics! It may be a viable option for those who look for a quick set up of GitHub Pages with Google Analytics.

Mishandle answered 1/11, 2018 at 8:28 Comment(0)

If you're using an automatically generated github page from your github README.md I found this to be the easiest way: Just edit your _config.yml to look like this (with your own google analytics UA id):

theme: jekyll-theme-cayman
title: My Site
description: My site description
url: https://example.com
author: MyName
plugins:
  - jekyll-seo-tag
google_analytics: UA-xxx

Then add a new file to your repository root named Gemfile with this content:

source "https://rubygems.org”
gem "github-pages", group: :jekyll_plugins
gem 'jekyll-seo-tag'

Then wait a bit and refresh your github page and show page source code. Verify that the SEO plugin has inserted your analytics java script. More info here: https://github.com/jekyll/jekyll-seo-tag

From the installation instruction, I didn't have to add the {% seo %} in the html, luckily, because I have no html. Github seems to have thought of that.

Jequirity answered 11/8, 2018 at 17:28 Comment(0)

With me, I was unable to configure Google Analytics 4 (prev Web+App) via adding google_analytics: UA-xxxxxxxx-x to your _config.yml as mentioned previously in one of the answers.

So I had to put the js recommended by the Google Analytics in the .md file.

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

  gtag('config', 'G-XXXXXXXXXXX');
</script>

Anything you put in the script tag in .md will not be rendered.

Packing answered 30/10, 2020 at 2:37 Comment(1)

I downgraded from google analytics 4 to universal analytics for the same reason. Universal Analytics gives tracking code of the form UA-xxxxxxxxx-x, GA4 doesn't. analyticsmania.com/post/… – Jarlen 21/5, 2021 at 14:56

Include a Global site tag in the html output <head>

Once you setup a Google Analytics account, detailed instructions are included under the "Data Streams" tab- select your data source, and then "Tagging instructions" for Global site tag(gtag.js)

Global site tag

the script will look something like this (with id replaced by XXXXXXXXXXX in my example):

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

  gtag('config', 'XXXXXXXXXXX');
</script>

Save the html script within a file in your Project directory (e.g. as "GA_script.html")

Add html file to the header

in the Rmarkdown YAML, add the reference to your specific script (see ref here):

output:
  html_document:
    includes: 
      in_header: GA_script.html

Torquemada answered 1/3, 2021 at 22:42 Comment(0)

This appears to be a bug in Jekyll Minima. See these GitHub issues for reference:

Quasar answered 24/12, 2021 at 14:37 Comment(0)

Set google_analytics at _config.yml with tracing-id started with UA- rather than G-,tracing-id like G-xxxx is of Google Analytics 4. and Jekyll does not support Google Analytics 4.

Use

google_analytics: UA-xxxxxx-x

Do not use

google_analytics: G-xxxxxx

However,Google Analytics(Universal Analytics) is no longer supported by Google until 2023.7.1.

Say answered 1/7, 2022 at 5:2 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags