feat: add support for Google Tag Manager environment config #2035
Conversation
Corresponds to this change in the rudder-integrations-config repo: rudderlabs/rudder-integrations-config#1894
📝 WalkthroughWalkthroughThe changes update the GoogleTagManager integration to support additional configuration parameters. In the Changes
Sequence Diagram(s)sequenceDiagram
participant Client
participant GTM as GoogleTagManager
participant Loader as NativeSdkLoader
Client->>GTM: Instantiate with config (includes environmentID & authorizationToken)
GTM->>GTM: Validate and extract new parameters from config
GTM->>Loader: Call loadNativeSdk(containerID, serverUrl, environmentID, authorizationToken)
Loader-->>GTM: Return loaded SDK
GTM-->>Client: SDK initialized
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
tmchow
changed the title
tmchow
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/analytics-js-integrations/src/integrations/GoogleTagManager/browser.js(2 hunks)packages/analytics-js-integrations/src/integrations/GoogleTagManager/nativeSdkLoader.js(2 hunks)
🔇 Additional comments (3)
packages/analytics-js-integrations/src/integrations/GoogleTagManager/nativeSdkLoader.js (2)
3-3: LGTM! Function signature updated to support GTM environment configuration.The new parameters align with GTM's requirements for environment-specific configuration.
19-19: Verify GTM URL format with official documentation.The URL construction appears correct, but let's verify the format and required parameters against GTM's documentation.
✅ Verification successful
🌐 Web query:
What is the correct URL format for Google Tag Manager's gtm.js with environment and authorization parameters?💡 Result:
The correct URL format for Google Tag Manager's `gtm.js` script with environment and authorization parameters combines your container ID with specific environment identifiers: ``` https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX&env=EnvironmentID&auth=AuthorizationCode ``` ### Key components explained: 1. **Container ID** (`id=GTM-XXXXXX`): Your unique GTM container identifier[4][7]. 2. **Environment parameter** (`env=EnvironmentID`): Specifies which pre-configured environment (e.g., development/staging/production) to load[5][9]. Environment IDs are found in GTM's Admin interface under Environments[5]. 3. **Authorization code** (`auth=AuthorizationCode`): A security token generated for each environment to control access[5][9]. This code appears in the environment configuration details[5]. ### Example implementation: ```html <script> (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= 'https://www.googletagmanager.com/gtm.js?id=GTM-ABCD1234&env=54&auth=zdk93k2Fd%3D';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-ABCD1234'); </script> ``` ### Important considerations: - Use HTTPS protocol for security compliance[4][9] - Environment IDs and auth codes are case-sensitive[5] - Authorization codes expire when environments are modified - regenerate them after changes[5] - Protocol-relative URLs (`//www.googletagmanager.com...`) remain supported for legacy implementations[4] This structure allows controlled deployment of tags through different environments while maintaining security through authorization codes[5][9]. Citations: - 1: https://measureschool.com/url-variable-gtm/ - 2: https://developers.google.com/tag-platform/tag-manager/api/v2/authorization - 3: https://developers.google.com/tag-platform/tag-manager/api/v2/devguide - 4: https://developers.google.com/tag-platform/tag-manager/protocol-relative-url - 5: https://developers.google.com/tag-platform/tag-manager/api/v2/reference/accounts/containers/environments - 6: https://support.google.com/tagmanager/answer/7683362 - 7: https://developers.google.com/tag-platform/tag-manager/datalayer - 8: https://support.google.com/tagmanager/answer/6107163?hl=en - 9: https://www.simoahava.com/analytics/google-tag-template-in-google-tag-manager/ - 10: https://www.simoahava.com/analytics/custom-templates-guide-for-google-tag-manager/
GTM URL structure is compliant with the official documentation.
The URL construction in the code correctly uses the container identifier (id), environment (env), and authorization (auth) parameters when combined with the additional parameters (such as the data layer and cookies).
- Ensure that each variable (e.g.,
gtmAuthandgtmEnv) includes the respective parameter key (like&auth=and&env=) as prescribed by GTM's documentation.- Verify that
window.finalUrlis set to"https://www.googletagmanager.com"to conform to the required HTTPS protocol.packages/analytics-js-integrations/src/integrations/GoogleTagManager/browser.js (1)
30-30: LGTM! init() method correctly passes GTM environment configuration.The initialization properly forwards the environment and authorization parameters to the native SDK loader.
packages/analytics-js-integrations/src/integrations/GoogleTagManager/nativeSdkLoader.js
Outdated
Show resolved
Hide resolved
packages/analytics-js-integrations/src/integrations/GoogleTagManager/browser.js
Show resolved
Hide resolved
…anager/nativeSdkLoader.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…anager/browser.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/analytics-js-integrations/src/integrations/GoogleTagManager/browser.js (1)
19-27: Enhance validation to prevent invalid value assignment.While the validation checks are good, the code still assigns potentially invalid values. Consider preventing the assignment of invalid values.
// Validate environment configuration if (config.environmentID && typeof config.environmentID !== 'string') { logger.error('GTM environmentID must be a string'); + return; } if (config.authorizationToken && typeof config.authorizationToken !== 'string') { logger.error('GTM authorizationToken must be a string'); + return; } this.environmentID = config.environmentID; this.authorizationToken = config.authorizationToken;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/analytics-js-integrations/src/integrations/GoogleTagManager/browser.js(2 hunks)packages/analytics-js-integrations/src/integrations/GoogleTagManager/nativeSdkLoader.js(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/analytics-js-integrations/src/integrations/GoogleTagManager/nativeSdkLoader.js
🔇 Additional comments (2)
packages/analytics-js-integrations/src/integrations/GoogleTagManager/browser.js (2)
38-38: LGTM!The
initmethod correctly passes the GTM environment configuration parameters to the SDK loader.
1-109: Verify integration with rudder-integrations-config repository.Since this PR corresponds to changes in rudder-integrations-config repository (PR #1894), let's verify the integration.
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Check if the integration matches the config repository changes # Clone and check the related PR in rudder-integrations-config git clone https://github.com/rudderlabs/rudder-integrations-config.git cd rudder-integrations-config git fetch origin pull/1894/head:pr-1894 git checkout pr-1894 # Search for GTM environment configuration changes echo "Checking GTM configuration changes in PR #1894:" rg -A 5 "environmentID|authorizationToken" .Length of output: 3119
GTM Configuration Integration Verified
The integration in the analytics-js-integrations repository correctly aligns with the changes in the rudder-integrations-config repository (PR #1894). The updated configuration files in the config repo now support environmentID and authorizationToken—matching the validations and parameters handled by the GoogleTagManager integration in this code.
packages/analytics-js-integrations/src/integrations/GoogleTagManager/browser.js
Outdated
Show resolved
Hide resolved
…anager/browser.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
PR Description
Adds support for Google Tag Manager environment support which requires
gtm_previewandgtm_authparams. This corresponds with the change in the rudder-integrations-config repo: rudderlabs/rudder-integrations-config#1894Linear task (optional)
n/a
Cross Browser Tests
Please confirm you have tested for the following browsers:
Sanity Suite
Security
Summary by CodeRabbit