Google Analytics and Adsense in Hexo

This is the guide to setup the Google Adsense and Analytics in Hexo with Theme-NexT unlocking more potential possibility of your blog.

Component	version
hexo	7
hexo-theme-next	8

Google Adsense

Google Adsense
https://adsense.google.com

Let’s monetize your blog with Google Adsense ads.

1. Register and activate the account of Google Adsense
2. Navigate to the ads by units(recommended), customize your style of in-artical ads and copy the code snippet
3. Uncomment the custom_file_path of post-body-end.njk in _config.next.yml

   # Define custom file paths.
   # Create your custom files in site directory `source/_data` and uncomment needed files below.
   custom_file_path:
   postBodyEnd: source/_data/post-body-end.njk

4. Create a new file {HEXO_ROOT}/source/_data/post-body-end.njk and paste the code snippet from google adsense in it, for example:

   <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3453453453453"
    crossorigin="anonymous"></script>
    <ins class="adsbygoogle"
         style="display:block; text-align:center;"
         data-ad-layout="in-article"
         data-ad-format="fluid"
         data-ad-client="ca-pub-3453453453453"
         data-ad-slot="87987983453453453453979"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

Google Analytics

Google Analysis
https://analytics.google.com

Let’s step forwards

1. Register and activate the account of google analytics
2. Steps forward follow the flow of GA4 property setup, get the Measurement ID and API secret
   The Measurement ID is generated in Admin => => Data Collection and Modification => Property => Data Streams => choose your web data stream => Measurement ID,
   The Measurement ID is like `G-XXXXXXXX’
   The API secret is generated in Admin => Data Collection and Modification => Data Streams => choose your web data stream => Measurement Protocol API secrets => Create

Configure Hexo NexT Theme

1. Open the file _config.next.yml in your Hexo root directory
2. Find the section of google_analytics and configure it as below:

   # Google Analytics
   # See: https://analytics.google.com
   google_analytics:
     tracking_id: # <Measurement ID>
     # By default, NexT will load an external gtag.js script on your site.
     # If you only need the pageview feature, set the following option to true to get a better performance.
     only_pageview: true
     # only needed if you are using `only_pageview` mode, https://developers.google.com/analytics/devguides/collection/protocol/ga4
     measure_protocol_api_secret: <API secret  >

3. Save the file and deploy your blog, you can check the real-time data in Google Analytics now.

Reference

创建和提交站点地图
https://support.google.com/webmasters/answer/183668?hl=zh-Hans
Google adsense
https://www.google.com/adsense
Google Analysis
https://analytics.google.com/analytics/web/#/
谷歌广告类型的说明
https://darylliu.github.io/archives/6a1f6623.html
Generate API secrets for Measurement Protocol
https://support.google.com/analytics/answer/9814495?hl=en&utm_id=ad
[GA4] Set up Analytics for a website and/or app
https://support.google.com/analytics/answer/9304153?hl=en&utm_id=ad#web&zippy=%2Cweb%2Cadd-the-google-tag-directly-to-your-web-pages
How to find your Google tag ID and use it for website tracking
https://www.youtube.com/watch?v=pmENn6rrDPs&t=131s
What are impressions, position, and clicks?
https://support.google.com/webmasters/answer/7042828#impressions