docs: add segment analytics [internal] (#1609)

Author: katzino

.github/workflows/build_and_deploy_docs.yaml

@@ -54,6 +54,7 @@ jobs:
         run: make build-docs
         env:
           APIFY_SIGNING_TOKEN: ${{ secrets.APIFY_SIGNING_TOKEN }}
+          SEGMENT_TOKEN: ${{ secrets.SEGMENT_TOKEN }}
 
       - name: Set up GitHub Pages
         uses: actions/configure-pages@v5

website/docusaurus.config.js

@@ -226,6 +226,13 @@ module.exports = {
                 },
             };
         },
+        [
+            path.resolve(__dirname, 'src/plugins/docusaurus-plugin-segment'),
+            {
+                writeKey: process.env.SEGMENT_TOKEN,
+                allowedInDev: false,
+            },
+        ],
     ],
     themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({

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

@@ -0,0 +1,37 @@
+const path = require('path');
+
+module.exports = function (context, options) {
+    const { writeKey, allowedInDev = false } = options;
+
+    return {
+        name: 'docusaurus-plugin-segment',
+
+        getClientModules() {
+            return [path.resolve(__dirname, './segment')];
+        },
+
+        injectHtmlTags() {
+            if (process.env.NODE_ENV !== 'production' && !allowedInDev) {
+                return {};
+            }
+
+            if (!writeKey) {
+                console.warn('You need to specify a Segment writeKey in the plugin options');
+                return {};
+            }
+
+            return {
+                headTags: [
+                    {
+                        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";
+            analytics.load("${writeKey}", { integrations: { "Segment.io": { apiHost: "analytics.apify.com/v1" } } });
+            }}();
+            `,
+                    },
+                ],
+            };
+        },
+    };
+};

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

@@ -0,0 +1,18 @@
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+export default ExecutionEnvironment.canUseDOM ? {
+    onRouteUpdate() {
+        // this forces deferred execution that ensures `window.location` is in sync
+        setTimeout(() => {
+            // Don't track page views on development
+            if (process.env.NODE_ENV === 'production' && window.analytics) {
+                window.analytics.page({
+                    app: 'crawlee',
+                    path: window.location.pathname,
+                    url: window.location.href,
+                    search: window.location.search,
+                });
+            }
+        }, 0);
+    },
+} : null;