Add GDPR/consent support to amp-slikeplayer (#40500)

SlikeTech · claude · web-flow · commit 4eeab9b5e1a1 · 2026-04-14T21:25:49.000-07:00
* Add GDPR/consent support to amp-slikeplayer

Integrate AMP consent framework so the Slike player iframe can request
and receive consent data via postMessage, enabling cleo-player to handle
personalisation and analytics decisions based on user consent state.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;

* Add unit tests for consent data forwarding in amp-slikeplayer

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;

---------

Co-authored-by: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/examples/slikeplayer.amp.html b/examples/slikeplayer.amp.html
@@ -74,6 +74,16 @@
       custom-element="amp-slikeplayer"
       src="https://cdn.ampproject.org/v0/amp-slikeplayer-0.1.js"
     ></script>
+    <script
+      async
+      custom-element="amp-consent"
+      src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"
+    ></script>
+    <script
+      async
+      custom-element="amp-geo"
+      src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"
+    ></script>
 
     <style amp-custom>
       body {
@@ -249,6 +259,67 @@
         font-weight: 600;
       }
 
+      .consent-ui {
+        background: #333;
+        color: white;
+        padding: 16px 24px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 12px;
+        font-size: 0.95rem;
+      }
+
+      .consent-ui p {
+        margin: 0;
+        flex: 1;
+        min-width: 200px;
+      }
+
+      .consent-ui .btn-group {
+        display: flex;
+        gap: 8px;
+      }
+
+      .consent-ui button {
+        border: none;
+        border-radius: 4px;
+        padding: 8px 20px;
+        font-size: 0.9rem;
+        cursor: pointer;
+        font-weight: 600;
+      }
+
+      .consent-ui .btn-accept {
+        background: #4facfe;
+        color: white;
+      }
+
+      .consent-ui .btn-reject {
+        background: #666;
+        color: white;
+      }
+
+      .post-consent-ui {
+        background: #e8f5e9;
+        padding: 8px 16px;
+        text-align: center;
+        font-size: 0.85rem;
+        color: #333;
+      }
+
+      .post-consent-ui button {
+        border: none;
+        background: #667eea;
+        color: white;
+        border-radius: 4px;
+        padding: 4px 12px;
+        margin-left: 8px;
+        cursor: pointer;
+        font-size: 0.85rem;
+      }
+
       @media (max-width: 768px) {
         .header h1 {
           font-size: 2rem;
@@ -267,6 +338,50 @@
   </head>
 
   <body>
+    <!-- Geo detection for consent -->
+    <amp-geo layout="nodisplay">
+      <script type="application/json">
+        {
+          "ISOCountryGroups": {
+            "eea": ["at", "be", "bg", "hr", "cy", "cz", "dk", "ee", "fi", "fr",
+                     "de", "gr", "hu", "ie", "it", "lv", "lt", "lu", "mt", "nl",
+                     "pl", "pt", "ro", "sk", "si", "es", "se", "gb", "is", "li",
+                     "no", "ch"]
+          }
+        }
+      </script>
+    </amp-geo>
+
+    <!-- Consent management -->
+    <amp-consent id="slike-consent" layout="nodisplay">
+      <script type="application/json">
+        {
+          "consentInstanceId": "slike-player-consent",
+          "consentRequired": true,
+          "promptUI": "consent-prompt",
+          "postPromptUI": "post-consent-prompt"
+        }
+      </script>
+      <div id="consent-prompt" class="consent-ui">
+        <p>
+          We use cookies and data to deliver and improve our services. By
+          accepting, you agree to personalized content and ads.
+        </p>
+        <div class="btn-group">
+          <button class="btn-accept" on="tap:slike-consent.accept">
+            Accept
+          </button>
+          <button class="btn-reject" on="tap:slike-consent.reject">
+            Reject
+          </button>
+        </div>
+      </div>
+      <div id="post-consent-prompt" class="post-consent-ui">
+        Consent preference saved.
+        <button on="tap:slike-consent.prompt">Manage</button>
+      </div>
+    </amp-consent>
+
     <!-- Header Section -->
     <div class="header">
       <div class="container">
diff --git a/extensions/amp-slikeplayer/0.1/amp-slikeplayer.js b/extensions/amp-slikeplayer/0.1/amp-slikeplayer.js
@@ -10,6 +10,7 @@ import {installVideoManagerForDoc} from '#service/video-manager-impl';
 import {getData, listen} from '#utils/event-helper';
 import {userAssert} from '#utils/log';
 
+import {getConsentDataToForward} from '../../../src/consent';
 import {disableScrollingOnIframe} from '../../../src/iframe-helper';
 import {
   addUnsafeAllowAutoplay,
@@ -266,12 +267,20 @@ export class AmpSlikeplayer extends AMP.BaseElement {
     }
 
     const data = objOrParseJson(messageData);
+
+    // Handle consent request from iframe (sent as raw object with type field)
+    if (data['type'] === 'send-consent-data') {
+      this.sendConsentData_();
+      return;
+    }
+
     const event = data['event'];
     const detail = data['detail'];
     if (event === 'ready') {
       detail && this.onReadyOnce_(detail);
       return;
     }
+
     const {element} = this;
     if (redispatch(element, event, CleoEvent)) {
       return;
@@ -338,6 +347,29 @@ export class AmpSlikeplayer extends AMP.BaseElement {
     this.postMessage_('handleViewport', inViewport);
   }
 
+  /**
+   * Fetches consent data from AMP consent service
+   * and forwards it to the iframe via postMessage.
+   * @private
+   */
+  sendConsentData_() {
+    getConsentDataToForward(this.element, this.getConsentPolicy()).then(
+      (consents) => {
+        if (!this.iframe_ || !this.iframe_.contentWindow) {
+          return;
+        }
+        this.iframe_.contentWindow./*OK*/ postMessage(
+          {
+            'sentinel': 'amp',
+            'type': 'consent-data',
+            ...consents,
+          },
+          this.targetOrigin_
+        );
+      }
+    );
+  }
+
   /**
    * @override
    */
diff --git a/extensions/amp-slikeplayer/0.1/test/test-amp-slikeplayer.js b/extensions/amp-slikeplayer/0.1/test/test-amp-slikeplayer.js
@@ -2,6 +2,7 @@ import '../amp-slikeplayer';
 
 import {listenOncePromise} from '#utils/event-helper';
 
+import * as consent from '../../../../src/consent';
 import {VideoEvents_Enum} from '../../../../src/video-interface';
 
 describes.realWin(
@@ -212,5 +213,53 @@ describes.realWin(
       // Subsequent layout should be possible
       await el.layoutCallback();
     });
+
+    it('calls sendConsentData_ on send-consent-data message', async () => {
+      const consentData = {
+        consentPolicyState: 1,
+        consentString: 'abc123',
+        consentMetadata: {gdprApplies: true, purposeOne: true},
+        consentPolicySharedData: null,
+      };
+      env.sandbox
+        .stub(consent, 'getConsentDataToForward')
+        .resolves(consentData);
+
+      const {iframe, impl} = await buildPlayer();
+      const sendSpy = env.sandbox.spy(impl, 'sendConsentData_');
+
+      // Simulate consent request from iframe (raw object, not JSON)
+      impl.onMessage_({
+        source: iframe.contentWindow,
+        data: {type: 'send-consent-data', sentinel: 'amp'},
+      });
+
+      expect(sendSpy).to.have.been.calledOnce;
+
+      // Wait for the consent promise to resolve
+      await new Promise((r) => setTimeout(r, 0));
+
+      expect(consent.getConsentDataToForward).to.have.been.calledOnce;
+    });
+
+    it('does not send consent data if iframe is gone', async () => {
+      const consentData = {consentPolicyState: 2};
+      env.sandbox
+        .stub(consent, 'getConsentDataToForward')
+        .resolves(consentData);
+
+      const {iframe, impl} = await buildPlayer();
+
+      // Destroy iframe before consent resolves
+      impl.iframe_ = null;
+
+      impl.onMessage_({
+        source: iframe.contentWindow,
+        data: {type: 'send-consent-data', sentinel: 'amp'},
+      });
+
+      await new Promise((r) => setTimeout(r, 0));
+      // No error thrown — silently skipped
+    });
   }
 );
