add parsely analytics

src/components/Analytics/Analytics.svelte

@@ -1,11 +1,13 @@
 <script context="module">
   import { registerPageview as registerChartbeatPageview } from './providers/chartbeat';
   import { registerPageview as registerGAPageview } from './providers/ga';
+  import { registerPageview as registerParselyPageview } from './providers/parsely';
 
   /** Register virtual pageviews when using client-side routing in multipage applications. */
   export function registerPageview() {
     registerChartbeatPageview();
     registerGAPageview();
+    registerParselyPageview();
   }
 </script>
 
@@ -20,10 +22,11 @@
   export let authors: Author[] = [];
 
   import { onMount } from 'svelte';
-  import { ga, chartbeat } from './providers';
+  import { ga, chartbeat, parsely } from './providers';
 
   onMount(() => {
     ga();
     chartbeat(authors);
+    parsely();
   });
 </script>

src/components/Analytics/providers/index.ts

@@ -1,2 +1,3 @@
 export { default as ga } from './ga';
 export { default as chartbeat } from './chartbeat';
+export { default as parsely } from './parsely';

src/components/Analytics/providers/parsely.ts

@@ -0,0 +1,32 @@
+const SITE_ID = 'reuters.com';
+
+const attachScript = () => {
+  const b = document.body;
+  const e = document.createElement('script');
+
+  e.id = 'parsely-cfg';
+  e.src = `//cdn.parsely.com/keys/${SITE_ID}/p.js`;
+  e.setAttribute('async', '');
+  e.setAttribute('defer', '');
+  b.appendChild(e);
+};
+
+export default () => {
+  window.PARSELY = window.PARSELY || {
+    autotrack: false,
+    onReady() {
+      window.PARSELY.updateDefaults({
+        data: {
+          is_logged_in: false,
+        },
+      });
+      window.PARSELY.beacon.trackPageView();
+    },
+  };
+  attachScript();
+};
+
+export const registerPageview = () => {
+  if (typeof window === 'undefined' || !window.PARSELY) return;
+  window.PARSELY.beacon.trackPageView();
+};

src/components/SEO/SEO.svelte

@@ -70,7 +70,7 @@
    */
   export let authors: GraphicAuthor[] = [];
 
-  const getOrigin = (baseUrl) => {
+  const getOrigin = (baseUrl: string) => {
     try {
       return new URL(baseUrl).origin;
     } catch {
@@ -82,7 +82,7 @@
   };
 
   $: origin = getOrigin(baseUrl);
-  $: canonicalUrl = (origin + pageUrl.pathname).replace(/index\.html\/$/, '');
+  $: canonicalUrl = (origin + pageUrl?.pathname).replace(/index\.html\/$/, '');
 
   const orgLdJson = {
     '@context': 'http://schema.org',
@@ -127,9 +127,9 @@
       name,
       url,
     })),
+    creator: authors.map(({ name }) => name),
     articleSection: 'Graphics',
     isAccessibleForFree: true,
-    creator: ['Reuters Graphics'],
     keywords: ['Reuters graphics', 'Reuters', 'graphics', 'Interactives'],
   };
 </script>

src/globals.d.ts

@@ -21,6 +21,14 @@ declare global {
     };
     /** Graphics ads */
     graphicsAdQueue: any[];
+    /** Parsely */
+    PARSELY: {
+      onLoad: () => void;
+      beacon: {
+        trackPageView: () => void;
+      };
+      updateDefaults: (params: any) => void;
+    };
   }
 }