fix GTM docs

Author: marc-thomas

src/docs-app/data/google-tag-manager/08-advanced-iframe-purchase-tracking-via-postmessage.md

@@ -1,6 +1,5 @@
 # Advanced & Preferred: iFrame Purchase Tracking via postMessage
 
-
 Tracking conversions and user activity accurately within an iFrame (like the Showpass embedded purchase widget) is a significant challenge due to browser privacy measures that increasingly block third-party cookies and tracking mechanisms.
 
 To overcome this, Showpass advocates for a more robust method: **iFrame tracking using the postMessage API**. This technique allows secure communication between the Showpass iFrame (child) and your website (parent page), enabling the iFrame to send event data directly to your GTM container on the parent page.
@@ -25,6 +24,7 @@ For more context on iFrame tracking challenges and solutions:
 This setup involves two Google Tag Manager containers:
 
 1. **Child GTM Container (for the Showpass iFrame):**
+
    - Create a new **empty GTM Container ID**
    - This container is specifically for the Showpass widget environment
    - Its role is to capture ecommerce events within the iFrame and `postMessage` them to the parent window (your website)
@@ -77,17 +77,17 @@ This tag will send data from the iFrame's Data Layer to your parent website.
 </script>
 ```
 
-   - **Crucial:**
-     - Ensure you have enabled the **Support document.write** checkbox (under Advanced Settings) if required
-     - **Replace `GTM_CHILD_ID`** in the script with your actual Child GTM Container ID (e.g., `GTM-XXXXXXX`)
-     - The script above assumes your child GTM Data Layer is named `dataLayer_GTM-XXXXXXX` (where `GTM-XXXXXXX` is your Child Container ID). GTM creates this namespace automatically to avoid conflicts
+- **Crucial:**
+  - Ensure you have enabled the **Support document.write** checkbox (under Advanced Settings) if required
+  - **Replace `GTM_CHILD_ID`** in the script with your actual Child GTM Container ID (e.g., `GTM-XXXXXXX`)
+  - The script above assumes your child GTM Data Layer is named `dataLayer_GTM-XXXXXXX` (where `GTM-XXXXXXX` is your Child Container ID). GTM creates this namespace automatically to avoid conflicts
 
 4. **Triggering:**
    - Click **Choose a trigger to make this tag fire...**
    - Select a trigger like **Custom Event**
    - **Event name:** Use regex matching to fire on all Showpass ecommerce events:
      ```text
-     view_item|add_to_cart|remove_from_cart|begin_checkout|purchase
+     view_item|add_to_cart|remove_from_cart|begin_checkout|purchase|ecommerce_clear
      ```
    - Check **Use regex matching**
 5. Click **Save**
@@ -128,45 +128,58 @@ This tag listens for messages from the Showpass iFrame and processes them.
    - Paste the following script:
 
 ```html
