[TF-633] Feature: migrate to @segment/analytics-next package

package.json

@@ -29,9 +29,7 @@
     "url": "https://github.com/prezly/analytics/issues"
   },
   "homepage": "https://github.com/prezly/analytics#readme",
-  "workspaces": [
-    "packages/*"
-  ],
+  "workspaces": ["packages/*"],
   "engines": {
     "node": ">= 14.x",
     "npm": ">= 7.x"
@@ -51,6 +49,7 @@
     "typescript": "^4.6.3"
   },
   "dependencies": {
+    "@prezly/sdk": "^6.21.0",
     "next": "^12.1.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

packages/analytics-nextjs/package.json

@@ -22,12 +22,13 @@
   },
   "homepage": "https://github.com/prezly/analytics#readme",
   "peerDependencies": {
+    "@prezly/sdk": "^6.21.0",
     "next": "^12.x",
     "react": "^17.x",
     "react-dom": "^17.x"
   },
   "dependencies": {
-    "@prezly/sdk": "^6.17.0",
+    "@segment/analytics-next": "^1.35.0",
     "js-cookie": "^3.0.1",
     "react-use": "^17.3.2"
   },

packages/analytics-nextjs/src/context.tsx

@@ -1,21 +1,17 @@
 import type { Newsroom, Story } from '@prezly/sdk';
 import { TrackingPolicy } from '@prezly/sdk';
+import type { Analytics, Plugin } from '@segment/analytics-next';
+import { AnalyticsBrowser } from '@segment/analytics-next';
 import Head from 'next/head';
-import Script from 'next/script';
 import type { PropsWithChildren } from 'react';
 import { createContext, useContext, useEffect, useState } from 'react';
 
