diff --git a/overrides/app/components/_app-config/index.jsx b/overrides/app/components/_app-config/index.jsx index 34ece11..5f37daa 100644 --- a/overrides/app/components/_app-config/index.jsx +++ b/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'})} > - + {children} diff --git a/overrides/app/components/algolia/homepage/content/index.jsx b/overrides/app/components/algolia/homepage/content/index.jsx index ce65687..70af4e8 100644 --- a/overrides/app/components/algolia/homepage/content/index.jsx +++ b/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)} >

Read the story

diff --git a/overrides/app/components/algolia/homepage/header/index.jsx b/overrides/app/components/algolia/homepage/header/index.jsx index cd768b4..e9ca17d 100644 --- a/overrides/app/components/algolia/homepage/header/index.jsx +++ b/overrides/app/components/algolia/homepage/header/index.jsx @@ -1,6 +1,7 @@ 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 = { @@ -8,6 +9,10 @@ export default function Header() { alt: 'Homepage Bulut' } + const handleClick = (eventTitle) => { + trackEvent(eventTitle) + } + return (
@@ -21,6 +26,7 @@ export default function Header() { target="_blank" className="demo" rel="noreferrer noopener" + onClick={() => handleClick('Demo Request')} > Request a custom demo @@ -28,6 +34,7 @@ export default function Header() { href="/category/womens" className="download" rel="noreferrer noopener" + onClick={() => handleClick('Explore the storefront')} > Explore the storefront diff --git a/overrides/app/components/algolia/homepage/journey/index.jsx b/overrides/app/components/algolia/homepage/journey/index.jsx index 0f62604..e46017d 100644 --- a/overrides/app/components/algolia/homepage/journey/index.jsx +++ b/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 (
@@ -16,7 +21,11 @@ export default function Journey() { development of connectors for some of the most popular solutions in the market.

- + handleClick('Contact Us')} + >

Contact us for more information

diff --git a/overrides/app/components/algolia/homepage/leading/index.jsx b/overrides/app/components/algolia/homepage/leading/index.jsx index 9a7c72d..28f4871 100644 --- a/overrides/app/components/algolia/homepage/leading/index.jsx +++ b/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() {

{brand.name}

{brand.job}

-
+ handleClick('Read their story')} + > Read their story
diff --git a/overrides/app/components/algolia/homepage/segmentTracker.js b/overrides/app/components/algolia/homepage/segmentTracker.js new file mode 100644 index 0000000..bc2f674 --- /dev/null +++ b/overrides/app/components/algolia/homepage/segmentTracker.js @@ -0,0 +1,6 @@ +function trackEvent(event) { + if (window && window.analytics) { + window.analytics.track(event) + } +} +export {trackEvent} diff --git a/overrides/app/components/algolia/homepage/try/index.jsx b/overrides/app/components/algolia/homepage/try/index.jsx index 3480dba..e95eea7 100644 --- a/overrides/app/components/algolia/homepage/try/index.jsx +++ b/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 (
@@ -14,6 +19,7 @@ export default function Try() { target="_blank" className="demo" rel="noreferrer noopener" + onClick={() => handleClick('Demo Request AI search')} > Get a demo @@ -22,6 +28,7 @@ export default function Try() { target="_blank" className="free" rel="noreferrer noopener" + onClick={() => handleClick('Start free AI search')} > Start free diff --git a/overrides/app/components/algolia/style.css b/overrides/app/components/algolia/style.css index 250eecc..0d4ac07 100644 --- a/overrides/app/components/algolia/style.css +++ b/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; } diff --git a/overrides/app/components/footer/index.jsx b/overrides/app/components/footer/index.jsx index c7a8f34..b8f7573 100644 --- a/overrides/app/components/footer/index.jsx +++ b/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}) => { Find out more - + handleClick('About Algolia')} + > About Algolia - + handleClick('Algolia Website')} + > Algolia Website Try it out - + handleClick('Explore the cartridge')} + > Explore the cartridge - + handleClick('Sign up')} + > {intl.formatMessage({ id: 'footer.link.signin_create_account', defaultMessage: 'Sign in or create account' @@ -78,10 +102,20 @@ const Footer = ({...otherProps}) => { Contact us - + handleClick('Demo Request')} + > Request custom demo - + handleClick('Get support')} + > Get support @@ -145,7 +179,12 @@ const LegalLinks = ({variant}) => { const intl = useIntl() const styles = useMultiStyleConfig('Footer') return ( - + + {intl.formatMessage({ id: 'footer.link.terms_conditions', @@ -170,4 +209,4 @@ const LegalLinks = ({variant}) => { LegalLinks.propTypes = { variant: PropTypes.oneOf(['vertical', 'horizontal']) -} \ No newline at end of file +} diff --git a/overrides/app/components/header/index.jsx b/overrides/app/components/header/index.jsx index 09e1534..324d41f 100644 --- a/overrides/app/components/header/index.jsx +++ b/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 diff --git a/overrides/app/pages/algolia-product-list/index.jsx b/overrides/app/pages/algolia-product-list/index.jsx index 6eadc13..7c308d4 100644 --- a/overrides/app/pages/algolia-product-list/index.jsx +++ b/overrides/app/pages/algolia-product-list/index.jsx @@ -197,8 +197,13 @@ const ProductList = (props) => { {...rest} > - {"Algolia | " + (category?.pageTitle || (searchQuery + ' Search Results'))} - + + {'Algolia | ' + (category?.pageTitle || searchQuery + ' Search Results')} + + { 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' ] } } diff --git a/package-lock.json b/package-lock.json index cb0e557..60dcacd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@algolia/ui-components-horizontal-slider-react": "1.2.3", "@algolia/ui-components-horizontal-slider-theme": "1.2.3", "algoliasearch": "4.23.3", + "crypto": "^1.0.1", "keen-slider": "^6.8.6", "prop-types": "^15.8.1", "ramda": "0.29.1", @@ -11126,6 +11127,13 @@ "semver": "bin/semver" } }, + "node_modules/crypto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/crypto/-/crypto-1.0.1.tgz", + "integrity": "sha512-VxBKmeNcqQdiUQUW2Tzq0t377b54N2bMtXO/qiLa+6eRRmmC4qT3D4OnTGoT/U6O9aklQ/jTwbOtRMTTY8G0Ig==", + "deprecated": "This package is no longer supported. It's now a built-in Node module. If you've depended on crypto, you should switch to the one that's built-in.", + "license": "ISC" + }, "node_modules/crypto-random-string": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",