From d742e36250f16665a854a12bbbcbb53a2e598cd0 Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Thu, 20 Jul 2023 18:04:04 +0100 Subject: [PATCH] split scripts into dedicated modules and component --- src/components/AdSlot/AdScripts.svelte | 34 +++ src/components/AdSlot/AdSlot.stories.svelte | 2 + src/components/AdSlot/AdSlot.svelte | 231 +----------------- .../AdSlot/scripts/bootstrapLoad.ts | 102 ++++++++ .../AdSlot/scripts/getParameterByName.ts | 12 + src/components/AdSlot/scripts/ias.ts | 32 +++ src/components/AdSlot/scripts/trackTiming.ts | 9 + .../AdSlot/stories/docs/component.md | 9 +- src/index.js | 2 + yarn.lock | 5 - 10 files changed, 209 insertions(+), 229 deletions(-) create mode 100644 src/components/AdSlot/AdScripts.svelte create mode 100644 src/components/AdSlot/scripts/bootstrapLoad.ts create mode 100644 src/components/AdSlot/scripts/getParameterByName.ts create mode 100644 src/components/AdSlot/scripts/ias.ts create mode 100644 src/components/AdSlot/scripts/trackTiming.ts diff --git a/src/components/AdSlot/AdScripts.svelte b/src/components/AdSlot/AdScripts.svelte new file mode 100644 index 00000000..3de6f9b9 --- /dev/null +++ b/src/components/AdSlot/AdScripts.svelte @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/components/AdSlot/AdSlot.stories.svelte b/src/components/AdSlot/AdSlot.stories.svelte index 84fa567e..ee8bc9aa 100644 --- a/src/components/AdSlot/AdSlot.stories.svelte +++ b/src/components/AdSlot/AdSlot.stories.svelte @@ -5,6 +5,7 @@ // @ts-ignore import componentDocs from './stories/docs/component.md?raw'; + import AdScripts from './AdScripts.svelte'; import AdSlot from './AdSlot.svelte'; import { withComponentDocs } from '$docs/utils/withParams.js'; @@ -33,6 +34,7 @@ diff --git a/src/components/AdSlot/AdSlot.svelte b/src/components/AdSlot/AdSlot.svelte index 75aa8a3f..bd2bbe2b 100644 --- a/src/components/AdSlot/AdSlot.svelte +++ b/src/components/AdSlot/AdSlot.svelte @@ -18,231 +18,20 @@ /** Add a class to target with SCSS. */ export let cls: string = ''; - console.log('#GJ Adding Ad to the queue'); - (window as any).graphicsAdQueue = (window as any).graphicsAdQueue || []; - (window as any).graphicsAdQueue.push({ - placementName, - slotId: placementName, - }); - console.log('#GJ Ads were added'); + import { onMount } from 'svelte'; import Block from '../Block/Block.svelte'; + + onMount(() => { + (window).graphicsAdQueue = (window).graphicsAdQueue || []; + (window).graphicsAdQueue.push({ + placementName, + slotId: placementName, + }); + }); - - - - - - - - - - - - - - - - - - - - - - - - - - +
diff --git a/src/components/AdSlot/scripts/bootstrapLoad.ts b/src/components/AdSlot/scripts/bootstrapLoad.ts new file mode 100644 index 00000000..5116977c --- /dev/null +++ b/src/components/AdSlot/scripts/bootstrapLoad.ts @@ -0,0 +1,102 @@ +import trackTiming from './trackTiming'; +import getParameterByName from './getParameterByName'; +import Ias from './ias'; + +const ONETRUST_LOGS = 'ot_logs'; +const ONETRUST_GEOLOCATION_MOCK = 'ot_geolocation_mock'; +const ONETRUST_SCRIPT_ID = '38cb75bd-fbe1-4ac8-b4af-e531ab368caf-test'; + +export default () => { + const freestar = (window).freestar || {}; + freestar.queue = freestar.queue || []; + freestar.config = freestar.config || {}; + freestar.config.enabled_slots = []; + freestar.initCallback = function() { + freestar.config.enabled_slots.length === 0 ? + (freestar.initCallbackCalled = false) : + freestar.newAdSlots(freestar.config.enabled_slots); + }; + + freestar.config.channel = '/4735792/reuters.com/home'; + + trackTiming('onetrust_start'); + + (window).initBootstrap( + { + onetrust_logs: getParameterByName(ONETRUST_LOGS) || 'false', + geolocation_mock: + getParameterByName(ONETRUST_GEOLOCATION_MOCK) || 'default', + onetrust_script_id: ONETRUST_SCRIPT_ID, + }, + (onetrustResponse) => { + trackTiming('onetrust_completion'); + // Never used... + // const { + // require_consent, // eslint-disable-line camelcase + // consent, + // require_gdpr_consent, // eslint-disable-line camelcase + // gdpr_consent_data, // eslint-disable-line camelcase + // require_ccpa_consent, // eslint-disable-line camelcase + // ccpa_consent_data, // eslint-disable-line camelcase + // } = onetrustResponse; + + // Trigger data layer events to GTM + (window).dataLayer = (window).dataLayer || []; + (window).dataLayer.push({ + event: 'bootstrap_results', + ...onetrustResponse, + }); + + // Never used... + // const opt_in = require_consent ? consent : true; // eslint-disable-line camelcase + // const token = + // (require_gdpr_consent ? gdpr_consent_data : undefined) || // eslint-disable-line camelcase + // (require_ccpa_consent ? ccpa_consent_data : undefined); // eslint-disable-line camelcase + // const consent_given = require_consent && consent; // eslint-disable-line camelcase + + const iasPromise = Ias(); + + return Promise.all([iasPromise]).then((responses) => { + const [iasResponse] = responses; + + return { + ...onetrustResponse, + ias: iasResponse, + }; + }); + } + ); + + (window).bootstrap.getResults((result) => { + // Set GAM + (window).googletag = (window).googletag || { cmd: [] }; + (window).googletag.cmd.push(() => { + (window).googletag.pubads().enableSingleRequest(); + (window).googletag.pubads().enableAsyncRendering(); + (window).googletag.pubads().collapseEmptyDivs(true); + + // Global Ads test targeting + const adstest = new URL(document.location.href).searchParams.get('adstest'); + if (adstest) { + (window).googletag.pubads().setTargeting('adstest', adstest); + } + + const template = (document.querySelector('meta[name="ad:template"]'))?.content; + if (template) { + (window).googletag.pubads().setTargeting('template', template); + } + }); + + if (!Array.isArray((window).graphicsAdQueue)) { + console.error('Ad queue not initialized!'); + } + + freestar.queue.push(function() { + freestar.newAdSlots((window).graphicsAdQueue || [], 'foobar'); + }); + + freestar.queue.push(function() { + (window).googletag.pubads().set('page_url', 'https://www.reuters.com/'); // This line should only be used for testing + }); + }); +}; diff --git a/src/components/AdSlot/scripts/getParameterByName.ts b/src/components/AdSlot/scripts/getParameterByName.ts new file mode 100644 index 00000000..d759bdd9 --- /dev/null +++ b/src/components/AdSlot/scripts/getParameterByName.ts @@ -0,0 +1,12 @@ +export default (name: string, url = window.location.href) => { + // eslint-disable-next-line no-useless-escape + name = name.replace(/[\[\]]/g, '\\$&'); + const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'); + const results = regex.exec(url); + + if (!results) return null; + + if (!results[2]) return ''; + + return decodeURIComponent(results[2].replace(/\+/g, ' ')); +}; diff --git a/src/components/AdSlot/scripts/ias.ts b/src/components/AdSlot/scripts/ias.ts new file mode 100644 index 00000000..49fc0d1b --- /dev/null +++ b/src/components/AdSlot/scripts/ias.ts @@ -0,0 +1,32 @@ +import trackTiming from './trackTiming'; + +const IAS_REQUEST_TIMEOUT = 600; + +export default () => { + return new Promise((resolve) => { + trackTiming('ias_start'); + const timerId = setTimeout(() => { + trackTiming('ias_completion_with_timeout'); + resolve('Resolved with timeout'); + }, IAS_REQUEST_TIMEOUT); + + const setupIAS = () => { + clearTimeout(timerId); + trackTiming('ias_completion'); + (window).__iasPET = (window).__iasPET || {}; + (window).__iasPET.queue = (window).__iasPET.queue || []; + (window).__iasPET.pubId = '931336'; + resolve('loaded'); + }; + + // Set up IAS pet.js + const script = document.createElement('script'); + script.src = '//static.adsafeprotected.com/iasPET.1.js'; + script.setAttribute('async', 'async'); + document.head.appendChild(script); + script.onload = setupIAS; + script.onerror = () => { + resolve('error'); + }; + }); +}; diff --git a/src/components/AdSlot/scripts/trackTiming.ts b/src/components/AdSlot/scripts/trackTiming.ts new file mode 100644 index 00000000..3071eaf5 --- /dev/null +++ b/src/components/AdSlot/scripts/trackTiming.ts @@ -0,0 +1,9 @@ +export default (timingName: string) => { + const timestamp = window.performance.now(); + (window).dataLayer = (window).dataLayer || []; + (window).dataLayer.push({ + event: 'rum_add_timing', + rum_timing_name: timingName, + rum_timing_timestamp: timestamp, + }); +}; diff --git a/src/components/AdSlot/stories/docs/component.md b/src/components/AdSlot/stories/docs/component.md index 7ef16396..ffb44b54 100644 --- a/src/components/AdSlot/stories/docs/component.md +++ b/src/components/AdSlot/stories/docs/component.md @@ -1,19 +1,22 @@ Display a FreeStar Ad Slot Note: You must use this domain to access the story book: -http://localhost.arcpublishing.com:3000 + This domain has been whitelisted on the Ad server. To setup the domain please add the following line to `/etc/hosts`: ``` -127.0.0.1 localhost localhost.arcpublishing.com +127.0.0.1 localhost localhost.arcpublishing.com ``` ```svelte + + +