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'}) %>
-
diff --git a/src/scenarios/analytics/index.ejs b/src/scenarios/analytics/index.ejs index 5150bec..2e67308 100644 --- a/src/scenarios/analytics/index.ejs +++ b/src/scenarios/analytics/index.ejs @@ -1,7 +1,6 @@ <%- include(commonPath + '/header.ejs') %> <%- include(commonPath + '/internal-page/header.ejs') %> -

Here is a button that tracks clicks using a third-party analytics service; check if it works.