docs: Document exposing gtag for custom events in Qwik Partytown setup (

#6303) Expose gtag for custom events in Qwik Partytown setup This update enhances the Qwik application's integration with Google Analytics via Partytown by ensuring the `gtag` function is exposed for use in components, enabling the sending of custom events directly from the component level. Key changes: 1. Updated the Partytown script configuration to expose `gtag` globally, allowing for direct invocation in component logic. 2. Added the complete Google Analytics integration script as recommended by Google, ensuring comprehensive tracking capabilities. 3. Documented this integration pattern to assist others in setting up Google Analytics with Partytown in Qwik applications, addressing a common challenge found during implementation.
QwikDev · May 13, 2024 · bb8b7a9 · bb8b7a9
1 parent 7627cf5
commit bb8b7a9
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/packages/docs/src/routes/docs/integrations/partytown/index.mdx b/packages/docs/src/routes/docs/integrations/partytown/index.mdx
@@ -43,12 +43,23 @@ export default component$(() => {
     <QwikCityProvider>
       <head>
         <meta charSet="utf-8" />
-        <QwikPartytown forward={['dataLayer.push']} />
+        <QwikPartytown forward={['gtag','dataLayer.push']} />
         <script
           async
           type="text/partytown"
           src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"
         />
+        <script
+          type="text/partytown"
+          dangerouslySetInnerHTML={`
+            window.dataLayer = window.dataLayer || [];
+            window.gtag = function() {
+              dataLayer.push(arguments);
+            }
+            gtag('js', new Date());
+            gtag('config', 'G-XXXXXX');
+          `}
+        />
       </head>
       <body lang="en"></body>
     </QwikCityProvider>