-import {
-    createAnalyticsStub,
-    getAnalyticsJsUrl,
-    getConsentCookie,
-    isPrezlyTrackingAllowed,
-    setConsentCookie,
-} from './lib';
+import { getConsentCookie, isPrezlyTrackingAllowed, setConsentCookie } from './lib';
+import { injectPrezlyMetaPlugin, sendEventToPrezlyPlugin } from './plugins';
 
 interface Context {
+    analytics: Analytics | undefined;
     consent: boolean | null;
-    isAnalyticsReady: boolean;
     isEnabled: boolean;
     isTrackingAllowed: boolean | null;
     newsroom: Newsroom;
@@ -27,6 +23,7 @@ interface Props {
     isEnabled?: boolean;
     newsroom: Newsroom;
     story: Story | undefined;
+    plugins?: Plugin[];
 }
 
 export const AnalyticsContext = createContext<Context | undefined>(undefined);
@@ -45,16 +42,54 @@ export function AnalyticsContextProvider({
     isEnabled = true,
     newsroom,
     story,
+    plugins,
 }: PropsWithChildren<Props>) {
-    const { uuid, tracking_policy: trackingPolicy } = newsroom;
-    const [isAnalyticsReady, setAnalyticsReady] = useState(false);
+    const {
+        tracking_policy: trackingPolicy,
+        segment_analytics_id: segmentWriteKey,
+        uuid,
+    } = newsroom;
     const [consent, setConsent] = useState(getConsentCookie());
+    const isTrackingAllowed = isEnabled && isPrezlyTrackingAllowed(consent, newsroom);
+
+    const [analytics, setAnalytics] = useState<Analytics | undefined>(undefined);
 
     useEffect(() => {
-        if (trackingPolicy === TrackingPolicy.DISABLED) {
-            window.analytics = createAnalyticsStub();
+        async function loadAnalytics(writeKey: string) {
+            const [response] = await AnalyticsBrowser.load(
+                {
+                    writeKey,
+                    // If no Segment Write Key is provided, we initialize the library settings manually
+                    ...(!writeKey && {
+                        cdnSettings: {
+                            integrations: {},
+                        },
+                    }),
+                    plugins: [
+                        injectPrezlyMetaPlugin(),
+                        sendEventToPrezlyPlugin(uuid),
+                        ...(plugins || []),
+                    ],
+                },
+                {
+                    // By default, the analytics.js library plants its cookies on the top-level domain.
+                    // We need to completely isolate tracking between any Prezly newsroom hosted on a .prezly.com subdomain.
+                    cookie: {
+                        domain: document.location.host,
+                    },
+                    // If no Segment Write Key is provided, we initialize the library settings manually
+                    ...(!writeKey && {
+                        integrations: { 'Segment.io': false },
+                    }),
+                },
+            );
+            setAnalytics(response);
+        }
+
+        if (isTrackingAllowed) {
+            loadAnalytics(segmentWriteKey || '');
         }
-    });
+    }, [segmentWriteKey, isTrackingAllowed, uuid, plugins]);
 
     useEffect(() => {
         if (typeof consent === 'boolean') {
@@ -65,29 +100,22 @@ export function AnalyticsContextProvider({
     return (
         <AnalyticsContext.Provider
             value={{
+                analytics,
                 consent,
-                isAnalyticsReady,
                 isEnabled,
-                isTrackingAllowed: isEnabled && isPrezlyTrackingAllowed(consent, newsroom),
+                isTrackingAllowed,
                 newsroom,
                 setConsent,
-                trackingPolicy: newsroom.tracking_policy,
+                trackingPolicy,
             }}
         >
             <Head>
                 <meta name="prezly:newsroom" content={newsroom.uuid} />
                 {story && <meta name="prezly:story" content={story.uuid} />}
-                {newsroom.tracking_policy !== TrackingPolicy.DEFAULT && (
-                    <meta name="prezly:tracking_policy" content={newsroom.tracking_policy} />
+                {trackingPolicy !== TrackingPolicy.DEFAULT && (
+                    <meta name="prezly:tracking_policy" content={trackingPolicy} />
                 )}
             </Head>
-            {trackingPolicy !== TrackingPolicy.DISABLED && (
-                <Script
-                    key="prezly-analytics"
-                    onLoad={() => setAnalyticsReady(true)}
-                    src={getAnalyticsJsUrl(uuid)}
-                />
-            )}
             {children}
         </AnalyticsContext.Provider>
     );

packages/analytics-nextjs/src/hooks/useAnalytics.ts

@@ -1,6 +1,6 @@
 import { TrackingPolicy } from '@prezly/sdk';
 import { useCallback, useEffect } from 'react';
-import { useLocalStorage, useQueue } from 'react-use';
+import { useLatest, useLocalStorage, useQueue } from 'react-use';
 
 import { useAnalyticsContext } from '../context';
 import { stringify } from '../lib';
@@ -9,8 +9,8 @@ import type { DeferredIdentity } from '../types';
 const DEFERRED_IDENTITY_STORAGE_KEY = 'prezly_ajs_deferred_identity';
 
 export function useAnalytics() {
-    const { consent, isAnalyticsReady, isEnabled, newsroom, trackingPolicy } =
-        useAnalyticsContext();
+    const { analytics, consent, isEnabled, newsroom, trackingPolicy } = useAnalyticsContext();
+    const analyticsRef = useLatest(analytics);
     const [deferredIdentity, setDeferredIdentity, removeDeferredIdentity] =
         useLocalStorage<DeferredIdentity>(DEFERRED_IDENTITY_STORAGE_KEY);
     const {
@@ -53,12 +53,12 @@ export function useAnalytics() {
             }
 
             addToQueue(() => {
-                if (window.analytics && window.analytics.identify) {
-                    window.analytics.identify(userId, traits, buildOptions(), callback);
+                if (analytics && analytics.identify) {
+                    analytics.identify(userId, traits, buildOptions(), callback);
                 }
             });
         },
-        [addToQueue, buildOptions, consent, setDeferredIdentity, trackingPolicy],
+        [analytics, addToQueue, buildOptions, consent, setDeferredIdentity, trackingPolicy],
     );
 
     function alias(userId: string, previousId: string) {
@@ -68,8 +68,8 @@ export function useAnalytics() {
         }
 
         addToQueue(() => {
-            if (window.analytics && window.analytics.alias) {
-                window.analytics.alias(userId, previousId, buildOptions());
+            if (analytics && analytics.alias) {
+                analytics.alias(userId, previousId, buildOptions());
             }
         });
     }
@@ -86,8 +86,8 @@ export function useAnalytics() {
         }
 
         addToQueue(() => {
-            if (window.analytics && window.analytics.page) {
-                window.analytics.page(category, name, properties, buildOptions(), callback);
+            if (analyticsRef.current && analyticsRef.current.page) {
+                analyticsRef.current.page(category, name, properties, buildOptions(), callback);
             }
         });
     }
@@ -99,15 +99,15 @@ export function useAnalytics() {
         }
 
         addToQueue(() => {
-            if (window.analytics && window.analytics.track) {
-                window.analytics.track(event, properties, buildOptions(), callback);
+            if (analyticsRef.current && analyticsRef.current.track) {
+                analyticsRef.current.track(event, properties, buildOptions(), callback);
             }
         });
     }
 
-    function user() {
-        if (window.analytics && window.analytics.user) {
-            return window.analytics.user();
+    const user = useCallback(() => {
+        if (analytics && analytics.user) {
+            return analytics.user();
         }
 
         // Return fake user API to keep code working even without analytics.js loaded
@@ -116,16 +116,16 @@ export function useAnalytics() {
                 return null;
             },
         };
-    }
+    }, [analytics]);
 
     useEffect(() => {
         // We are using simple queue to trigger tracking calls
         // that might have been created before analytics.js was loaded.
-        if (isAnalyticsReady && firstInQueue) {
+        if (analytics && firstInQueue) {
             firstInQueue();
             removeFromQueue();
         }
-    }, [firstInQueue, isAnalyticsReady, removeFromQueue]);
+    }, [firstInQueue, analytics, removeFromQueue]);
 
     useEffect(() => {
         if (consent) {
@@ -142,7 +142,7 @@ export function useAnalytics() {
 
             user().id(null); // erase user ID
         }
-    }, [consent, deferredIdentity, identify, removeDeferredIdentity, setDeferredIdentity]);
+    }, [consent, deferredIdentity, identify, user, removeDeferredIdentity, setDeferredIdentity]);
 
     if (!isEnabled) {
         return {
@@ -154,6 +154,7 @@ export function useAnalytics() {
         };
     }
 
+    // TODO: Expose all methods of analytics-next (might not be needed, since we already provide the `analytics` object)
     return {
         alias,
         identify,

packages/analytics-nextjs/src/index.ts

@@ -2,4 +2,3 @@ export * from './components';
 export { AnalyticsContextProvider } from './context';
 export * from './events';
 export { useAnalytics } from './hooks';
-export type { AnalyticsJS } from './types';

packages/analytics-nextjs/src/lib/getApiUrl.ts

@@ -0,0 +1,7 @@
+export function getApiUrl(): string {
+    if (process.env.NODE_ENV !== 'production') {
+        return 'http://analytics.prezly.test';
+    }
+
+    return 'https://analytics.prezly.com';
+}

packages/analytics-nextjs/src/lib/getRecipientInfo.ts

@@ -1,12 +1,6 @@
 import type { RecipientInfo } from '../types';
 
-function getApiUrl(): string {
-    if (process.env.NODE_ENV !== 'production') {
-        return 'http://analytics.prezly.test';
-    }
-
-    return 'https://analytics.prezly.com';
-}
+import { getApiUrl } from './getApiUrl';
 
 export function isRecipientIdFormat(id?: string | null): id is string {
     if (!id) {

packages/analytics-nextjs/src/lib/index.ts

@@ -1,6 +1,5 @@
 export * from './cookieState';
-export * from './createAnalyticsStub';
-export * from './getAnalyticsJsUrl';
+export * from './getApiUrl';
 export * from './getAssetClickEvent';
 export * from './getRecipientInfo';
 export * from './isPrezlyTrackingAllowed';

packages/analytics-nextjs/src/plugins/index.ts

@@ -0,0 +1,2 @@
+export { injectPrezlyMetaPlugin } from './injectPrezlyMeta';
+export { sendEventToPrezlyPlugin } from './sendToPrezly';