Simplify the PV config options

- Remove options `site.google_analytics.pv.enabled` and `site.google_analytics.pv.proxy_url`
- Rename options `site.google_analytics.pv.cache` to `site.google_analytics.pv.cache_path`

Author: cotes2020

_config.yml

@@ -50,15 +50,11 @@ google_site_verification: google_meta_tag_verification # change to your verifica
 # --------------------------
 
 google_analytics:
-  id: ''          # Fill with your Google Analytics ID
+  id: ''              # fill in your Google Analytics ID
+  # Google Analytics pageviews report settings
   pv:
-    # The Google Analytics pageviews switch.
-    # DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
-    enabled: false
-    # the next options only valid when `google_analytics.pv` is enabled.
-    proxy_url: ''
-    proxy_endpoint: ''
-    cache: false  # pv data local cache, good for the users from GFW area.
+    proxy_endpoint:   # fill in the Google Analytics superProxy endpoint of Google App Engine
+    cache_path:       # the local PV cache data, friendly to visitors from GFW region
 
 # Prefer color scheme setting.
 #

_includes/head.html

@@ -8,17 +8,12 @@
 
   {% if page.layout == 'home' or page.layout == 'post' %}
 
-    {% if site.google_analytics.pv.enabled %}
-
-      {% if site.google_analytics.pv.proxy_endpoint != ''
-            and site.google_analytics.pv.proxy_endpoint %}
-        <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
-      {% endif %}
-
-      {% if site.google_analytics.pv.cache %}
-        <meta name="pv-cache-path" content="{{ '/assets/js/data/pageviews.json' | relative_url }}">
-      {% endif %}
+    {% if site.google_analytics.pv.proxy_endpoint %}
+      <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
+    {% endif %}
 
+    {% if site.google_analytics.pv.cache_path %}
+      <meta name="pv-cache-path" content="{{ site.google_analytics.pv.cache_path | relative_url }}">
     {% endif %}
 
   {% endif %}
@@ -46,9 +41,12 @@
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
     <link rel="dns-prefetch" href="https://www.googletagmanager.com">
 
-    {% if site.google_analytics.pv.proxy_url and site.google_analytics.pv.enabled %}
-      <link rel="preconnect" href="{{ site.google_analytics.pv.proxy_url }}" crossorigin="use-credentials">
-      <link rel="dns-prefetch" href="{{ site.google_analytics.pv.proxy_url }}">
+    {% if site.google_analytics.pv.proxy_endpoint %}
+      {% assign proxy_url = site.google_analytics.pv.proxy_endpoint
+        | replace: "https://", "" | split: "/" | first | prepend: "https://" %}
+
+      <link rel="preconnect" href="{{ proxy_url }}" crossorigin="use-credentials">
+      <link rel="dns-prefetch" href="{{ proxy_url }}">
     {% endif %}
   {% endif %}
 

_includes/js-selector.html

@@ -3,7 +3,7 @@
 -->
 
 {% if page.layout == 'home' or page.layout == 'post' %}
