Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds Google Tag Manager (GTM) tracking to the Docusaurus configuration by injecting a script into the head tags. The review feedback highlights that manual injection may not capture SPA navigation events and recommends using the official Docusaurus GTM plugin instead. Additionally, it is suggested to include a fallback in the body tags to support users with JavaScript disabled.
| innerHTML: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': | ||
| new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], | ||
| j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= | ||
| '//metrics.couchbase.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); | ||
| })(window,document,'script','dataLayer','GTM-MVPNN2');`, |
There was a problem hiding this comment.
Docusaurus is a Single Page Application (SPA). Manually injecting the GTM script via headTags only executes on the initial page load. Subsequent in-app navigations will not trigger 'Page View' events in GTM unless the container is specifically configured with 'History Change' triggers or a clientModule is used to push events to the dataLayer (similar to how scarfAnalytics.js handles route updates).
Consider using the official @docusaurus/plugin-google-tag-manager which handles SPA navigation automatically and is the standard approach for Docusaurus sites.
| '//metrics.couchbase.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); | ||
| })(window,document,'script','dataLayer','GTM-MVPNN2');`, | ||
| }, | ||
| ], |
There was a problem hiding this comment.
The Google Tag Manager implementation is missing the recommended <noscript> fallback component. This should be placed in the <body> to ensure tracking works for users with JavaScript disabled. You can use the preBodyTags configuration in Docusaurus to inject the GTM iframe snippet immediately after the opening <body> tag.
| ], | |
| ], | |
| preBodyTags: [ | |
| { | |
| tagName: 'noscript', | |
| innerHTML: '<iframe src="https://metrics.couchbase.com/ns.html?id=GTM-MVPNN2" height="0" width="0" style="display:none;visibility:hidden"></iframe>', | |
| }, | |
| ], |
Mirrors the pattern from Couchbase-Ecosystem/cbl-ionic-docs#51: adds googleTagManager (GTM-MVPNN2) and gtag (G-J3B5K0YX8B) plugins inside preset-classic options. The Docusaurus plugins handle SPA navigations correctly out of the box. Verified locally via Chrome DevTools: gtm.js + gtag/js load on initial page, GA4 page_view beacon fires on initial load, and a new page_view beacon fires on client-side navigation with the updated path. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Mirrors the pattern from Couchbase-Ecosystem/cbl-ionic-docs#51: adds googleTagManager (GTM-MVPNN2) and gtag (G-J3B5K0YX8B) plugins inside preset-classic options. The Docusaurus plugins handle SPA navigations correctly out of the box. Verified locally via Chrome DevTools: gtm.js + gtag/js load on initial page, GA4 page_view beacon fires on initial load, and a new page_view beacon fires on client-side navigation with the updated path.
Mirrors the pattern from Couchbase-Ecosystem/cbl-ionic-docs#51: adds googleTagManager (GTM-MVPNN2) and gtag (G-J3B5K0YX8B) plugins inside preset-classic options. The Docusaurus plugins handle SPA navigations correctly out of the box. Verified locally via Chrome DevTools: gtm.js + gtag/js load on initial page, GA4 page_view beacon fires on initial load, and a new page_view beacon fires on client-side navigation with the updated path.
2 participants
Following the same pattern followed on Developer Portal: https://github.com/couchbaselabs/developer-portal/pull/712
to add google analytics to the ionic website.