Merge pull request #214 from shayan-deriv/shayan/send-gtm-events

feat: added page_load and allow_tracking events for gtm

Author: farrah-deriv

global.d.ts

@@ -3,6 +3,9 @@ declare global {
         LC_API: {
             open_chat_window: VoidFunction;
         };
+        dataLayer: {
+            push: (event: { [key: string]: boolean | number | string; event: string }) => void;
+        };
     }
 }
 

src/hooks/custom-hooks/__tests__/useHandleRouteChange.spec.ts

@@ -0,0 +1,28 @@
+import { useLocation } from 'react-router-dom';
+import { renderHook } from '@testing-library/react';
+import useHandleRouteChange from '../useHandleRouteChange';
+
+jest.mock('react-router-dom', () => ({
+    useLocation: jest.fn(),
+}));
+
+describe('useHandleRouteChange', () => {
+    beforeEach(() => {
+        (useLocation as jest.Mock).mockReset();
+        window.dataLayer = [] as { [key: string]: boolean | number | string; event: string }[];
+    });
+
+    it('should push event to dataLayer on location change', () => {
+        (useLocation as jest.Mock).mockReturnValue({ pathname: '/initial' });
+
+        renderHook(() => useHandleRouteChange());
+
+        expect(window.dataLayer).toEqual([{ event: 'page_load' }]);
+
+        (useLocation as jest.Mock).mockReturnValue({ pathname: '/new-path' });
+
+        renderHook(() => useHandleRouteChange());
+
+        expect(window.dataLayer).toEqual([{ event: 'page_load' }, { event: 'page_load' }]);
+    });
+});

src/hooks/custom-hooks/index.ts

@@ -4,6 +4,7 @@ export { default as useExtendedOrderDetails } from './useExtendedOrderDetails';
 export { default as useFetchMore } from './useFetchMore';
 export { default as useFloatingRate } from './useFloatingRate';
 export { default as useFullScreen } from './useFullScreen';
+export { default as useHandleRouteChange } from './useHandleRouteChange';
 export { default as useIsAdvertiser } from './useIsAdvertiser';
 export { default as useIsAdvertiserBarred } from './useIsAdvertiserBarred';
 export { default as useIsP2PBlocked } from './useIsP2PBlocked';

src/hooks/custom-hooks/useHandleRouteChange.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+/**
+ * Custom hook to handle side effects on route change like pushing events to dataLayer.
+ */
+const useHandleRouteChange = () => {
+    const location = useLocation();
+    useEffect(() => {
+        window?.dataLayer.push({
+            event: 'page_load',
+        });
+    }, [location]);
+};
+
+export default useHandleRouteChange;

src/routes/AppContent/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { BlockedScenarios } from '@/components/BlockedScenarios';
 import { BUY_SELL_URL, ERROR_CODES } from '@/constants';
@@ -20,6 +20,7 @@ const tabRoutesConfiguration = routes.filter(
 );
 
 const AppContent = () => {
+    const isGtmTracking = useRef(false);
     const history = useHistory();
     const location = useLocation();
     const { isDesktop } = useDevice();
@@ -70,6 +71,13 @@ const AppContent = () => {
         setActiveTab(getActiveTab(location.pathname));
     }, [location]);
 
+    useEffect(() => {
+        if (!isGtmTracking.current) {
+            window.dataLayer.push({ event: 'allow_tracking' });
+            isGtmTracking.current = true;
+        }
+    }, []);
+
     const getComponent = () => {
         if ((isLoadingActiveAccount || !isFetched || !activeAccountData) && !isEndpointRoute) {
             return <Loader />;

src/routes/Router.tsx

@@ -3,11 +3,11 @@ import { Redirect, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { TCurrency } from 'types';
 import { Page404 } from '@/components';
 import { BUY_SELL_URL } from '@/constants';
+import { useHandleRouteChange } from '@/hooks';
 import { Loader } from '@deriv-com/ui';
 import { routes } from './routes-config';
 
 type TState = { [key: string]: string[] | TCurrency | string; from: string };
-
 declare module 'react-router-dom' {
     export function useHistory(): {
         goBack: () => void;
@@ -36,6 +36,7 @@ const RouteWithSubRoutes = (route: TRoutesWithSubRoutes) => {
 };
 
 const Router: FC = () => {
+    useHandleRouteChange();
     return (
         <Suspense fallback={<Loader isFullScreen />}>
             <Switch>