-  {% if site.google_analytics.pv.enabled %}
+  {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
     <!-- pv-report needs countup.js -->
     <script async src="https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js"></script>
     <script async src="{{ '/assets/js/dist/pvreport.min.js' | relative_url }}"></script>

_layouts/home.html

@@ -68,7 +68,7 @@ <h1>
         {% include read-time.html content=post.content %}
 
         <!-- page views -->
-        {% if site.google_analytics.pv.enabled %}
+        {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
         <i class="far fa-eye fa-fw"></i>
         <span id="pv_{{-post.title-}}" class="pageviews">
           <i class="fas fa-spinner fa-spin fa-fw"></i>

_layouts/post.html

@@ -33,7 +33,7 @@ <h1 data-toc-skip>{{ page.title }}</h1>
           {% include read-time.html content=content %}
 
           <!-- page views -->
-          {% if site.google_analytics.pv.enabled %}
+          {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
           <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span>
           {% endif %}
 

_posts/2021-01-03-enable-google-pv.md

@@ -7,7 +7,7 @@ tags: [google analytics, pageviews]
 ---
 
 
-This post is to enable Page Views on the [**Chirpy**][chirpy-homepage] theme based blog that you just built. This requires technical knowledge and it's recommended to keep the `google_analytics.pv` disabled unless you have a good reason. If your website has low traffic, the page views count would discourage you to write more blogs. With that said, let's start with the setup.
+This post is to enable Page Views on the [**Chirpy**][chirpy-homepage] theme based blog that you just built. This requires technical knowledge and it's recommended to keep the `google_analytics.pv.*` empty unless you have a good reason. If your website has low traffic, the page views count would discourage you to write more blogs. With that said, let's start with the setup.
 
 ## Set up Google Analytics
 
@@ -39,14 +39,11 @@ Now, click on the new data stream and grab the **Measurement ID**. It should loo
 
 ```yaml
 google_analytics:
-  id: 'G-V6XXXXXXX'          # Fill with your Google Analytics ID
+  id: 'G-V6XXXXXXX'   # fill in your Google Analytics ID
+  # Google Analytics pageviews report settings
   pv:
-    # The Google Analytics pageviews switch.
-    enabled: false
-    # the next options only valid when `google_analytics.pv` is enabled.
-    proxy_url: ''
-    proxy_endpoint: ''
-    cache: false  # pv data local cache, good for the users from GFW area.
+    proxy_endpoint:   # fill in the Google Analytics superProxy endpoint of Google App Engine
+    cache_path:       # the local PV cache data, friendly to visitors from GFW region
 ```
 
 When you push these changes to your blog, you should start seeing the traffic on your Google Analytics. Play around with Google Analytics dashboard to get familiar with the options available as it takes like 5 mins to pickup your changes. You should now be able to monitor your traffic in realtime.
@@ -222,17 +219,12 @@ Once all the hard part is done, it is very easy to enable the Page View on Chirp
 
 Update the `_config.yml` file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following:
 
-
 ```yaml
 google_analytics:
-  id: 'G-XXXXXXXXXX'   # Fill with your Google Analytics ID
+  id: 'G-V6XXXXXXX'   # fill in your Google Analytics ID
   pv:
-    # The Google Analytics pageviews switch.
-    enabled: true
-    # the next options only valid when `google_analytics.pv` is enabled.
-    proxy_url: 'https://PROJECT_ID.REGION_ID.r.appspot.com'
     proxy_endpoint: 'https://PROJECT_ID.REGION_ID.r.appspot.com/query?id=<ID FROM SUPER PROXY>'
-    cache: false      # pv data local cache, good for the users from GFW area.
+    cache_path:       # the local PV cache data, friendly to visitors from GFW region
 ```
 
 Now, you should see the Page View enabled on your blog.

assets/js/_utils/pageviews.js

@@ -18,29 +18,30 @@ const getInitStatus = (function () {
 }());
 
 const PvOpts = (function () {
+  function hasContent(selector) {
+    let content = $(selector).attr("content");
+    return (typeof content !== "undefined" && content !== false);
+  }
+
   return {
     getProxyEndpoint() {
       return $("meta[name=pv-proxy-endpoint]").attr("content");
     },
     getLocalData() {
       return $("meta[name=pv-cache-path]").attr("content");
     },
+    hasProxyEndpoint() {
+      return hasContent("meta[name=pv-proxy-endpoint]");
+    },
     hasLocalData() {
-      let path = PvOpts.getLocalData();
-      return (typeof path !== "undefined" && path !== false);
+      return hasContent("meta[name=pv-cache-path]");
     }
   }
 }());
 
-const PvData = (function () {
+const PvStorage = (function () {
   const KEY_PV = "pv";
   const KEY_CREATION = "pv_created_date";
-  const KEY_PV_SRC = "pv_source";
-
-  const Source = {
-    ORIGIN: "origin",
-    PROXY: "proxy"
-  };
 
   function get(key) {
     return localStorage.getItem(key);
@@ -51,48 +52,30 @@ const PvData = (function () {
   }
 
   return {
-    getData() {
+    hasCache() {
+      return (localStorage.getItem(KEY_PV) !== null);
+    },
+    getCache() {
       // get data from browser cache
       return JSON.parse(localStorage.getItem(KEY_PV));
     },
-    saveOriginCache(pv) {
-      set(KEY_PV, pv);
-      set(KEY_PV_SRC, Source.ORIGIN);
-      set(KEY_CREATION, new Date().toJSON());
-    },
-    saveProxyCache(pv) {
+    saveCache(pv) {
       set(KEY_PV, pv);
-      set(KEY_PV_SRC, Source.PROXY);
       set(KEY_CREATION, new Date().toJSON());
     },
-    isFromOrigin() {
-      return get(KEY_PV_SRC) === Source.ORIGIN;
-    },
-    isFromProxy() {
-      return get(KEY_PV_SRC) === Source.PROXY;
-    },
     isExpired() {
-      if (PvData.isFromOrigin()) {
-        let date = new Date(get(KEY_CREATION));
-        date.setDate(date.getDate() + 1); /* update origin records every day */
-        return Date.now() >= date.getTime();
-
-      } else if (PvData.isFromProxy()) {
-        let date = new Date(get(KEY_CREATION));
-        date.setHours(date.getHours() + 1); /* update proxy records per hour */
-        return Date.now() >= date.getTime();
-      }
-      return false;
+      let date = new Date(get(KEY_CREATION));
+      date.setHours(date.getHours() + 1); // per hour
+      return Date.now() >= date.getTime();
     },
     getAllPageviews() {
-      return PvData.getData().totalsForAllResults["ga:pageviews"];
+      return PvStorage.getCache().totalsForAllResults["ga:pageviews"];
     },
     newerThan(pv) {
-      return PvData.getAllPageviews() > pv.totalsForAllResults["ga:pageviews"];
+      return PvStorage.getAllPageviews() > pv.totalsForAllResults["ga:pageviews"];
     },
     inspectKeys() {
       if (localStorage.getItem(KEY_PV) === null
-        || localStorage.getItem(KEY_PV_SRC) === null
         || localStorage.getItem(KEY_CREATION) === null) {
         localStorage.clear();
       }
@@ -101,7 +84,6 @@ const PvData = (function () {
 
 }()); /* PvData */
 
-
 function countUp(min, max, destId) {
   if (min < max) {
     let numAnim = new CountUp(destId, min, max);
@@ -113,7 +95,6 @@ function countUp(min, max, destId) {
   }
 }
 
-
 function countPV(path, rows) {
   let count = 0;
 
@@ -130,7 +111,6 @@ function countPV(path, rows) {
   return count;
 }
 
-
 function tacklePV(rows, path, elem, hasInit) {
   let count = countPV(path, rows);
   count = (count === 0 ? 1 : count);
@@ -145,7 +125,6 @@ function tacklePV(rows, path, elem, hasInit) {
   }
 }
 
-
 function displayPageviews(data) {
   if (typeof data === "undefined") {
     return;
@@ -166,69 +145,59 @@ function displayPageviews(data) {
   }
 }
 
-
 function fetchProxyPageviews() {
-  $.ajax({
-    type: "GET",
-    url: PvOpts.getProxyEndpoint(),
-    dataType: "jsonp",
-    jsonpCallback: "displayPageviews",
-    success: (data, textStatus, jqXHR) => {
-      PvData.saveProxyCache(JSON.stringify(data));
-    },
-    error: (jqXHR, textStatus, errorThrown) => {
-      console.log("Failed to load pageviews from proxy server: " + errorThrown);
-    }
-  });
+  if (PvOpts.hasProxyEndpoint()) {
+    $.ajax({
+      type: "GET",
+      url: PvOpts.getProxyEndpoint(),
+      dataType: "jsonp",
+      jsonpCallback: "displayPageviews",
+      success: (data, textStatus, jqXHR) => {
+        PvStorage.saveCache(JSON.stringify(data));
+      },
+      error: (jqXHR, textStatus, errorThrown) => {
+        console.log("Failed to load pageviews from proxy server: " + errorThrown);
+      }
+    });
+  }
 }
 
-
-function fetchPageviews(fetchOrigin = true, coverOrigin = false) {
-  if (fetchOrigin) {
+function loadPageviews(hasCache = false) {
+  if (PvOpts.hasLocalData()) {
     fetch(PvOpts.getLocalData())
       .then((response) => response.json())
       .then((data) => {
-        if (coverOrigin) {
-          if (PvData.newerThan(data)) {
-            return;
-          }
+        // The cache from the proxy will sometimes be more recent than the local one
+        if (hasCache && PvStorage.newerThan(data)) {
+          return;
         }
         displayPageviews(data);
-        PvData.saveOriginCache(JSON.stringify(data));
+        PvStorage.saveCache(JSON.stringify(data));
       })
-      .then(() => fetchProxyPageviews());
+      .then(() => {
+        fetchProxyPageviews();
+      });
 
   } else {
     fetchProxyPageviews();
   }
 
 }
 
-
 $(function() {
   if ($(".pageviews").length <= 0) {
     return;
   }
 
-  PvData.inspectKeys();
-  let data = PvData.getData();
-
-  if (data) {
-    displayPageviews(data);
-
-    if (PvData.isExpired()) {
-      fetchPageviews(true, PvData.isFromProxy());
-
-    } else {
-
-      if (PvData.isFromOrigin()) {
-        fetchPageviews(false);
-      }
+  PvStorage.inspectKeys();
 
+  if (PvStorage.hasCache()) {
+    displayPageviews(PvStorage.getCache());
+    if (!PvStorage.isExpired()) {
+      return;
     }
-
-  } else {
-    fetchPageviews(PvOpts.hasLocalData());
   }
 
+  loadPageviews(PvStorage.hasCache());
+
 });

assets/js/data/cache-list.js

@@ -53,9 +53,9 @@ const include = [
 ];
 
 const exclude = [
-  {%- if site.google_analytics.pv.proxy_url and site.google_analytics.pv.enabled -%}
-    '{{ site.google_analytics.pv.proxy_url }}',
+  {%- if site.google_analytics.pv.proxy_endpoint -%}
+    'https://{{ site.google_analytics.pv.proxy_endpoint | replace: "https://", "" | split: "/" | first }}',
   {%- endif -%}
-  '/assets/js/data/pageviews.json',
-  '/img.shields.io/'
+  'https://img.shields.io',
+  '/assets/js/data/pageviews.json'
 ];