Adding Google Analytics and Googe Adsense to a Jekyll Website

Google Analytics

Google Analytics allows you to get information about your site’s visitors such as the devices or OS they were using and their location. It goes without saying that information like this can be very useful for deciding how best to deliver content.

1. Sign up

Signing up for Google Analytics is quick easy. Simply follow the steps here: Google Analytics

2. Placing the code within your site

Once you are signed up, you will be provided with some tracking code!
Copy this code and I recommend that you paste it within the _layouts/default.html file, right towards the top within the head tag. This will ensure that the code snippet will be added to every page so you can keep track of your whole website.

3. Reporting

Now you are all set up, simply publish your website (note your site must be live for this to take effect). Then, within the Google Analytics home page, select the Reporting tab at the top of the page. From here you will be able to see the reports for the number of page views, geospatial information, technology and even your site’s behavior.

Google Adsense

Google AdSense allows you to publish advertisements on your website to help build revenue from your site.

1. Sign up

Quickly sign up for Adsense using the following link: Google Adsense

The registration process is relatively simple, by mouse clicks and some personal information input can be made out. It is not necessary to prepare the bank card number and other personal information until mention.The audit process is comparatively long, we need to wait 7-10 days.

2. Generate ad tags

Afterward the first instance, we can make some preliminary google ads and embedded code generation to your blog. After the final pass, official ads will be displayed on the blog.

Login google ads to get ad code, where two of the most critical parts of is the data-ad-client and data-ad-slot. The other remaining parts are style information (also can modify as you like)

1
2
3
4
5
6
7
8
9
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">  </script>
<!-- sidebar -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-5984522345984184"
data-ad-slot="9439014959"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3. Placing the code within your site

My Github hosted website is being used primarily as a blog… as you can see. So what I wanted to do was to host a small advertisement at the end of each blog post, just above the comments section.

To do this, take the provided code and create yourself a file called advertisements.html within the _includes folder. Within this file simply paste your code.

Then go into the _layouts/posts.html file (or any layout file for which you would like ads displayed) and insert the following code (without all the backslashes).

\{\% include advertising.html \%\}

I did this right towards the bottom, but the placements are totally up to you.

You should then receive ads on all pages that utilize that layout!

Notice: If you are using a template Support google-advertisement, then you can only add the following configuration in _config. yml :
{: .notice–info}

1
2
3
google:
ad-client: "ca-pub-5984522345984184"
ad-slot: "9439014959"

4. Linking with Analytics

You can link Analytics and Adsense together from the Adsense home page and click Integrate with Google Analytics and follow the instructions. Couldn’t be simpler!

Note: If you want to see the ads by Google AdSense running on this page, remember to disable your adblocker on this page;)
{: .notice–success}

Reference

文章目录
  1. 1. Google Analytics
    1. 1.1. 1. Sign up
    2. 1.2. 2. Placing the code within your site
    3. 1.3. 3. Reporting
  2. 2. Google Adsense
    1. 2.1. 1. Sign up
    2. 2.2. 2. Generate ad tags
    3. 2.3. 3. Placing the code within your site
    4. 2.4. 4. Linking with Analytics
  • Reference
  • ,