How to add Google Analytics Tracking ID to GitHub Pages

Question

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?

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. — Christopher D. Emerson, May 03 '19 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: https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk and https://www.analyticsmania.com/post/google-tag-manager-vs-google-analytics/ — Christopher D. Emerson, May 03 '19 at 13:20
I had similar issues of my visits not registering, turns out AdBlock was responsible for them. — Andrew Zaw, Jan 06 '20 at 19:35

exexzian · Accepted Answer · 2019-05-21T15:26:57.757

171

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 )

edited May 21 '19 at 15:26

answered Jun 20 '13 at 09:16

exexzian

7,345
6
41
50

@Bingo , I currently use `` 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.</script> – Avi Jul 15 '13 at 06: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 – exexzian Jul 15 '13 at 09:07
2

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` – Avi Jul 15 '13 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 – exexzian Jul 15 '13 at 12:55
@Bingo No, but `avi-aryan.github.io` Does a `/` make a difference. – Avi Jul 15 '13 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 – exexzian Jul 15 '13 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. – Avi Jul 16 '13 at 03:38
@AviAryan ohh congrats, and confirmation about `/` - will have to try it out by changing the website listing – exexzian Jul 16 '13 at 04: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` – Avi Jul 16 '13 at 08: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? – exexzian Jul 16 '13 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. – Avi Jul 17 '13 at 09:02
@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) – exexzian Jul 17 '13 at 09: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. – OhadR Dec 14 '13 at 09:02
@OhadR 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 – exexzian Dec 14 '13 at 13:22
because unfortunately your suggestion did not work for me, so I had to keep searching for another way... – OhadR Dec 14 '13 at 13:37
1

@OhadR ohh sorry for that if it didn't helped u – exexzian Dec 14 '13 at 13:46
1

FYI: I used the same logic for editing `index.html` for adding twitter's conversion tracking too. Thanks! – pulkitsinghal Feb 25 '15 at 01: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. – sealocal May 12 '15 at 04:45
@sealocal thanks for the uspdate. Let me check on the same and then will update the answer – exexzian May 12 '15 at 04: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? – sc28 Sep 06 '17 at 15:28
@sc28 just verified on my github pages and yeah I can see stats from google analytics. Are you getting error ? – exexzian Sep 06 '17 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 section. Is that really the right place? – sc28 Sep 06 '17 at 15:53
1

@sc28 when did you put analytics on your page? google usually updates the dashboard after quite a while – exexzian Sep 06 '17 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? – sc28 Sep 06 '17 at 16:04
2

@sc28 no it usually takes a day or two.. check after a day or two – exexzian Sep 06 '17 at 16:06
1

This is the simplest answer, and worked for me in a few minutes. – jimh Jan 22 '18 at 23:59
1

@jimh glad it helped you :) – exexzian Jan 23 '18 at 02:29
is it safe to have your google analytics tracking ID public? – jerpint Jun 20 '18 at 03:47
@exexzian The github help article page link given in the answer is broken. https://help.github.com/articles/creating-pages-with-the-automatic-generator The new link page is here... https://help.github.com/en/enterprise/2.14/user/articles/creating-pages-with-the-automatic-generator – Kharthigeyan May 21 '19 at 12:45
@Kharthigeyan thanks for the update - updated the link – exexzian May 21 '19 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/`. – payne Oct 19 '20 at 05:33

score 80 · Answer 2 · edited Apr 22 '16 at 15:50

80

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.

edited Apr 22 '16 at 15:50

Paul Roub

35,100
27
72
83

answered Apr 22 '16 at 15:15

Colin

1,009
7
8

5

Thank you, great post. It's worth noting that within GitHub Pages it is set `jekyll.environment == 'production'` automatically (https://github.com/jekyll/jekyll/issues/1219), while the Jekyll default environment is `'development'` – Andrea Jun 04 '16 at 08:28
I had `_layouts/default.html`, but it worked just fine (I'm not familiar with Jekyll) – Joey Baruch Mar 09 '20 at 03:48

score 18 · Answer 3 · edited Jul 07 '17 at 18: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.

Step 2 is actually not needed. Check the documentation at https://github.com/pages-themes/minimal — kzu, May 24 '19 at 16:20

score 16 · Answer 4 · edited Dec 03 '17 at 13:02

16

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

edited Dec 03 '17 at 13:02

Flimzy

60,850
13
104
147

answered Sep 08 '14 at 13:22

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. – jtlindsey May 18 '16 at 14:30
@jtlindsey - Is there any chance that your image/pixel is being cached at a CDN in Ashburn VA? – pulkitsinghal Jun 27 '16 at 17:41
@pulkitsinghal 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. – jtlindsey Jun 27 '16 at 19:29

score 6 · Answer 5 · answered Apr 07 '14 at 13:51

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.

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. — Nick McCurdy, Sep 04 '16 at 02:59

score 5 · Answer 6 · answered Nov 01 '18 at 08:28

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.

Json · Answer 7 · 2018-08-11T19:38:48.037

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.

Sahil Singh · Answer 8 · 2021-05-28T09:52:33.467

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/

score 0 · Answer 9 · answered Oct 30 '20 at 02:37

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.

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. https://www.analyticsmania.com/post/downgrade-from-google-analytics-4-to-universal-analytics/ — Sahil Singh, May 21 '21 at 14:56

score 0 · Answer 10 · answered Mar 01 '21 at 22:42

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

How to add Google Analytics Tracking ID to GitHub Pages

10 Answers10

Linked