This post will get you up and running with Google Analytics and Google AdSense.
Requirements
- Jekyll-Based Blog. If this step confuses you then you probably don’t have one!
- Google Account that you are willing to use for signing up to Google AdSense and Google Analytics
- Physical Address to associate with your account
- Phone Number (mobile or landline)
Obtaining Google AdSense
Phone Verification/Sign Up 7 minutes Email Validation up to 3 weeks Post Validation TBC
- Go to the Google AdSense website
- Sign up with your google account.
- Enter the details required
- Verify your phone number by SMS or a voice message - this happened within seconds for me
- Await the email verification (I didn’t actually get one!)
- Add the AdSense code snippet to your
<head>
tag - Await another email from Google
Implementation
It has now been several weeks since applying for Google AdSense. After logging into the site, it appeared access had been granted. I cannot determine exactly when this occurred though!
Upon login you will see a code snippet as shown below. Make a note of the google_ad_client
variable. This code need to be inserted into the <head>
portion of your personal site before continuing to the next step on the AdSense page.
I made a separate file _includes/google_adsense.html
and included the following in _includes/head.html
{% if site.google_ad_client %}{% include google_analytics.html %}{% endif %}
Make the change, as highlighted below
so that the google_ad_client
is now imported from your _config.yml
.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "{{site.google_ad_client}}",
enable_page_level_ads: true
});
</script>
Add the following variable google_ad_client: your-adsense-code
to the _config.yml
file. Commit the changes and proceed to the next step on the Google AdSense site as instructed.
Obtaining Google Analytics
Completion 6 minutes
- Go to the Google Analytics website
- Sign up with your Google Account
- You will then be directed to a page with a piece of code similar to below, where I have edited the second parameter (used to be the Tracking ID) of the second
ga()
ready for the next step
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', '{{site.google_tracking_id}}', 'auto');
ga('send', 'pageview');
</script>
- In my Jekyll website directory I created a new file at
_includes/google_analytics.html
and pasted the code above code in that file. - In your
_config.yml
file add the linegoogle_tracking_id: YOUR-TRACKING-ID
- Add the following in within the
<head></head>
section of each page. See 1 for more details.
{% if site.google_tracking %} {% include google_analytics.html %} {% endif %}
You are now set up with Google Analytics and can view the latest data by signing in to the Google Analytics website.
-
The location of your
<head>
will vary on your personal organisation method for yourhtml
. Most users will have a file_includes/head.html
which contains the<head></head>
tag. If this is not you then try looking in_layouts/default.html
. The basic idea is that it should appear in the<head>
tag for every page. ↩