Merge pull request #84 from GetStream/datalayer

Add DataLayer component

.github/workflows/trigger_production_deploy.yml

@@ -9,11 +9,20 @@ jobs:
   trigger_docs_deploy:
     runs-on: ubuntu-latest
     steps:
-      - name: Triggers docs deployment workflow
+      - name: Triggers chat docs deployment workflow
         env:
           PAT_TOKEN: ${{ secrets.PAT_TOKEN }}
         run: |
           curl -X POST https://api.github.com/repos/GetStream/stream-chat-docusaurus/actions/workflows/deploy-production.yml/dispatches \
           -H 'Accept: application/vnd.github.v3+json' \
           -u ":$PAT_TOKEN" \
           --data '{"ref": "production"}'
+
+      - name: Triggers video docs deployment workflow
+        env:
+          PAT_TOKEN: ${{ secrets.PAT_TOKEN }}
+        run: |
+          curl -X POST https://api.github.com/repos/GetStream/stream-video-docusaurus/actions/workflows/deploy-production.yml/dispatches \
+          -H 'Accept: application/vnd.github.v3+json' \
+          -u ":$PAT_TOKEN" \
+          --data '{"ref": "production"}'

src/components/DataLayer/index.js

@@ -0,0 +1,40 @@
+import React, { useContext, useEffect } from 'react';
+import { useLocation } from '@docusaurus/router';
+import { AuthContext } from '../../contexts/AuthContext';
+
+export const getPlanName = (name) => {
+  let isEnterprise = false;
+  if (!name) return ['', isEnterprise];
+  if (name.toLowerCase().includes('enterprise')) {
+    isEnterprise = true;
+  }
+  return [name.replace(/(v)([1-9])(_)/, ''), isEnterprise];
+};
+
+export const DataLayer = ({}) => {
+  const dataLayer =
+    typeof window !== 'undefined' ? window?.dataLayer : undefined;
+  const location = useLocation();
+  const { isLoggedIn, username, getSelectedOrg, email } =
+    useContext(AuthContext);
+  const org = getSelectedOrg();
+
+  useEffect(() => {
+    const [chatPlan, isChatEnterprise] = getPlanName(org?.chat_plan?.name);
+    const [feedsPlan, isFeedsEnterprise] = getPlanName(org?.plan?.name);
+    const dataLayerObject = {
+      event: 'pageview',
+      authenticated: isLoggedIn ? 'authenticated' : 'anonymous',
+      username,
+      email,
+
+      pagePath: `${location.pathname}`,
+      feedsPlan,
+      isFeedsEnterprise,
+      chatPlan,
+      isChatEnterprise,
+    };
+    dataLayer?.push(dataLayerObject);
+  }, [dataLayer, isLoggedIn, location]);
+  return null;
+};

src/product-variables.js

@@ -59,7 +59,7 @@ module.exports = {
       flutter: `${GITHUB_ROOT}/stream-video-flutter/`,
       ios: `${GITHUB_ROOT}/stream-video-swift/`,
       react: `${GITHUB_ROOT}/stream-video-js/`,
-      reactnative: `${GITHUB_ROOT}/stream-video-js/`,
+      // Disable only on production for now. Beware when merging. reactnative: `${GITHUB_ROOT}/stream-video-js/`,
       // angular: `${GITHUB_ROOT}/stream-video-js/`,
     },
     docusaurus: {

src/theme/Layout/index.js

@@ -6,6 +6,7 @@ import OriginalLayout from "@theme-original/Layout"
 
 import URLS from "../../../urls"
 import { AuthContextProvider } from "../../contexts/AuthContext"
+import { DataLayer } from "../../components/DataLayer"
 
 const isBrowser = typeof window !== `undefined`
 const isProd = process.env.DEPLOYMENT_ENV === "production"
@@ -32,6 +33,7 @@ export default function Layout(props) {
 
   return (
     <AuthContextProvider>
+      <DataLayer/>
       <ToastContainer />
       <OriginalLayout {...props} />
     </AuthContextProvider>