handle chartbeat initial page load better (#274)

nypublicradio · May 1, 2023 · 83ad25b · 83ad25b
1 parent 99a86e7
commit 83ad25b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 23 deletions.
diff --git a/composables/states.ts b/composables/states.ts
@@ -15,6 +15,7 @@ export const useNavigation = () => useState<Navigation>('navigation', () => ({
     propertyDescription: ''
 }))
 export const useStrapline = () => useState<string>('strapline', () => 'A non-profit newsroom, powered by WNYC.')
+export const useChartbeatFirstPageLoaded = () => useState<boolean>('chartbeatFirstPageLoaded', () => false)
 
 
 // audio player globals

diff --git a/plugins/chartbeat.client.ts b/plugins/chartbeat.client.ts
@@ -1,33 +1,43 @@
 import { nextTick } from 'vue';
 
 export default defineNuxtPlugin(() => {
-  /* eslint-disable */
-  (function() {
-    /** CONFIGURATION START **/
-    const _sf_async_config = window._sf_async_config = (window._sf_async_config || {});
-    _sf_async_config.uid = 16246; //CHANGE THIS TO YOUR ACCOUNT ID
-    _sf_async_config.domain = 'gothamist.com'; //CHANGE THIS TO YOUR SITE ID
-    _sf_async_config.useCanonical = true;
-    _sf_async_config.useCanonicalDomain = true;
-    _sf_async_config.sections = ''; //SET PAGE SECTION(S)
-    _sf_async_config.authors = ''; //SET PAGE AUTHOR(S)
-    _sf_async_config.title = document.title; //SET PAGE TITLE
-    /** CONFIGURATION END **/
-    function loadChartbeat() {
-      const e = document.createElement('script');
-      const n = document.getElementsByTagName('script')[0];
-      e.type = 'text/javascript';
-      e.async = true;
-      e.src = '//static.chartbeat.com/js/chartbeat.js';
-      n.parentNode.insertBefore(e, n);
+  let firstPageLoaded = useChartbeatFirstPageLoaded()
+
+  const initializeChartbeat = (pageInfo) => {
+    const _sf_async_config = window._sf_async_config = (window._sf_async_config || {})
+    _sf_async_config.uid = 16246
+    _sf_async_config.domain = 'gothamist.com'
+    _sf_async_config.useCanonical = true
+    _sf_async_config.useCanonicalDomain = true
+    _sf_async_config.sections = pageInfo.sections || ''
+    _sf_async_config.authors = pageInfo.authors || ''
+    _sf_async_config.title = document.title
+
+    const e = document.createElement('script')
+    const n = document.getElementsByTagName('script')[0]
+    e.type = 'text/javascript'
+    e.async = true
+    e.src = '//static.chartbeat.com/js/chartbeat.js'
+    n.parentNode.insertBefore(e, n);
+  }
+
+  const updateChartbeat = (pageInfo) => {
+    if (typeof window.pSUPERFLY !== 'undefined') {
+      window.pSUPERFLY.virtualPage(pageInfo)
     }
-    loadChartbeat();
-  })();
+  }
+
   const updatePage = (pageInfo) => {
-    if (!process.server && typeof window.pSUPERFLY !== 'undefined') {
-        window.pSUPERFLY.virtualPage(pageInfo)
+    if (!process.server) {
+      if (firstPageLoaded.value === false) {
+        firstPageLoaded.value = true
+        initializeChartbeat(pageInfo)
+      } else {
+        updateChartbeat(pageInfo)
+      }
     }
   }
+
   return {
     provide: {
       chartbeat: {