Add MetaMetrics for pageviews (MetaMask#992)

* Initial metametrics tracking (only for pageviews)
* Updates build scripts to use secrets for Dev (used in Preview builds) & Prod (used in Production) Segment sources
* Disables the segment plugin for regular development
* Includes instructions for anyone who needs to enable segment in local development builds

.github/workflows/build-lint.yml

@@ -2,6 +2,9 @@ name: Build and lint
 
 on:
   workflow_call:
+  secrets:
+      SEGMENT_ANALYTICS_KEY:
+        required: true
 
 jobs:
   prepare:
@@ -35,6 +38,8 @@ jobs:
           cache: 'yarn'
       - run: yarn --immutable --immutable-cache
       - run: yarn build
+        env:
+            SEGMENT_ANALYTICS_KEY: ${{ secrets.SEGMENT_ANALYTICS_KEY }}
       - name: Require clean working directory
         shell: bash
         run: |

.github/workflows/main.yml

@@ -22,6 +22,8 @@ jobs:
   build-lint:
     name: Build and lint
     uses: ./.github/workflows/build-lint.yml
+    secrets:
+      SEGMENT_ANALYTICS_KEY: ${{ secrets.SEGMENT_ANALYTICS_DEV_KEY }}
 
   all-jobs-completed:
     name: All jobs completed

.github/workflows/publish-docs.yml

@@ -8,6 +8,9 @@ on:
       ref:
         required: false
         type: string
+    secrets:
+      SEGMENT_ANALYTICS_KEY:
+        required: true
 
 jobs:
   publish-docs-to-gh-pages:
@@ -29,6 +32,8 @@ jobs:
       - name: Install npm dependencies
         run: yarn --immutable
       - name: Run build script
+        env:
+            SEGMENT_ANALYTICS_KEY: ${{ secrets.SEGMENT_ANALYTICS_KEY }}
         run: DEST="/${{ inputs.destination_dir }}" yarn build
       - name: Deploy to `${{ inputs.destination_dir }}` directory of `gh-pages` branch
         uses: peaceiris/actions-gh-pages@068dc23d9710f1ba62e86896f84735d869951305

.github/workflows/publish-main-docs.yml

@@ -9,4 +9,6 @@ jobs:
     name: Publish docs to `./` directory of `gh-pages` branch
     permissions:
       contents: write
-    uses: ./.github/workflows/publish-docs.yml
+    uses: ./.github/workflows/publish-docs.yml
+    secrets:
+      SEGMENT_ANALYTICS_KEY: ${{ secrets.SEGMENT_ANALYTICS_KEY }}

.github/workflows/publish-preview.yml

@@ -51,6 +51,8 @@ jobs:
     with:
       destination_dir: ${{ github.head_ref }}
       ref: ${{ needs.get-commit-hash.outputs.COMMIT_SHA }}
+    secrets:
+      SEGMENT_ANALYTICS_KEY: ${{ secrets.SEGMENT_ANALYTICS_DEV_KEY }}
 
   post-preview-comment:
     name: Post preview in comment

CONTRIBUTING.md

@@ -171,4 +171,19 @@ CodeSandbox entry point, and more complex code blocks that can be loaded directl
 filesystem.
 See the
 [`remark-codesandbox` documentation](https://github.com/kevin940726/remark-codesandbox/#documentation)
-for more information.
+for more information.
+
+## Analytics
+
+The [`docusaurus-plugin-segment`](https://github.com/xer0x/docusaurus-plugin-segment) plugin enables simple usage analytics to inform documentation improvements that may be needed.
+
+If you need to test analytics events in your local development enviorment be sure to export the appropriate key for the environment you are testing against before building and running the project:
+
+```bash
+export SEGMENT_ANALYTICS_KEY="<your key>"
+```
+Then build the project in production mode using the following command:
+
+```bash
+yarn build && yarn serve
+```

docusaurus.config.js

@@ -4,6 +4,7 @@
 const codeTheme = require("prism-react-renderer/themes/dracula");
 const remarkCodesandbox = require("remark-codesandbox");
 const path = require("path");
+const isProd = process.env.NODE_ENV === 'production';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -366,6 +367,15 @@ const config = {
         },
       },
     ],
+    isProd ? 
+    [
+      "docusaurus-plugin-segment",
+      {
+        apiKey: process.env.SEGMENT_ANALYTICS_KEY,
+        load: {cookie: { sameSite: 'None', secure: true}},
+        page: true,
+      },
+    ] : null,
   ],
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */

package.json

@@ -27,6 +27,7 @@
     "@metamask/design-tokens": "^1.11.1",
     "@metamask/docusaurus-openrpc": "^0.3.1",
     "clsx": "^1.2.1",
+    "docusaurus-plugin-segment": "^1.0.4",
     "docusaurus-plugin-typedoc": "1.0.0-next.17",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "prettier": "^3.0.0",