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

riffbyte · 2022-04-11T12:59:52Z

Replaced the legacy analytics.js bundle fetched from our infrastructure with vanilla @segment/analytics-next package
Custom cookie domain is now a config entry for analytics-next, so no need to patch the code
Prezly Meta injection and sending events to analytics.prezly.com is implemented through the new Plugin feature of analytics-next
Analytics bundle is not loaded at all until the consent is given
If no Segment Write Key is set for the newsroom, the library is loaded without Segment.io integration, meaning that no requests are made to Segment API at all, only to analytics.prezly.com

Bonus:

Fix page event not being fired on initial page load (introduced in the initial implementation of the package)

…y script

packages/analytics-nextjs/src/context.tsx

riffbyte · 2022-04-11T13:06:12Z

packages/analytics-nextjs/src/context.tsx

@@ -27,8 +23,11 @@ interface Props {
    isEnabled?: boolean;
    newsroom: Newsroom;
    story: Story | undefined;
+    plugins?: Plugin[];


I thought it would be a nice feature to allow the package consumers to pass their own plugins, that way they would be able to extend the features without the need to fork the library.

riffbyte · 2022-04-11T13:08:05Z

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

+    const { analytics, consent, isEnabled, newsroom, trackingPolicy } = useAnalyticsContext();
+    const analyticsRef = useLatest(analytics);


All of the changes to this file were basically about replacing window.analytics with the analytics object received from analytics-next.

riffbyte · 2022-04-11T13:11:23Z

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

+                // TODO: Prezly Analytics app should be able to take the newsroom UUID from the `prezly` property
+                writeKey: newsroomUuid,


I noticed that in the legacy analytics bundle Newsroom UUID is passed twice: in the prezly property, and in the writeKey. This seems redundant, but analytics.prezly.com/track endpoints are giving 422 error when writeKey is not present.
I believe this can also be populated with the actual Segment write key, if the integration is enabled for the newsroom, and in that case the event gets passed along to Segment, but this will not be needed anymore with this package.

riffbyte · 2022-04-11T13:12:33Z

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

+                type: 'application/json',
+            });
+
+            navigator.sendBeacon(`${getApiUrl()}${endpoint}`, blob);


This is an alternative to fetch that was made specifically to send analytics data from the browser. The main advantage is that it isn't affected by the user closing the tab - the request would still be fulfilled in the background.
See https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

Curious why we'd opt for sendBeacon and the native analytics-next is not. Is there a caveat?

I guess it's because it's not supported by IE11: https://caniuse.com/?search=sendbeacon
But since we ditched support for it a while ago, I don't see this as an issue.

riffbyte · 2022-04-11T13:13:56Z

packages/analytics-nextjs/src/types.ts

@@ -1,213 +1,3 @@
-// https://www.npmjs.com/package/@types/segment-analytics


This file used to include the types copied over from the Segment package, now they're not needed anymore.

linear · 2022-04-11T13:19:04Z

TF-633 Refactor the extracted library to rely on `@segment/analytics-next`

See TF-492 for details on how analytics work on our legacy infrastructure.

Key points to keep in mind:

One of the main reasons we have the custom logic for Prezly analytics is the cookie domain.

Need to research if this is a feature that is supported by analytics-next, otherwise will need to re-implement it via a plugin (if it is possible)
We need to take into account other analytics integrations available to users: CookiePro and Google Analytics.
We want to completely disable tracking if it's disabled in the newsroom settings (no network requests made to anything related to analytics)
We need to include the logic to identify campaign recipients coming from email links

…y is not provided

riffbyte · 2022-04-12T08:45:19Z

packages/analytics-nextjs/src/context.tsx

+                    // If no Segment Write Key is provided, we initialize the library settings manually
+                    ...(!writeKey && {
+                        cdnSettings: {
+                            integrations: {},
+                        },
+                    }),


