{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/ftw/how-to-set-up-analytics-for-ftw/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"How to set up Analytics for FTW","slug":"how-to-set-up-analytics-for-ftw","updated":"2021-05-09T00:00:00.000Z","category":"ftw-analytics","ingress":"This guide describes how to set up analytics for Flex Template for Web (FTW).","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW comes with built-in support for Google Analytics and supports\ntracking page views with customisable analytics handlers. This article\nexplains how to enable Google Analytics and use and create custom\nanalytics handlers."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"configure-google-analytics","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configure-google-analytics","ariaLabel":"configure google analytics permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Configure Google Analytics"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW has built-in support for Google Analytics. All you need to do is\nassign your Google Analytics Tracking ID to the environment variable\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_GOOGLE_ANALYTICS_ID"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Google Analytics doesn't work in a hot-loading environment! The\nanalytics script is added server-side. You can test it in your local\nenvironment by using the command "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"yarn run dev-server"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"google-analytics-4","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#google-analytics-4","ariaLabel":"google analytics 4 permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Google Analytics 4"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Google recently released their new analytics service Google Analytics 4.\nSupport for Google Universal Analytics will end on October 1, 2023. New\nversions of FTW provide out-of-the-box support for Google Analytics 4."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're starting development on a new version of FTW and prefer to use\nUniversal Analytics, you should look into how Analytics was implemented\nbefore\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/pull/1508","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"this pull request"}]},{"type":"text","value":".\nIf, on the other hand, you're working on an older version of FTW, and\nyou want to start using GA4, you'll need to implement the changes\nintroduced in that\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/pull/1508","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"pull request"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"New versions of FTW will expect a Tracking ID compatible with Google\nAnalytics 4. FTW expects the ID to begin with the \"G-\" prefix."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"enhanced-measurements","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#enhanced-measurements","ariaLabel":"enhanced measurements permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Enhanced measurements"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is not recommended to use the Enhanced Measurements feature\nintroduced in Google Analytics 4, which is enabled by default. The\nEnhanced Measurements feature injects code into link tags which can\nbreak in-app navigation in FTW. Therefore, we strongly recommend\ndisabling the Enhanced Measurements feature when using Google Analytics\n4 with FTW."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"video","properties":{},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"source","properties":{"src":"/docs/legacy/b0b0604129e1cc641cdad65fb5a26b85/turn-off-enhanced-measurements.mp4","type":"video/mp4"},"children":[]},{"type":"text","value":"\n    "},{"type":"element","tagName":"source","properties":{"src":"/docs/legacy/876ab7a86cd70147f51ef5a3504408c9/turn-off-enhanced-measurements.webm","type":"video/webm"},"children":[]},{"type":"text","value":"\n    "},{"type":"element","tagName":"source","properties":{"src":"/docs/legacy/4abec46cbb5810d0b138b424e4207d2e/turn-off-enhanced-measurements.ogv","type":"video/ogg"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If that's not an option, you can continue to use Enhanced Measurements\nif you disable the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Outbound clicks"}]},{"type":"text","value":" and "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"page changes based on browser\nhistory events"}]},{"type":"text","value":" features."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/6428c/disable.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 118.86792452830188%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAABYlAAAWJQFJUiTwAAADVUlEQVQ4y5VVSa7bRhDlabPJMbLIPYIgyD7IBeJNgngRfFv+IimR1MB56GZTnNl8RhXJL/nHjuMGHqq6JVZXvRra0FqjbhrEcYwsy1AUBcs8z1lP05TlPM94XNt20jN++E3hu58EfvmzgTFNi0H6kJAkCSMIAkRRxKAL6GIyukHrma2O04wff1f4/meBX/+qYWw33m43KKXwzeuV54abjvjb7RH5Z9hHB5fLFXGSIoxiBGGIhPUIYRghSVNEcYwouqMfBpDJXJQQsoTRDDNkrZGnMcLAx/VyRp4laOoKUkooVbHnsixZpzPSS4bCpDV7No4j4yVkX85wswmnXC+ymKHn/xv1/Y9scJwmxGmOqulRtwOGCYwvffwaj+dskDIYxxGkEBCiQKUUbrcKVaU43Kpawu667pOPP7cMPWv04wAhBPPTNA1nnOSGtm1R1zVz9F/eUikZVurhjfMWZS4hpOCsUV2Sgc0gXVDXiyRvq/XCJbrF03eXDu+u/T0pQkgubCpiMtj3PYPCJA+3/XZG8vViD7O6wUmUCK5XOK4Lz/PYMFFQMKcbKAKJolj2JKmjqC7Ja9/3+RLDExJvrwEiP4Bp2Tg6LvZ7E897E6ZlYW+aME2Ldcuy8eHDMw5Hh/dHx2GjRMfT0xPTdG+9uuZMNit/ijNd83nTtuwF6XTWrEmapn/XltGNM1Q7IfB9uK6LUinm7DHDJIm35bI1++v55kQ/aoZhxyPeWB2uZwd7y+ZwKLS9acGyD0vIlsV02Icj7MOBQ7WYHgd+EKKuSuz8Ae+3LFMNUSK2mUizkCQNhoTPE5YU4jAMGIaRE/BpXc4Mg4xRgycVcBHU08BVzNzT3fj1Pt7mpF5xT0rT4dYOuDU92n7CqPENw+HBw7MI8I//jMgPYZomdrsdLpczpBRQpYQUBUSRr61ZIssXPc8LpERLmmEcOpzzCV42wkhvOQ6ZhzRO4XonHrCO4+J4PGLvhHjvJNg5EUz7AO90Wp+K7IVj4ldPIxI1IZLbPJwBVSmIQvDgfKRZr/h69GvIVjTgD6tDngRcJo7jIE4SRpalL6DMk0cULtUqT25ZcnsCE56DATsqG3oGCVSgxAt5mGX5+qSKl56m3+g5pWlE5bKUzwLK9DAu+AiMZzDpiedqpwAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/82e29/disable.webp 159w","/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/ef33f/disable.webp 318w","/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/f1837/disable.webp 635w","/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/29549/disable.webp 953w","/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/c5420/disable.webp 1270w","/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/f499b/disable.webp 1408w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/8b9b5/disable.png 159w","/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/fa108/disable.png 318w","/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/53fb6/disable.png 635w","/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/5a426/disable.png 953w","/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/91155/disable.png 1270w","/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/6428c/disable.png 1408w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/a912315b87e3cf54a81b6cd5b863d0c1/53fb6/disable.png","alt":"Disable Outbound clicks","title":"Disable Outbound clicks","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"built-in-handlers","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#built-in-handlers","ariaLabel":"built in handlers permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Built-in handlers"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW includes an\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/blob/89b9390e7235253067d0e78d9f838fbd6b07c10d/src/analytics/handlers.js#L16","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"event handler"}]},{"type":"text","value":"\nthat sends "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"page_view"}]},{"type":"text","value":" events to Google Analytics. These events need to\nregistered manually because FTW is a single-page application, meaning\nthat in-app navigation does not render a page load."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Google Analytics script registers a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"page_view"}]},{"type":"text","value":" event automatically\non every page load. The\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/blob/89b9390e7235253067d0e78d9f838fbd6b07c10d/src/analytics/handlers.js#L16","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"trackPageView"}]}]},{"type":"text","value":"\nfunction takes this into account and only sends a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"page_view"}]},{"type":"text","value":" event to\nGoogle if a page is accessed through in-app navigation."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you'd like to track something other than page views, you can\nimplement your custom handler using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"trackPageView"}]},{"type":"text","value":" function as an\nexample."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"custom-analytics-libraries","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#custom-analytics-libraries","ariaLabel":"custom analytics libraries permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Custom analytics libraries"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you choose to add another analytics provider (e.g. Facebook Pixel),\nyou can follow these steps to import the third-party script and create a\ncustom handler. In some cases, it might also be worth looking into npm\npackages instead of manually appending a third-party script."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"add-the-analytics-library-script","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-the-analytics-library-script","ariaLabel":"add the analytics library script permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Add the analytics library script"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the analytics library has an external script, you can add the library\nscript tag to the\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/public/index.html","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"public/index.html"}]},{"type":"text","value":"\nfile."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In some cases, you might want to import the script during server-side\nrendering (SSR). Importing the script during SSR also allows you to\nconditionally import the script, depending on, e.g. certain environment\nvariables. To inject the script during SSR, see how the\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"googleAnalyticsScript"}]},{"type":"text","value":" is imported in the\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/server/renderer.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"server/renderer.js"}]},{"type":"text","value":"\nfile."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"create-a-handler","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#create-a-handler","ariaLabel":"create a handler permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Create a handler"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can create a custom handler e.g. in\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/analytics/handlers.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"src/analytics/handlers.js"}]},{"type":"text","value":".\nIf you want to track page views, you could create a class that\nimplements a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"trackPageView(canonicalPath, previousPath)"}]},{"type":"text","value":" method."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"canonicalPath"}]},{"type":"text","value":" parameter passed to the function might not\nbe the same path as in the URL bar of the browser. It is the canonical\nform of the URL."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"For example"}]},{"type":"text","value":": the listing page URL is constructed dynamically:\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"l/{listing-slug}/{listing-id}"}]},{"type":"text","value":". The canonical form of that URL would\nbe: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"l/{listing-id}"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A \""},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"slug"}]},{"type":"text","value":"\" is a web development term for a short, user-friendly\nstring. In the example above, FTW generates the slug from the\nlisting's title, which is prone to frequent changes. Therefore, a\ncanonical form of that URL is needed to maintain a stable link which\ndoesn't change every time the name of the listing changes."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This approach allows unified analytics and correct tracking of pages\nthat can be accessed from multiple URLs."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If your analytics library tries to access the page URL directly through\nthe browser, you might need to override that behavior to use the\ncanonical URL that is given to the method."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"initialise-the-handler","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#initialise-the-handler","ariaLabel":"initialise the handler permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Initialise the handler"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, you only need to initialise the handler in the\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setupAnalyticsHandlers()"}]},{"type":"text","value":" function in\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/index.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"src/index.js"}]},{"type":"text","value":"."}]}],"data":{"quirksMode":false}},"headings":[{"value":"Configure Google Analytics","depth":2},{"value":"Google Analytics 4","depth":3},{"value":"Enhanced measurements","depth":4},{"value":"Built-in handlers","depth":3},{"value":"Custom analytics libraries","depth":2},{"value":"Add the analytics library script","depth":3},{"value":"Create a handler","depth":3},{"value":"Initialise the handler","depth":3}]}},"pageContext":{"slug":"how-to-set-up-analytics-for-ftw","category":"ftw-analytics"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}