docs: Add cookie consent (#1587)

Added cookie consent similar to apify/crawlee#2964, but the one used on
web as it's on apify.com domain.

- Added Segment OneTrust integration to support cookie modals.
- Added consent context to every page view event sent to Segment.

Author: HonzaTuron

docusaurus.config.js

@@ -1,4 +1,4 @@
-const { join } = require('node:path');
+const { join, resolve } = require('node:path');
 
 const clsx = require('clsx');
 const { createApiPageMD } = require('docusaurus-plugin-openapi-docs/lib/markdown');
@@ -46,21 +46,6 @@ module.exports = {
                 sizes: 'any',
             },
         },
-        // Segment analytics
-        process.env.SEGMENT_TOKEN && {
-            tagName: 'script',
-            innerHTML: `
-                !function(){var i="analytics",analytics=window[i]=window[i]||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){var c=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-segment-analytics-key",i);t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._loadOptions=n};analytics._writeKey="FAretQHrDlKZJl9dE9xRgH2ia0a4ACXB";;analytics.SNIPPET_VERSION="5.2.0";
-                    analytics.load("${process.env.SEGMENT_TOKEN}", { integrations: { "Segment.io": { apiHost: "analytics.apify.com/v1" }}});
-                    analytics.page({
-                        app: 'docs',
-                        pageType: 'DOCS_PAGE',
-                        page_type: 'DOCS_PAGE'
-                    });
-                }}();
-            `,
-            attributes: {},
-        },
         // Intercom messenger
         process.env.INTERCOM_APP_ID && {
             tagName: 'script',
@@ -250,6 +235,13 @@ module.exports = {
                 },
             },
         ],
+        [
+            resolve(__dirname, 'src/plugins/docusaurus-plugin-segment'),
+            {
+                writeKey: process.env.SEGMENT_TOKEN,
+                allowedInDev: false,
+            },
+        ],
         () => ({
             name: 'webpack-loader-fix',
             configureWebpack() {

src/plugins/docusaurus-plugin-segment/index.js

@@ -0,0 +1,60 @@
+const path = require('node:path');
+
+module.exports = function (context, options) {
+    const { writeKey, allowedInDev = false } = options;
+
+    return {
+        name: 'docusaurus-plugin-segment',
+
+        getClientModules() {
+            return [path.resolve(__dirname, './segment')];
+        },
+
+        injectHtmlTags() {
+            if (!writeKey) {
+                throw new Error(
+                    'You need to specify a Segment writeKey in the plugin options',
+                );
+            }
+
+            if (process.env.NODE_ENV !== 'production' && !allowedInDev) {
+                return {};
+            }
+
+            return {
+                headTags: [
+                    {
+                        tagName: 'script',
+                        attributes: {
+                            src: 'https://cdn.cookielaw.org/scripttemplates/otSDKStub.js',
+                            type: 'text/javascript',
+                            charset: 'UTF-8',
+                            'data-domain-script': '7a8d334b-f744-4c02-9931-92861196dd3c',
+                        },
+                    },
+                    {
+                        tagName: 'script',
+                        attributes: {
+                            type: 'text/javascript',
+                        },
+                        innerHTML: 'function OptanonWrapper() {}',
+                    },
+                    {
+                        tagName: 'script',
+                        attributes: {
+                            src: 'https://cdn.jsdelivr.net/npm/@segment/analytics-consent-wrapper-onetrust@latest/dist/umd/analytics-onetrust.umd.js',
+                        },
+                    },
+                    {
+                        tagName: 'script',
+                        innerHTML: `
+                        !function(){var i="analytics",analytics=window[i]=window[i]||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){var c=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-segment-analytics-key",i);t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._loadOptions=n};analytics._writeKey="${writeKey}";;analytics.SNIPPET_VERSION="5.2.0";
+                        withOneTrust(analytics).load("${writeKey}", { integrations: { "Segment.io": { apiHost: "analytics.apify.com/v1" } } });
+                        }}();
+                        `,
+                    },
+                ],
+            };
+        },
+    };
+};

src/plugins/docusaurus-plugin-segment/segment.js

@@ -0,0 +1,46 @@
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+const DEFAULT_CONSENT = {
+    C0001: false,
+    C0002: false,
+    C0003: false,
+    C0004: false,
+    C0005: false,
+};
+
+function getOneTrustConsentContext() {
+    const consent = { ...DEFAULT_CONSENT };
+    // obtain `OptanonConsent` cookie and extract `groups` substring
+    const match = document.cookie.match(/(^|;\s*)OptanonConsent=[^;]*&groups=([^;&]*)/);
+    // decode the value and parse it - expected format: [C0001:1, COOO2:0,...]
+    const input = decodeURIComponent(match?.[2] ?? '').split(',');
+
+    for (const chunk of input) {
+        const [name, value] = chunk.split(':');
+
+        // we only want to update specific groups
+        if (name in consent) {
+            // just to be extra sure, only "1" is considered to pass
+            consent[name] = value === '1';
+        }
+    }
+
+    return consent;
+}
+
+export default ExecutionEnvironment.canUseDOM ? {
+    onRouteUpdate({ location }) {
+        // Don't track page views on development
+        if (process.env.NODE_ENV === 'production' && window.analytics) {
+            window.analytics.page({
+                app: 'docs',
+                pageType: 'DOCS_PAGE',
+                page_type: 'DOCS_PAGE',
+                path: location.pathname,
+                url: location.href,
+                search: location.search,
+                ...getOneTrustConsentContext(),
+            });
+        }
+    },
+} : null;