fix: track outbound links correctly

tilmx · Dec 6, 2023 · 98f7c5b · 98f7c5b
1 parent 374cedd
commit 98f7c5b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/components/pages/hotel-detail.tsx b/components/pages/hotel-detail.tsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import Head from 'next/head';
 import { Wrapper } from '../wrapper';
 import { Menu } from '../menu';
-import { checkIfFavoritesStored, getHotelUrl, getVacationTypeColor, getVacationTypeDescription, getVacationTypeIcon } from '../../utils';
+import { checkIfFavoritesStored, getHotelUrl, getVacationTypeColor, getVacationTypeDescription, getVacationTypeIcon, track } from '../../utils';
 import { Footer } from '../footer';
 import { Flex, JustifyContent } from '../utils/flex';
 import { Tag } from '../tag';
@@ -429,12 +429,17 @@ export const HotelDetailPage: FunctionComponent<HotelDetailProps> = props => {
 
                     <StyledStickyWrapper>
                         <StyledActionBar>
-                            <StyledFavoriteArea pirsch-event={isFavorite ? "Remove from favorites" : "Add to favorite"} pirsch-meta-hotel={props.hotel.id} pirsch-meta-page="Hotel Detail" active={isFavorite} onClick={() => isFavorite ? removeFavorite(props.hotel.id) : addFavorite(props.hotel.id)}>
+                            <StyledFavoriteArea
+                                pirsch-event={isFavorite ? "Remove from favorites" : "Add to favorite"}
+                                pirsch-meta-hotel={props.hotel.id}
+                                pirsch-meta-page="Hotel Detail"
+                                active={isFavorite}
+                                onClick={() => isFavorite ? removeFavorite(props.hotel.id) : addFavorite(props.hotel.id)}>
                                 <StarIcon />
                                 <Text>Favorite</Text>
                             </StyledFavoriteArea>
                             {link &&
-                                <StyledOutLink href={link} target='_blank'>
+                                <StyledOutLink href={link} target='_blank' onClick={() => track('Outbound Link Click', { Hotel: props.hotel.id })}>
                                     <Button iconRight={<ExternalLinkIcon />}>Open {props.hotel.links.hotel ? `${props.hotel.housingType} Website` : 'on Booking.com'}</Button>
                                 </StyledOutLink>
                             }

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -6,10 +6,6 @@ import { siteTitle } from '../data/site';
 import Script from 'next/script';
 
 function App({ Component, pageProps }: AppProps) {
-    const trackingEnabled = process.env.NODE_ENV === 'production' &&
-        (!process.env.NEXT_PUBLIC_VERCEL_ENV ||
-            process.env.NEXT_PUBLIC_VERCEL_ENV === 'production');
-
     return (
         <Theme>
             <Head>
@@ -21,15 +17,13 @@ function App({ Component, pageProps }: AppProps) {
                 <meta property="og:site_name" content={siteTitle} />
                 <meta property="og:type" content="website" />
             </Head>
-            {trackingEnabled &&
-                <Script
-                    defer
-                    type="text/javascript"
-                    src="https://api.pirsch.io/pirsch-extended.js"
-                    id="pirschextendedjs"
-                    data-code="lTp1KC9kQJ72klGFeYBab8pf59w9VPaW"
-                />
-            }
+            <Script
+                defer
+                type="text/javascript"
+                src="https://api.pirsch.io/pirsch-extended.js"
+                id="pirschextendedjs"
+                data-code="lTp1KC9kQJ72klGFeYBab8pf59w9VPaW"
+            />
             <Global styles={css`body { margin: 0; background: ${Color.Background}; color: ${Color.Text}; }`} />
             <Component {...pageProps} />
         </Theme>

diff --git a/utils/index.tsx b/utils/index.tsx
@@ -104,3 +104,7 @@ export function getCountryFlag(country: string) {
             return "🇺🇸"
     }
 }
+
+export function track(eventName: string, meta?: { [key: string]: string }) {
+    (window as any).pirsch?.(eventName, { meta });
+}