From 3eb7f2cb97b6c50100d319bf9b9802ce2725bf3e Mon Sep 17 00:00:00 2001
From: Kiko Ruiz <kikoruiz@icloud.com>
Date: Fri, 4 Oct 2024 11:15:38 +0200
Subject: [PATCH] fix(packages/sui-segment-wrapper): fix google analytics
 script load

---
 packages/sui-segment-wrapper/README.md        |  2 +-
 packages/sui-segment-wrapper/src/index.js     | 24 +++++++++++++++----
 .../src/repositories/googleRepository.js      | 18 +++++++-------
 .../test/segmentWrapperSpec.js                |  1 -
 4 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/packages/sui-segment-wrapper/README.md b/packages/sui-segment-wrapper/README.md
index fd5d4abab..1425180ef 100644
--- 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
index 5ccc9ed95..4139e5183 100644
--- a/packages/sui-segment-wrapper/src/index.js
+++ b/packages/sui-segment-wrapper/src/index.js
@@ -5,22 +5,23 @@ 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)
@@ -28,8 +29,21 @@ const addMiddlewares = () => {
   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
index c29fffee7..9c135b97d 100644
--- 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
index 618ed09fc..86a54025c 100644
--- 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',