Google analytics and adsense in Hexo

Posted on Edited on In , Views:

Google analytics

Google Analytics 4 has replaced Universal Analytics(tracking id based). Starting July 1, 2023, Universal Analytics properties will stop processing data. If you want to keep using Google Analytics to measure your website traffic, you need a Google Analytics 4 property, aks Google tag.

To activate Google Analytics, Google provides you a tag named as “Google Tag”. You can find the “Google Tag” in Google analytics console as below.

  1. Go to Google analytics console
  2. Click “Admin” on the left bottom corner
  3. Click “Data Streams” under your website Property
  4. Click the arrow to the right of your website name
  5. In the Google Tag section, click “Configure tag settings”
  6. Click “Installation Instructions” to the right of “Your Google tag”, you will see the Google Tag code piece for your account
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxx"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-xxxx');
     </script>

Add Google Analytics to Hexo

There are multiple ways to configure Google Analytics with Hexo blog. You may embed the script to the theme code. In this example, we don’t want to change the code under theme, so we configure it outside of the theme source folder.

  1. Create a file “_config.next.yml” under website root, at same level as Hexo config file “_config.yml”. Note, since I’m using Hexo Next theme, I name it as “_config.next.yml”.
  2. Add the following code to “_config.next.yml”
    1
    2
    custom_file_path:
      head: source/_third-party/google/google-adsense-analytics.swig
  3. Create folder and file as above path indicates
  4. Add the Google Tag script you got from Google Analytics console to the file “source/_third-party/google/google-adsense-analytics.swig”
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- Google tag (gtag.js) for analytics-->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxx"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-xxxx');
    </script>
  5. To this point, Google Analytics is added to Hexo. The Google tag script will be included in between “head” element of any page. You can verify it by viewing page source.

Google Adsense

You can use Google Adsense if you want to value your blog content.

Add Google Adsense to Hexo

Similar to Google Analytics, you just need to get the Google Adsense code piece and embed to your website.

  1. Go to Google Adsense
  2. Click “Ads” on the left sidebar
  3. Click “Get code”, copy and paste it to the file “source/_third-party/google/google-adsense-analytics.swig”. It will embed the code in between “head” element of your website pages.
    1
    2
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxx"
      crossorigin="anonymous"></script>
  4. To this point, Google will automatically show ads in all the best places of the webpages for you