Skip to content

Add GDPR/consent support to amp-slikeplayer #40499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
SlikeTech wants to merge 1 commit into from
+147 −0
Closed

Add GDPR/consent support to amp-slikeplayer #40499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 115 additions & 0 deletions examples/slikeplayer.amp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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">
Expand Down
32 changes: 32 additions & 0 deletions extensions/amp-slikeplayer/0.1/amp-slikeplayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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
*/
Expand Down
Loading