This code allows the library to initialize without a working Segment Write Key (it is used to fetch the source configuration from Segment, which we don't need to Prezly-only tracking).
Somehow the tracking calls to Segment API still go through even without authorization. This is handled later in the code.

riffbyte · 2022-04-12T08:46:54Z

packages/analytics-nextjs/src/context.tsx

+                    // Disable calls to Segment API completely if no Write Key is provided
+                    ...(!writeKey && {
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        integrations: { 'Segment.io': false },
+                    }),


After digging through analytics-next source code, I found out that the code sending events to Segment is also a plugin (!), that can be disabled. This was an undocumented feature, but it effectively disables any calls to Segment API, while all the other plugins (like sending events to Prezly) still work fine.

kudlajz

Looks good 👍

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

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

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

pestaa

I'm not in favor of using undocumented features (since there's now less guarantee it'll be around), but sounds like we have a special use case.

💯

…back`

…undle

riffbyte added 10 commits April 8, 2022 10:40

Use the @segment/analytics-next package instead of the legacy Prezl…

84f78e6

…y script

Add Prezly Meta injection plugin

2a9247d

Clean up @segment/analytics-next dependency

5e11a5d

Fix page event not being fired on initial page load

8f5317d

Do not load the analytics package until user consent is given

fa8305f

Update Prezly SDK version, move it to peer dependencies

2585a45

Only load the segment bundle if Segment is enabled for the newsroom

b20f7f4

Fallback to default write key

3c5b94f

Fix incorrect placement of Prezly Meta in the payload

6208808

Add plugin to send events to Prezly Analytics application

39db226

riffbyte requested review from pestaa, e1himself and kudlajz April 11, 2022 12:59

riffbyte self-assigned this Apr 11, 2022

riffbyte commented Apr 11, 2022

View reviewed changes

riffbyte changed the title ~~Feature: migrate to @segment/analytics-next package~~ [TF-633] Feature: migrate to @segment/analytics-next package Apr 11, 2022

riffbyte added 2 commits April 12, 2022 11:41

Make the library work with Prezly-only tracking when Segment Write Ke…

3833d08

…y is not provided

Fix duplicated comment

75c28d7

riffbyte commented Apr 12, 2022

View reviewed changes

kudlajz approved these changes Apr 12, 2022

View reviewed changes

packages/analytics-nextjs/src/hooks/useAnalytics.ts Outdated Show resolved Hide resolved

packages/analytics-nextjs/src/lib/getApiUrl.ts Show resolved Hide resolved

packages/analytics-nextjs/src/plugins/injectPrezlyMeta.ts Outdated Show resolved Hide resolved

pestaa approved these changes Apr 14, 2022

View reviewed changes

riffbyte added 4 commits April 14, 2022 13:40

Use analyticsRef in all callbacks using the queue, utilize `useCall…

0b327a4

…back`

Refactor injectPrezlyMeta code

b7f9f96

Sync plugins version with the package version

1234462

Adjust lifecycle scripts to update version file before building the b…

7025d74

…undle

riffbyte merged commit baf856f into main Apr 15, 2022

riffbyte deleted the feature/migrate-to-analytics-next branch April 15, 2022 06:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

riffbyte commented Apr 11, 2022 •

edited

Loading

riffbyte Apr 11, 2022

riffbyte Apr 11, 2022

riffbyte Apr 11, 2022

riffbyte Apr 11, 2022

digitalbase Apr 21, 2022

riffbyte Apr 21, 2022

riffbyte Apr 11, 2022

linear bot commented Apr 11, 2022

riffbyte Apr 12, 2022

riffbyte Apr 12, 2022

kudlajz left a comment

pestaa left a comment

		const { analytics, consent, isEnabled, newsroom, trackingPolicy } = useAnalyticsContext();
		const analyticsRef = useLatest(analytics);

		// TODO: Prezly Analytics app should be able to take the newsroom UUID from the `prezly` property
		writeKey: newsroomUuid,

		@@ -1,213 +1,3 @@
		// https://www.npmjs.com/package/@types/segment-analytics

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

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

Conversation

riffbyte commented Apr 11, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

linear bot commented Apr 11, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kudlajz left a comment

Choose a reason for hiding this comment

pestaa left a comment

Choose a reason for hiding this comment

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

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

riffbyte commented Apr 11, 2022 •

edited

Loading