refactor: improve web analytics

_config.yml

@@ -58,7 +58,7 @@ analytics:
 
 # Pageviews settings
 pageviews:
-  provider: # [google | goatcounter]
+  provider: # now only supports 'goatcounter'
 
 # Prefer color scheme setting.
 #

_includes/analytics/goatcounter.html

@@ -1,7 +1,6 @@
 <!-- GoatCounter -->
-
 <script
-  data-goatcounter="https://{{ site.analytics.goatcounter.id }}.goatcounter.com/count"
   async
-  src="https://gc.zgo.at/count.js"
+  src="//gc.zgo.at/count.js"
+  data-goatcounter="https://{{ site.analytics.goatcounter.id }}.goatcounter.com/count"
 ></script>

_includes/analytics/google.html

@@ -1,4 +1,3 @@
-<!-- The GA snippet -->
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.google.id }}"></script>
 <script>

_includes/js-selector.html

@@ -95,13 +95,15 @@
   <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
 
+<!-- Pageviews -->
 {% if page.layout == 'post' %}
-  <!-- Pageviews counter -->
-  {% if site.pageviews.provider != empty and site.pageviews.provider %}
-    {% case site.pageviews.provider %}
+  {% assign provider = site.pageviews.provider %}
+
+  {% if provider and provider != empty %}
+    {% case provider %}
       {% when 'goatcounter' %}
-        {% if site.analytics.goatcounter.id != empty and site.analytics.goatcounter.id %}
-          {% include views-counter/goatcounter.html %}
+        {% if site.analytics[provider].id != empty and site.analytics[provider].id %}
+          {% include pageviews/{{ provider }}.html %}
         {% endif %}
     {% endcase %}
   {% endif %}
@@ -113,13 +115,12 @@
     <script defer src="{{ 'app.min.js' | prepend: js_dist | relative_url }}"></script>
   {% endif %}
 
-  <!-- GA -->
-  {% if site.analytics.google.id != empty and site.analytics.google.id %}
-    {% include analytics/google.html %}
-  {% endif %}
-
-  <!-- GoatCounter -->
-  {% if site.analytics.goatcounter.id != empty and site.analytics.goatcounter.id %}
-    {% include analytics/goatcounter.html %}
-  {% endif %}
+  <!-- Web Analytics -->
+  {% for analytics in site.analytics %}
+    {% capture str %}{{ analytics }}{% endcapture %}
+    {% assign type = str | split: '{' | first %}
+    {% if site.analytics[type].id and site.analytics[type].id != empty %}
+      {% include analytics/{{ type }}.html %}
+    {% endif %}
+  {% endfor %}
 {% endif %}

_includes/pageviews/goatcounter.html

@@ -0,0 +1,18 @@
+<!-- Display GoatCounter pageviews -->
+<script>
+  let pv = document.getElementById('pageviews');
+
+  if (pv !== null) {
+    const uri = location.pathname.replace(/\/$/, '');
+    const url = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`;
+
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        pv.innerText = new Intl.NumberFormat().format(data.count);
+      })
+      .catch((error) => {
+        pv.innerText = '1';
+      });
+  }
+</script>

_layouts/post.html

@@ -8,6 +8,7 @@
   - post-nav
   - comments
 ---
+
 {% include lang.html %}
 
 <article class="px-1">
@@ -74,16 +75,21 @@ <h1 data-toc-skip>{{ page.title }}</h1>
         </span>
 
         <div>
-          <!-- pageviews counter -->
-          {% include views-counter.html %}
+          <!-- pageviews -->
+          {% if site.pageviews.provider and site.analytics[site.pageviews.provider].id %}
+            <span>
+              <em id="pageviews">
+                <i class="fas fa-spinner fa-spin small"></i>
+              </em>
+              {{ site.data.locales[lang].post.pageview_measure }}
+            </span>
+          {% endif %}
 
           <!-- read time -->
           {% include read-time.html content=content prompt=true lang=lang %}
         </div>
       </div>
-      <!-- .d-flex -->
     </div>
-    <!-- .post-meta -->
   </header>
 
   <div class="content">