fix(packages/sui-segment-wrapper): fix google analytics script load

SUI-Components · Oct 4, 2024 · 3eb7f2c · 3eb7f2c
1 parent 649aa1a
commit 3eb7f2c
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 15 deletions.
diff --git a/packages/sui-segment-wrapper/README.md b/packages/sui-segment-wrapper/README.md
@@ -10,7 +10,7 @@ This package adds an abstraction layer on top of [segment.com](https://segment.c
 
 **Google Analytics 🔍**
 
-- [x] Load GA4 if `googleAnalyticsMeasurementId` is provided and the `gtag` object is not available in the global scope.
+- [x] Load GA4 if `googleAnalyticsMeasurementId` is provided.
 - [x] Retrieve `clientId` automatically from GA4 and put in Segment tracks.
 
 **Adobe Marketing Cloud Visitor Id ☁️**

diff --git a/packages/sui-segment-wrapper/src/index.js b/packages/sui-segment-wrapper/src/index.js
@@ -5,31 +5,45 @@ import {pageReferrer} from './middlewares/source/pageReferrer.js'
 import {userScreenInfo} from './middlewares/source/userScreenInfo.js'
 import {userTraits} from './middlewares/source/userTraits.js'
 import {checkAnonymousId} from './utils/checkAnonymousId.js'
-import {isClient} from './config.js'
+import {getConfig, isClient} from './config.js'
 import analytics from './segmentWrapper.js'
 import initTcfTracking from './tcf.js'
 import {getUserDataAndNotify} from './universalId.js'
+import {loadGoogleAnalytics} from './repositories/googleRepository.js'
 
-/* Initialize TCF Tracking with Segment */
+// Initialize TCF Tracking with Segment
 initTcfTracking()
 
-/* Generate UniversalId if available */
+// Generate UniversalId if available
 try {
   getUserDataAndNotify()
 } catch (e) {
   console.error(`[segment-wrapper] UniversalID couldn't be initialized`) // eslint-disable-line
 }
 
-/* Initialize middlewares */
+// Initialize middlewares
 const addMiddlewares = () => {
   window.analytics.addSourceMiddleware(userTraits)
   window.analytics.addSourceMiddleware(defaultContextProperties)
   window.analytics.addSourceMiddleware(userScreenInfo)
   window.analytics.addSourceMiddleware(pageReferrer)
 }
 
-/* Initialize Segment on Client */
 if (isClient && window.analytics) {
+  // Initialize Google Analtyics if needed
+  const googleAnalyticsMeasurementId = getConfig('googleAnalyticsMeasurementId')
+
+  if (googleAnalyticsMeasurementId) {
+    window.dataLayer = window.dataLayer || []
+    window.gtag =
+      window.gtag ||
+      function gtag() {
+        window.dataLayer.push(arguments)
+      }
+
+    loadGoogleAnalytics()
+  }
+
   window.analytics.ready(checkAnonymousId)
   window.analytics.addSourceMiddleware ? addMiddlewares() : window.analytics.ready(addMiddlewares)
 }

diff --git a/packages/sui-segment-wrapper/src/repositories/googleRepository.js b/packages/sui-segment-wrapper/src/repositories/googleRepository.js
@@ -10,17 +10,19 @@ const cachedData = {
   [FIELDS.sessionId]: null
 }
 
-const loadScript = src =>
+const loadScript = async src =>
   new Promise(function (resolve, reject) {
-    const s = document.createElement('script')
-    s.src = src
-    s.onload = resolve
-    s.onerror = reject
-    document.head.appendChild(s)
+    const script = document.createElement('script')
+
+    script.src = src
+    script.onload = resolve
+    script.onerror = reject
+    document.head.appendChild(script)
   })
 
-export const loadGoogleAnalytics = () => {
+export const loadGoogleAnalytics = async () => {
   const googleAnalyticsMeasurementId = getConfig('googleAnalyticsMeasurementId')
+
   // Check we have the needed config to load the script
   if (!googleAnalyticsMeasurementId) return Promise.resolve(false)
   // Create the `gtag` script
@@ -29,7 +31,7 @@ export const loadGoogleAnalytics = () => {
   return loadScript(gtagScript)
 }
 
-const getGoogleField = field => {
+const getGoogleField = async field => {
   const googleAnalyticsMeasurementId = getConfig('googleAnalyticsMeasurementId')
 
   // If `googleAnalyticsMeasurementId` is not present, don't load anything

diff --git a/packages/sui-segment-wrapper/test/segmentWrapperSpec.js b/packages/sui-segment-wrapper/test/segmentWrapperSpec.js
@@ -615,7 +615,6 @@ describe('Segment Wrapper', function () {
       }
       const {traits} = spy.getCall(0).firstArg.obj.context
 
-      console.log(context, expectation)
       expect(context).to.deep.equal(expectation)
       expect(traits).to.deep.equal({
         anonymousId: 'fakeAnonymousId',