-<script>
+<script nonce="{{nonce}}">
+  // Assuming you've set up a 'nonce' variable as per Section 5
   (function () {
-    // Prevent adding multiple listeners
-    if (window.showpassPostMessageListenerAdded) {
-      return;
-    }
-    window.showpassPostMessageListenerAdded = true;
-
-    window.addEventListener(
-      "message",
-      function (event) {
+    try {
+      var receiveMessage = function (event) {
         try {
-          // IMPORTANT: For production, verify origin for security
-          // Example: if (event.origin !== 'https://showpass.com') return;
-
-          var data = event.data;
-
-          // Ensure the received message is an array (child GTM dataLayer)
-          if (Array.isArray(data) && data.length > 0) {
-            // Process each item in the received dataLayer array
-            data.forEach(function (item) {
-              if (item && typeof item === "object" && item.event) {
-                // Push the ecommerce event to the parent's dataLayer
-                window.dataLayer = window.dataLayer || [];
-                window.dataLayer.push(item);
+          // Optional: Add origin check for security if Showpass iFrame origin is fixed and known
+          // if (event.origin !== "https://widgets.showpass.com") return;
+
+          if (
+            event &&
+            typeof event.data != "undefined" &&
+            Array.isArray(event.data)
+          ) {
+            for (var i = 0; i < event.data.length; i++) {
+              if (event.data[i] && typeof event.data[i].event != "undefined") {
+                // Push specific, expected ecommerce events to the parent dataLayer
+                // You can expand this list based on what you want to track from the iFrame
+                if (
+                  event.data[i].event == "view_item" ||
+                  event.data[i].event == "add_to_cart" ||
+                  event.data[i].event == "remove_from_cart" ||
+                  event.data[i].event == "begin_checkout" ||
+                  event.data[i].event == "purchase" ||
+                  event.data[i].event == "ecommerce_clear"
+                ) {
+                  // Create a new object to avoid potential reference issues
+                  var eventToPush = JSON.parse(JSON.stringify(event.data[i]));
+                  dataLayer.push(eventToPush);
+                }
               }
-            });
+            }
           }
         } catch (err) {
-          console.error("Showpass postMessage Listener Error:", err);
+          // console.error("Parent GTM postMessage Listener Error (inner): ", err);
         }
-      },
-      false
-    );
+      };
+
+      if (typeof window.addEventListener !== "undefined") {
+        window.addEventListener("message", receiveMessage, false);
+      } else if (typeof window.attachEvent !== "undefined") {
+        // For older IE
+        window.attachEvent("onmessage", receiveMessage);
+      }
+    } catch (err) {
+      // console.error("Parent GTM postMessage Listener Error (outer): ", err);
+    }
   })();
 </script>
 ```
 
-   > **Security Note:** In production, you should verify `event.origin` to ensure messages are only accepted from trusted sources (e.g., `https://showpass.com` or your own domain).
+> **Security Note:** In production, you should verify `event.origin` to ensure messages are only accepted from trusted sources (e.g., `https://showpass.com` or your own domain).
 
 4. **Triggering:**
    - Click **Choose a trigger to make this tag fire...**

src/docs-app/data/google-tag-manager/09-advanced-tracking-widget-and-direct-purchases.md

@@ -1,6 +1,5 @@
 # Advanced: Differentiating Widget (iFrame) vs. Direct Showpass.com Event Tracking
 
-
 In some advanced scenarios, you might want to differentiate GTM tag firing behavior based on whether an event originates from within the embedded Showpass widget (iFrame on your site) or from a direct interaction on `showpass.com` (if your GTM container is also deployed there, or if Showpass sends server-side events that populate your website's GTM).
 
 This allows for more granular control, such as:
@@ -47,90 +46,33 @@ function() {
 
 Now, use the `{{Custom JS - Is iFrame}}` variable as a condition in your relevant GTM triggers.
 
-### Scenario A: Triggers for postMessage Data (from Showpass Widget)
-
-These triggers should **only** fire when the event data originates from the iFrame via `postMessage`.
-
-- **If your postMessage listener tag** (from Section 8B) pushes distinct events: You might not need to modify the triggers for your actual ecommerce tags (like GA4 ecommerce) if those tags are already listening for the specific events pushed by your listener (e.g., `iframe_add_to_cart`)
-- **If your postMessage listener tag pushes standard event names** (e.g., `add_to_cart`) that could also occur directly on your site or `showpass.com`:
-  You need to ensure the triggers for tags that should **only** process iFrame `postMessage` data have an added condition
+Rename your existing Custom ecommerce trigger for processing direct purchases **Showpass - Ecommerce events - direct purchase**
 
-1. Edit the relevant trigger (e.g., the one that fires your GA4 ecommerce tag for events received via `postMessage`)
-2. Under "This trigger fires on," add a condition:
-   - `{{Custom JS - Is iFrame}}` **equals** `false`
+**Event name**
 
-> **Note:** This assumes your listener for postMessage events is on the parent page, and the data is pushed to the parent's dataLayer. The 'Is iFrame' variable on the parent page will be `false`. The logic here depends on where the final decision to fire a tag is made based on the source of the data.
-
-### Scenario B: Triggers for Direct Showpass.com Events
+```
+view_item|add_to_cart|remove_from_cart|begin_checkout|purchase|ecommerce_clear
+```
 
-If you want tags to fire **only** when events occur directly on `showpass.com` (not from the widget via `postMessage`):
+Check off use regex matching
 
-1. Edit the relevant trigger
-2. Under "This trigger fires on," add a condition:
-   - `{{Page Hostname}}` **equals** `showpass.com` (or contains `showpass.com`)
-   - **OR** add a custom Data Layer variable that indicates the source
+**This trigger fires on** select **Some custom events**
 
-Alternatively, you can add a custom flag to the Data Layer when pushing events from different sources to make differentiation easier.
+Fire this trigger when an Event occurs and all of these conditions are true
 
----
+`{{Custom JS - Is iFrame}}` equals **false**
 
-## Step 3: Alternative Approach - Add Source Identifier to Data Layer
-
-A more explicit approach is to modify how events are pushed to the Data Layer to include a **source** identifier.
-
-### In the Parent postMessage Listener Script
-
-Modify the postMessage listener tag (from Section 8B1) to add a source flag:
-
-```html
-<script>
-  (function () {
-    if (window.showpassPostMessageListenerAdded) {
-      return;
-    }
-    window.showpassPostMessageListenerAdded = true;
-
-    window.addEventListener(
-      "message",
-      function (event) {
-        try {
-          var data = event.data;
-
-          if (Array.isArray(data) && data.length > 0) {
-            data.forEach(function (item) {
-              if (item && typeof item === "object" && item.event) {
-                // Add a source identifier
-                item.event_source = "iframe_widget";
-
-                window.dataLayer = window.dataLayer || [];
-                window.dataLayer.push(item);
-              }
-            });
-          }
-        } catch (err) {
-          console.error("Showpass postMessage Listener Error:", err);
-        }
-      },
-      false
-    );
-  })();
-</script>
-```
+Attach this trigger to your GA4 ecommerce tag in the Child GTM Container
 
-### Create a GTM Variable for Event Source
+Create a new trigger for widget purchases named **Showpass - Ecommerce events - widget purchase** with the same ecommerce events
 
-1. In GTM, go to **Variables** and click **New**
-2. **Name:** `DLV - event_source`
-3. **Variable Type:** **Data Layer Variable**
-4. **Data Layer Variable Name:** `event_source`
-5. Click **Save**
+**This trigger fires on** select **Some custom events**
 
-### Use in Triggers
+Fire this trigger when an Event occurs and all of these conditions are true
 
-Now you can add conditions to your triggers:
+`{{Custom JS - Is iFrame}}` equals **true**
 
-- **For widget events only:** `{{DLV - event_source}}` **equals** `iframe_widget`
-- **For direct events only:** `{{DLV - event_source}}` **does not equal** `iframe_widget` (or is undefined)
+Attach this trigger to the **`Custom HTML - Post Message Ecommerce Data to Parent`** tag
 
 ---