diff --git a/app.js b/app.js
index b322eeb..2e90687 100644
--- a/app.js
+++ b/app.js
@@ -72,9 +72,10 @@ const scenarios = [
'personalization',
'personalization-localstorage',
'gsi',
- 'social-media',
- 'social-media-comments',
+ 'facebook-like',
+ 'facebook-comments',
'disqus-comments',
+ 'spotify-embed',
'google-recaptcha',
];
scenarios.forEach(scenario => {
diff --git a/src/common/index.ejs b/src/common/index.ejs
index db81944..7ce52b9 100644
--- a/src/common/index.ejs
+++ b/src/common/index.ejs
@@ -18,13 +18,14 @@
<%= renderCard('Single Sign-On', '🔐', '/single-sign-on') %>
<%= renderCard('Payment Gateway', '💳', '/payment-gateway') %>
<%= renderCard('Legacy GSI', '🔐', '/gsi') %>
- <%= renderCard('Facebook Like', '👍', '/social-media') %>
- <%= renderCard('Facebook Comments', '💬', '/social-media-comments') %>
+ <%= renderCard('Facebook Like', '👍', '/facebook-like') %>
+ <%= renderCard('Facebook Comments', '💬', '/facebook-comments') %>
<%= renderCard('Disqus Comments', '✉️', '/disqus-comments') %>
<%= renderCard('reCAPTCHA', '🤖', '/google-recaptcha') %>
+ <%= renderCard('Spotify embed', '🔊', '/spotify-embed') %>
<%= renderCard('CHIPS', '🍪', '/chips') %>
<%= renderCard('Storage Access API', '🗃️', '/storage-access-api') %>
-<%- include(commonPath + '/footer.ejs') %>
\ No newline at end of file
+<%- include(commonPath + '/footer.ejs') %>
diff --git a/src/demos/chips/analytics-first-party.ejs b/src/demos/chips/analytics-first-party.ejs
index 874e3fa..9fa7065 100644
--- a/src/demos/chips/analytics-first-party.ejs
+++ b/src/demos/chips/analytics-first-party.ejs
@@ -1,13 +1,12 @@
<%- include(commonPath + '/header.ejs') %>
<%- include(commonPath + '/internal-page/header.ejs') %>
-
Track user interactions using the analytics code provided below:
diff --git a/src/demos/chips/analytics-third-party.ejs b/src/demos/chips/analytics-third-party.ejs
index 947b919..71c698f 100644
--- a/src/demos/chips/analytics-third-party.ejs
+++ b/src/demos/chips/analytics-third-party.ejs
@@ -1,14 +1,12 @@
<%- include(commonPath + '/header.ejs') %>
<%- include(commonPath + '/internal-page/header.ejs') %>
- Track user interactions using the analytics code provided below:
-
diff --git a/src/demos/chips/analytics.ejs b/src/demos/chips/analytics.ejs
index c22d777..c2f6512 100644
--- a/src/demos/chips/analytics.ejs
+++ b/src/demos/chips/analytics.ejs
@@ -22,7 +22,7 @@
} ).then( function ( data ) {
var statusDiv = document.getElementById( 'status' );
if ( statusDiv ) {
- statusDiv.textContent = 'Interaction tracked for ID : ' + data;
+ statusDiv.textContent = 'Interaction tracked!';
statusDiv.style.color = 'green';
}
} ).catch( function ( error ) {
diff --git a/src/demos/chips/routes.js b/src/demos/chips/routes.js
index dc64bde..6d7cabd 100644
--- a/src/demos/chips/routes.js
+++ b/src/demos/chips/routes.js
@@ -5,19 +5,15 @@ const uuid = require( 'uuid' );
router.get('/', (req, res) => {
// Send the default page
- res.render(path.join(__dirname,'index'), {
+ res.render(path.join(__dirname,'analytics-third-party'), {
title: 'CHIPS'
});
});
-router.get('/analytics-first-party', (req, res) => {
- res.render(path.join(__dirname,'analytics-first-party'), {
- title: 'First Party Cookie Experiments'
- });
-});
+
router.get('/analytics-third-party', (req, res) => {
// Send the default page
res.render(path.join(__dirname,'analytics-third-party'), {
- title: 'Third Party Cookie Experiments'
+ title: 'CHIPS'
});
});
// Serve the analytics.js file to the site
@@ -39,16 +35,16 @@ router.get( '/analytics.js', ( req, res ) => {
}
- let analyticsIdCHIPS = req.cookies['__Host-analyticsId-chips'];
+ let analyticsIdCHIPS = req.cookies['analyticsId-chips'];
if ( !analyticsIdCHIPS ) {
analyticsIdCHIPS = uuid.v4();
let expire = 30 * 24 * 60 * 60 * 1000;
- res.append(
+ /*res.append(
'Set-Cookie', '__Host-analyticsId-chips=' + analyticsIdCHIPS + '; Max-Age=' + expire + '; HttpOnly; Secure; Path=/; SameSite=None; Partitioned;'
- );
+ );*/
res.append(
- 'Set-Cookie', 'analyticsId-chips-test=' + analyticsIdCHIPS + ';Domain='+res.locals.domainC+'; Max-Age=' + expire + '; HttpOnly; Secure; Path=/; SameSite=None; Partitioned;'
+ 'Set-Cookie', 'analyticsId-chips=' + analyticsIdCHIPS + ';Domain='+res.locals.domainC+'; Max-Age=' + expire + '; HttpOnly; Secure; Path=/; SameSite=None; Partitioned;'
);
}
@@ -73,7 +69,7 @@ router.post( '/track', ( req, res ) => {
router.post( '/trackCHIPS', ( req, res ) => {
const {interaction} = req.body;
- const analyticsIdCHIPS = req.cookies['__Host-analyticsId-chips'];
+ const analyticsIdCHIPS = req.cookies['analyticsId-chips'];
if ( interaction && analyticsIdCHIPS ) {
diff --git a/src/demos/storage-access-api/personalization.ejs b/src/demos/storage-access-api/personalization.ejs
index 340ddb4..29c6d53 100644
--- a/src/demos/storage-access-api/personalization.ejs
+++ b/src/demos/storage-access-api/personalization.ejs
@@ -1,96 +1,126 @@
-document.addEventListener('DOMContentLoaded', () => {
- const baseURL = '<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/personalization';
- const pageContainer = document.getElementById('theme-container');
- const themeSwitcher = document.getElementById('dark-mode-switch');
- const errorMessages = document.getElementById('status-message');
- const loadButton = document.getElementById('load-button');
- const toggleContainer = document.querySelector('.dark-mode-toggle');
- const isIframe = window.self !== window.top;
- const containerClass = isIframe ? 'h-screen flex items-center justify-center' : 'flex items-center justify-center';
- let hasStorageAccess = false;
-
- document.hasStorageAccess().then(result => {
- hasStorageAccess = result;
- if ( hasStorageAccess ) {
- updateUserPreference();
- }
- })
-
- async function updateUserPreference() {
- if ( hasStorageAccess ) {
- fetchAndApplyTheme();
- } else {
- try {
- await document.requestStorageAccess();
- toggleContainer.classList.remove('hidden');
- loadButton.classList.add('hidden');
- fetchAndApplyTheme();
- } catch (error) {
- errorMessages.textContent = error?.message;
- }
- }
+(() => {
+ let baseURL,
+ pageContainer,
+ themeSwitcher,
+ errorMessages,
+ loadButton,
+ toggleContainer,
+ isIframe,
+ containerClass,
+ hasStorageAccess;
+
+ async function fetchAndApplyTheme() {
+ try {
+ const response = await fetch(`${baseURL}/get-personalization`, {
+ method: 'GET',
+ credentials: 'include',
+ });
+
+ if (!response.ok) {
+ throw new Error('Network response was not ok');
+ errorMessages.textContent = `Network response was not ok ${response.status} - ${response.statusText}`;
+ }
+
+ const data = await response.json();
+ pageContainer.className = `${containerClass} ${data.theme}`;
+ if (data.theme === 'dark') {
+ themeSwitcher.checked = true;
+ }
+ } catch (error) {
+ errorMessages.textContent = error?.message;
+ }
+ }
+
+ async function updateUserPreference() {
+ errorMessages.textContent = '';
+ if (hasStorageAccess) {
+ fetchAndApplyTheme();
+ return;
+ }
+
+ try {
+ await document.requestStorageAccess();
+ hasStorageAccess = await document.hasStorageAccess();
+
+ if (!hasStorageAccess) {
+ errorMessages.textContent = 'User denied storage access';
+ return;
+ }
+
+ toggleContainer.classList.remove('hidden');
+ loadButton.classList.add('hidden');
+
+ fetchAndApplyTheme();
+ } catch (error) {
+ errorMessages.textContent = error?.message;
}
+ }
+
+ async function fetchSetPersonalization() {
+ try {
+ const response = await fetch(`${baseURL}/set-personalization`, {
+ method: 'POST',
+ credentials: 'include',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ theme: themeSwitcher?.checked ? 'dark' : 'light',
+ }),
+ });
+ const data = await response.json();
- function fetchAndApplyTheme() {
- fetch(`${baseURL}/get-personalization`, {
- method: 'GET',
- credentials: 'include'
- })
- .then(response => {
- if (!response.ok) {
- throw new Error('Network response was not ok');
- errorMessages.textContent = `Network response was not ok ${response.status} - ${response.statusText}`;
- }
- return response.json();
- })
- .then(data => {
- const theme = data.theme;
- pageContainer.className = `${containerClass} ${data.theme}`
- if (theme === 'dark') {
- themeSwitcher.checked = true;
- }
- })
- .catch(error => {
- errorMessages.textContent = error?.message;
- });
+ pageContainer.className = `${containerClass} ${data.theme}`;
+ } catch (error) {
+ errorMessages.textContent = error?.message;
}
+ }
+
+ async function toggleTheme() {
+ errorMessages.textContent = '';
- function fetchSetPersonalization() {
- fetch( `${baseURL}/set-personalization`, {
- method: 'POST',
- credentials: 'include',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ theme: themeSwitcher?.checked ? 'dark' : 'light' })
- })
- .then(response => response.json())
- .then(data => {
- pageContainer.className = `${containerClass} ${data.theme}`;
- });
+ if (hasStorageAccess) {
+ fetchSetPersonalization();
+ return;
}
- async function toggleTheme() {
- hasStorageAccess = await document.hasStorageAccess();
-
- if( hasStorageAccess ) {
- fetchSetPersonalization();
- } else {
- try {
- await document.requestStorageAccess();
- if ( await document.hasStorageAccess() ) {
- fetchSetPersonalization();
- } else {
- errorMessages.textContent = 'User denied storage access';
- }
- } catch (error) {
- errorMessages.textContent = `The request to storage access API was denied because the user never interacted with the top-level site context or the permission wasn't grant by the user`;
- }
- }
+ try {
+ await document.requestStorageAccess();
+ hasStorageAccess = await document.hasStorageAccess();
+
+ if (!hasStorageAccess) {
+ errorMessages.textContent = 'User denied storage access';
+ return;
+ }
+
+ fetchSetPersonalization();
+ } catch (error) {
+ errorMessages.textContent = error?.message;
}
-
+ }
+
+ // Main start point
+ document.addEventListener('DOMContentLoaded', async () => {
+ baseURL =
+ '<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/personalization';
+ pageContainer = document.getElementById('theme-container');
+ themeSwitcher = document.getElementById('dark-mode-switch');
+ errorMessages = document.getElementById('status-message');
+ loadButton = document.getElementById('load-button');
+ toggleContainer = document.querySelector('.dark-mode-toggle');
+ isIframe = window.self !== window.top;
+ containerClass = isIframe
+ ? 'h-screen flex items-center justify-center'
+ : 'flex items-center justify-center';
+ let hasStorageAccess = await document.hasStorageAccess();
+
+ if (hasStorageAccess) {
+ updateUserPreference();
+ }
+
window.toggleTheme = toggleTheme;
if (isIframe && !hasStorageAccess) {
- toggleContainer.classList.add('hidden');
- loadButton.classList.remove('hidden');
- loadButton.addEventListener('click', updateUserPreference);
+ toggleContainer.classList.add('hidden');
+ loadButton.classList.remove('hidden');
+ loadButton.addEventListener('click', updateUserPreference);
}
-});
+ });
+})();
diff --git a/src/demos/storage-access-api/theme-selection.ejs b/src/demos/storage-access-api/theme-selection.ejs
index e4f024f..c3a9cc0 100644
--- a/src/demos/storage-access-api/theme-selection.ejs
+++ b/src/demos/storage-access-api/theme-selection.ejs
@@ -2,7 +2,7 @@
<%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %>
-