I have my website hosted on github pages and I wanted to add Google Analytics to count views on it.
I created a Google Analytics account, created a new UA property and added full path to my website ( username.github.io/reponame/ ).
Then I added global site tag to head of my index.html ...
I waited for some time but still I can see 0 active viewers in analytics page even if I active on my website using 2 devices...
Since I found various answers about setting up analytics with Jekyll, I added Cayman theme, edited _config.yml, added _includes and did whatever said in that blog but still it didn't work ( I am not used to github actually )... So, I removed whatever changes I made for that Jekyll thing and now my repository consists of only stuff which I added in the beginning.
Why is it not working on my website ? Did I go wrong somewhere ?
How do I add Google Analytics if my repository currently consists of only index.html, css files and JS files ?
Make sure to have included {% include analytics.html %} in your website somewhere. The best practice is to put it into the head of your HTML.
Inspect your webpage, for instance with Chrome tools, to check that the script containing your Analytics ID is indeed loaded.
You should see something like:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZKGE3RWEMU"></script>
Related
I deployed a gatsby blog I made to github pages. The first page links to a blog article. Nothing shows up when the link is clicked. But if I type the url in manually (Same url that is linked) I see the page for half a second before it dissapears to a blank page.
Helpful information
Everything in the network tab is status code 200
The HTML is returned in the get request, it is visible in the response
head tag is on the page correctly, body tag is missing the html
No console errors
Works perfectly on development server (localhost)
Domain is hosted with domain.com
Using createpage gatsby plugin to generate article page
It works when I deploy on netlify to a random url so maybe something to do with my domain or the gh-pages deployment
After looking at your GitHub code, I think you have a problem here: (Wrong URL: /blog/blog/why-gatsby), also your master code does not match code with the gh-pages (I know it's generated files from gatsby build but other stuff). Also, why are you creating a static query in the index.js component? You can do that with a regular page query.
Your gatsby site starts from https://www.ragith.com/blog/ and that's why you have that kind of a problem. When gatsby look into pages, there's only blog.js inside of it.
I.E:
pages/blog.js
Link problem
<a class="article-card-link" href="/blog/blog/why-gatsby"><section><article><h2 class="article-title">Why Gatsby js ?</h2><p class="article-date">May 09, 2020</p><p class="article-excerpt">In a world with so many JavaScript frameworks such as React, Vue, heck even Next, why Gatsby? The short answer is, none of those frameworks are the target market of Gatsby. Gatsby is a static website generator. Great! Wait, who cares? Well a lot of my clients and so will yours…</p>READ MORE</article></section></a>
I'm just a regular user on GitHub. I don't have an enterprise or anything like that. I was wondering can I still create a https://myusername.github.io/ page like a blog or portfolio, and can that page contain links to individual repo github pages like https://myusername.github.io/myrepo1 That way this can act like a portfolio website.
Is this possible? I keep having issues with setting up the https://myusername.github.io/ page but the repo-based url works fine and is easy to set up
A User GitHub page will contain markdown files which, in turn, can include any URL you want.
Incuding URLs referencing your other repositories.
I have created a Github Pages site and put it on repository abc of github account with username xyz.
So, my site is now live on xyz.github.io/abc
I created a cname file with my custom domain, and configured my DNS with the settings said on Github pages.
Now, my site is also live on mycustomdomain.com
Now, I don't want my site to be live on xyz.github.io/abc . I want it to redirect to mycustomdomain.com or not accessible.
Is there any way to do that?
I know that I can create User Pages site (with username.github.io) which will automatically redirect to custom domain, but I want to create project site.
Any suggestions?
A CNAME solution:
Sure. Github has a nice functionality for it.
When you create CNAME folder inside of your repo, you will be redirected:
https://help.github.com/articles/adding-a-cname-file-to-your-repository/
Check out my Github Pages website: https://github.com/ondrek/ondrek.github.io
( you can browse ondrek.com, but it's impossible to browse ondrek.github.io )
A JS solution:
If you want to redirect a custom page — the only possible solution will be javascript redirection.
if (window.location.href==="https://xyz.github.io") {
window.location.href = "https://mycustomdomain.com";
}
but it will not solve your problem with Google. You can solve this with correct using Google Webmaster Tools and tell to Google about the duplicate (for SEO purposes).
I had a GitHub Pages website (https://kamarada.github.io/), I moved it to GitLab (https://kamarada.gitlab.io/) and besides that I set up a custom domain on GitLab (https://linuxkamarada.com/). Now the question: how to make a 301 redirect from the GitHub Pages to the custom domain? Is that possible?
Well, as Ciro Santilli answered on this other question, there is no "beautiful non-plugin solution". Indeed, the solution I found is not beautiful, it is more kind of a workaround, but it works.
Inspired by the Samuel Ondrek answer on this same question (thanks a lot!), I set up CNAME redirection.
Go to your GitHub Pages repo, click Settings and below GitHub Pages, under Custom domain, enter your custom domain and click Save.
Now open another tab on your browser, open DevTools (F12), select the Network tab. Try to access your GitHub Pages website and see that a 301 redirect happens.
GitHub is going to complain that your domain is not configured properly:
Well, that does not really matter. What matters is that you have the 301 redirect required by the Google Search Console's Change of Address Tool and your website won't lose its Google ranking.
This might be a bit old but I'd still like to give an alternative answer to this. You can simply use meta refresh on your index.html
<meta http-equiv="refresh" content="1;url=http://example.com/" />
Then use a regular link (an a message also) on the page in case refresh stops. Though it is not recommended for SEO since google might index the blank page. But it would most likely work work.
You could use JavaScript to inspect the domain of the current page and redirect if necessary. If you go this route, the question and answer are already on SO:
Redirection based on URL - JavaScript
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?
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
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 )
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.
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.
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 #.
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/
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.
Next, under the accounts panel, on the left, click: Create New 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 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.
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.
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.
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
This appears to be a bug in Jekyll Minima. See these GitHub issues for reference:
feat: Support GA4 - Google Analytics 4 properties
Google Analytics data not received
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.
I am using the 'Automatic Generator' of GitHub Pages, and I see it only generates a single index.html and other web resources.
How it works if I want to have a multi-page website generated from other markdown files?
You can get github to generate .html files from .markdown files by ensuring the top of the .markdown starts with the ---- block like this:
---
title: This will be used as the title-tag of the page head
---
hello
=====
**You are here!**
Found this here:
http://xlson.com/2010/11/09/getting-started-with-github-pages.html
Github will automatically create pages for you, if you include the markdown file.
index.html - yourname.github.io/project-name/
about.md - yourname.github.io/project-name/about
foo.md - yourname.github.io/project-name/foo
Tested this and working.
If you want to get into the really fun stuff - you need to get into Jekyll http://jekyllrb.com/
You pull the generated page, make any modification and addition you like (including adding new pages and links between the pages), then commit and push.
The generated single page helps you to make you start. You can duplicate its layout to generate other similar-looking pages by hand.
See Help.
Github Pages uses the Jekyll site generator which suports converting any number of markdown files to HTML for you, and applying the surrounding template via a layout file. See github's documentation on using Jekyll: https://help.github.com/articles/using-jekyll-with-pages
The trick is that you have to download a jekyll template/theme and include it in your gh-pages branch on your own (standard jekyll configuration), instead of just allowing Github Pages to auto-generate the one file using its own built-in themes.
GitHub Pages' automatic generator only generates one page.
You can add the new file directly, github page publishes all data (including data inside the subfolders) for you.
Just made gh-pages-generator - the utility to generate site with the navigation from multiple markdown files having links to each other.
"Github pages" hosts web page from index.md / readme.md as main page . However if you have an index.html file then it'll be hosted from html file.However , if you are trying to host a multi page website using "Jekyll themes" then Jekyll theme is not straightaway deployed in subsidiary pages .
Case 1) You are using markdowns to host your pages
index.md -> main page
page1.md -> page 1 of your website
..
so on
To generate a multiple page website using github page just give relative path to the required page without extension i.e.
make a button
Go to next page
And by clicking on this button you will be directed to page1 with jekyll theme deployed