PWA Kit & demo analytics

overrides/app/components/_app-config/index.jsx

@@ -101,7 +101,11 @@ const AppConfig = ({children, locals = {}}) => {
                 OCAPISessionsURL={`${appOrigin}${proxyBasePath}/ocapi/s/${locals.site?.id}/dw/shop/v22_8/sessions`}
                 logger={createLogger({packageName: 'commerce-sdk-react'})}
             >
-                <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>
+                <MultiSiteProvider
+                    site={locals.site}
+                    locale={locals.locale}
+                    buildUrl={locals.buildUrl}
+                >
                     <ChakraProvider theme={theme}>{children}</ChakraProvider>
                 </MultiSiteProvider>
                 <ReactQueryDevtools />

overrides/app/components/algolia/homepage/content/index.jsx

@@ -2,7 +2,13 @@ import React from 'react'
 import './style.css'
 import {ChevronRightIcon} from '@chakra-ui/icons'
 import {getAssetUrl} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
+import {trackEvent} from '../segmentTracker'
+
 export default function Content() {
+    const handleClick = (eventTitle) => {
+        trackEvent(eventTitle)
+    }
+
     const contents = [
         {
             src: getAssetUrl('static/img/shoecarnival.jpg'),
@@ -39,6 +45,7 @@ export default function Content() {
                                 href={content.url}
                                 className="contact"
                                 rel="noreferrer noopener"
+                                onClick={() => handleClick('Read the story: ' + content.alt)}
                             >
                                 <p>Read the story</p>
                                 <div className="arrow-right-box">

overrides/app/components/algolia/homepage/header/index.jsx

@@ -1,13 +1,18 @@
 import React from 'react'
 import './style.css'
 import {getAssetUrl} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
+import {trackEvent} from '../segmentTracker'
 
 export default function Header() {
     const img = {
         src: getAssetUrl('static/img/homepagecloud.svg'),
         alt: 'Homepage Bulut'
     }
 
+    const handleClick = (eventTitle) => {
+        trackEvent(eventTitle)
+    }
+
     return (
         <div className="header">
             <div className="container">
@@ -21,13 +26,15 @@ export default function Header() {
                             target="_blank"
                             className="demo"
                             rel="noreferrer noopener"
+                            onClick={() => handleClick('Demo Request')}
                         >
                             Request a custom demo
                         </a>
                         <a
                             href="/category/womens"
                             className="download"
                             rel="noreferrer noopener"
+                            onClick={() => handleClick('Explore the storefront')}
                         >
                             Explore the storefront
                         </a>

overrides/app/components/algolia/homepage/journey/index.jsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import './style.css'
 import {ChevronRightIcon} from '@chakra-ui/icons'
+import {trackEvent} from '../segmentTracker'
+
 export default function Journey() {
+    const handleClick = (eventTitle) => {
+        trackEvent(eventTitle)
+    }
     return (
         <div className="journey">
             <div className="journey-container">
@@ -16,7 +21,11 @@ export default function Journey() {
                             development of connectors for some of the most popular solutions in the
                             market.
                         </p>
-                        <a href="mailto:partners@algolia.com" className="contact">
+                        <a
+                            href="mailto:partners@algolia.com"
+                            className="contact"
+                            onClick={() => handleClick('Contact Us')}
+                        >
                             <p>Contact us for more information</p>
                             <div className="arrow-right-box">
                                 <ChevronRightIcon className="arrow-right" />

overrides/app/components/algolia/homepage/leading/index.jsx

@@ -4,8 +4,13 @@ import {getAssetUrl} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
 import {useKeenSlider} from 'keen-slider/react'
 import 'keen-slider/keen-slider.min.css'
 import {ChevronLeftIcon, ChevronRightIcon} from '@chakra-ui/icons'
+import {trackEvent} from '../segmentTracker'
 
 export default function Leading() {
+    const handleClick = (eventTitle) => {
+        trackEvent(eventTitle)
+    }
+
     const images = [
         {
             src: getAssetUrl('static/img/dior.svg'),
@@ -122,7 +127,12 @@ export default function Leading() {
                                 <p className="brand-name">{brand.name}</p>
                                 <p className="brand-job">{brand.job}</p>
                             </div>
-                            <a target="_blank" href={brand.href} rel="noreferrer noopener">
+                            <a
+                                target="_blank"
+                                href={brand.href}
+                                rel="noreferrer noopener"
+                                onClick={() => handleClick('Read their story')}
+                            >
                                 Read their story
                             </a>
                         </div>

overrides/app/components/algolia/homepage/segmentTracker.js

@@ -0,0 +1,6 @@
+function trackEvent(event) {
+    if (window && window.analytics) {
+        window.analytics.track(event)
+    }
+}
+export {trackEvent}

overrides/app/components/algolia/homepage/try/index.jsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import './style.css'
+import {trackEvent} from '../segmentTracker'
 
 export default function Try() {
+    const handleClick = (eventTitle) => {
+        trackEvent(eventTitle)
+    }
+
     return (
         <div className="try">
             <div className="container">
@@ -14,6 +19,7 @@ export default function Try() {
                         target="_blank"
                         className="demo"
                         rel="noreferrer noopener"
+                        onClick={() => handleClick('Demo Request AI search')}
                     >
                         Get a demo
                     </a>
@@ -22,6 +28,7 @@ export default function Try() {
                         target="_blank"
                         className="free"
                         rel="noreferrer noopener"
+                        onClick={() => handleClick('Start free AI search')}
                     >
                         Start free
                     </a>

overrides/app/components/algolia/style.css

@@ -1234,6 +1234,26 @@ body {
   }
 }
 
+#ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings {
+  color: inherit !important;
+  border: none !important;
+  height: inherit !important;
+  white-space: inherit !important;
+  word-wrap: inherit !important;
+  padding: inherit !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+  cursor: inherit !important;
+  display: block !important;
+  margin-bottom: 8px;
+  text-decoration: none;
+}
+
+#ot-sdk-btn.ot-sdk-show-settings:hover, #ot-sdk-btn.optanon-show-settings:hover {
+  color: inherit !important;
+  background-color: transparent !important;
+}
+
 .ais-HierarchicalMenu-link--selected {
   color: #5468ff;
 }

overrides/app/components/footer/index.jsx

@@ -17,6 +17,7 @@ import {getPathWithLocale} from '@salesforce/retail-react-app/app/utils/url'
 import LocaleText from '@salesforce/retail-react-app/app/components/locale-text'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 import styled from '@emotion/styled'
+import {trackEvent} from '../algolia/homepage/segmentTracker'
 
 const [StylesProvider] = createStylesContext('Footer')
 
@@ -37,6 +38,9 @@ const FooterLink = styled.a`
 `
 
 const Footer = ({...otherProps}) => {
+    const handleClick = (eventTitle) => {
+        trackEvent('Footer: ' + eventTitle)
+    }
     const styles = useMultiStyleConfig('Footer')
     const intl = useIntl()
     const [locale, setLocale] = useState(intl.locale)
@@ -57,19 +61,39 @@ const Footer = ({...otherProps}) => {
                         <SimpleGrid columns={3} spacing={3}>
                             <Box>
                                 <FooterHeading>Find out more</FooterHeading>
-                                <FooterLink href="https://www.algolia.com/about/" target="_blank" rel="noopener noreferrer">
+                                <FooterLink
+                                    href="https://www.algolia.com/about/"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    onClick={() => handleClick('About Algolia')}
+                                >
                                     About Algolia
                                 </FooterLink>
-                                <FooterLink href="https://algolia.com/" target="_blank" rel="noopener noreferrer">
+                                <FooterLink
+                                    href="https://algolia.com/"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    onClick={() => handleClick('Algolia Website')}
+                                >
                                     Algolia Website
                                 </FooterLink>
                             </Box>
                             <Box>
                                 <FooterHeading>Try it out</FooterHeading>
-                                <FooterLink href="https://www.algolia.com/doc/integration/salesforce-commerce-cloud-b2c/getting-started/introduction/" target="_blank" rel="noopener noreferrer">
+                                <FooterLink
+                                    href="https://www.algolia.com/doc/integration/salesforce-commerce-cloud-b2c/getting-started/introduction/"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    onClick={() => handleClick('Explore the cartridge')}
+                                >
                                     Explore the cartridge
                                 </FooterLink>
-                                <FooterLink href="/">
+                                <FooterLink
+                                    href="https://dashboard.algolia.com/users/sign_up"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    onClick={() => handleClick('Sign up')}
+                                >
                                     {intl.formatMessage({
                                         id: 'footer.link.signin_create_account',
                                         defaultMessage: 'Sign in or create account'
@@ -78,10 +102,20 @@ const Footer = ({...otherProps}) => {
                             </Box>
                             <Box>
                                 <FooterHeading>Contact us</FooterHeading>
-                                <FooterLink href="https://www.algolia.com/demorequest/" target="_blank" rel="noopener noreferrer">
+                                <FooterLink
+                                    href="https://www.algolia.com/demorequest/"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    onClick={() => handleClick('Demo Request')}
+                                >
                                     Request custom demo
                                 </FooterLink>
-                                <FooterLink href="https://support.algolia.com/hc/en-us" target="_blank" rel="noopener noreferrer">
+                                <FooterLink
+                                    href="https://support.algolia.com/hc/en-us"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    onClick={() => handleClick('Get support')}
+                                >
                                     Get support
                                 </FooterLink>
                             </Box>
@@ -145,7 +179,12 @@ const LegalLinks = ({variant}) => {
     const intl = useIntl()
     const styles = useMultiStyleConfig('Footer')
     return (
-        <Box {...(variant === 'vertical' ? styles.legalLinksVertical : styles.legalLinksHorizontal)}>
+        <Box
+            {...(variant === 'vertical' ? styles.legalLinksVertical : styles.legalLinksHorizontal)}
+        >
+            <button id="ot-sdk-btn" className="ot-sdk-show-settings">
+                Cookie Settings
+            </button>
             <FooterLink href="/" {...styles.legalLink}>
                 {intl.formatMessage({
                     id: 'footer.link.terms_conditions',
@@ -170,4 +209,4 @@ const LegalLinks = ({variant}) => {
 
 LegalLinks.propTypes = {
     variant: PropTypes.oneOf(['vertical', 'horizontal'])
-}
+}

overrides/app/components/header/index.jsx

@@ -48,6 +48,7 @@ import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation
 import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
 import {isHydrated, noop} from '@salesforce/retail-react-app/app/utils/utils'
 import {useCurrency} from '@salesforce/retail-react-app/app/hooks'
+import {useLocation} from 'react-router-dom'
 
 import {Autocomplete} from '../algolia/autocomplete'
 
@@ -79,6 +80,15 @@ const Header = ({
     ...props
 }) => {
     const intl = useIntl()
+    const location = useLocation()
+
+    React.useEffect(() => {
+        console.log('Page view')
+        if (window && window.analytics) {
+            window.analytics.page()
+        }
+    }, [location])
+
     const {
         derivedData: {totalItems},
         data: basket

overrides/app/pages/algolia-product-list/index.jsx

@@ -197,8 +197,13 @@ const ProductList = (props) => {
             {...rest}
         >
             <Helmet>
-                <title>{"Algolia | " + (category?.pageTitle || (searchQuery + ' Search Results'))}</title>
-                <meta name="description" content={category?.pageDescription || ('Search Results for ' + searchQuery)} />
+                <title>
+                    {'Algolia | ' + (category?.pageTitle || searchQuery + ' Search Results')}
+                </title>
+                <meta
+                    name="description"
+                    content={category?.pageDescription || 'Search Results for ' + searchQuery}
+                />
                 <meta name="keywords" content={category?.pageKeywords} />
                 <link
                     rel="stylesheet"

overrides/app/pages/home/index.jsx

@@ -13,7 +13,6 @@ import {Box, Button, Stack, Link} from '@salesforce/retail-react-app/app/compone
 
 // Project Components
 import Hero from '@salesforce/retail-react-app/app/components/hero'
-import Seo from '@salesforce/retail-react-app/app/components/seo'
 import Section from '@salesforce/retail-react-app/app/components/section'
 import ProductScroller from '@salesforce/retail-react-app/app/components/product-scroller'
 

overrides/app/ssr.js

@@ -46,22 +46,45 @@ const {handler} = runtime.createHandler(options, (app) => {
                 useDefaults: true,
                 directives: {
                     'img-src': [
-                        //@TODO: Default source for product images - replace with your CDN
+                        "'self'",
                         '*.commercecloud.salesforce.com',
                         '*.cloudinary.com',
-                        '*.istockphoto.com'
+                        '*.istockphoto.com',
+                        '*.cookielaw.org',
+                        '*.invibes.com',
+                        '*.b26net.com',
+                        '*.ads.linkedin.com'
                     ],
                     'script-src': [
-                        // Used by the service worker in /worker/main.js
-                        'storage.googleapis.com'
+                        "'self'",
+                        "'unsafe-inline'",
+                        "'unsafe-eval'",
+                        'storage.googleapis.com',
+                        '*.cookielaw.org',
+                        '*.segment.io',
+                        '*.segment.com',
+                        '*.hotjar.com',
+                        '*.googletagmanager.com',
+                        '*.amplitude.com',
+                        '*.madkudu.com',
+                        '*.google-analytics.com',
+                        'localhost:*'
                     ],
                     'connect-src': [
-                        // Connect to Einstein APIs
+                        "'self'",
                         'api.cquotient.com',
                         '*.algolianet.com',
                         '*.algolia.net',
                         'insights.algolia.io',
-                        'cdn.jsdelivr.net'
+                        'cdn.jsdelivr.net',
+                        '*.cookielaw.org',
+                        '*.segment.io',
+                        '*.segment.com',
+                        '*.hotjar.com',
+                        '*.googletagmanager.com',
+                        '*.amplitude.com',
+                        '*.madkudu.com',
+                        '*.google-analytics.com'
                     ]
                 }
             }