diff --git a/composables/states.ts b/composables/states.ts index 97042d53..b6835be0 100644 --- a/composables/states.ts +++ b/composables/states.ts @@ -15,6 +15,7 @@ export const useNavigation = () => useState('navigation', () => ({ propertyDescription: '' })) export const useStrapline = () => useState('strapline', () => 'A non-profit newsroom, powered by WNYC.') +export const useChartbeatFirstPageLoaded = () => useState('chartbeatFirstPageLoaded', () => false) // audio player globals diff --git a/plugins/chartbeat.client.ts b/plugins/chartbeat.client.ts index 64ee49c2..3219bfdb 100644 --- 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: {