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
+
+
+