wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

split scripts into dedicated modules and component

Browse source
This commit is contained in:
Jon McClure 2023-07-20 18:04:04 +01:00
parent 1b55605304
commit d742e36250
10 changed files with 209 additions and 229 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/components/AdSlot/AdScripts.svelte Normal file
View file

@ -0,0 +1,34 @@
<script lang="ts">
import { onMount } from 'svelte';
import bootstrapLoad from './scripts/bootstrapLoad';
onMount(() => {
(<any>window).graphicsAdQueue = (<any>window).graphicsAdQueue || [];
});
</script>
<svelte:head>
<link rel="preconnect" href="https://a.pub.network/" crossorigin="" />
<link rel="preconnect" href="https://b.pub.network/" crossorigin="" />
<link rel="preconnect" href="https://c.pub.network/" crossorigin="" />
<link rel="preconnect" href="https://d.pub.network/" crossorigin="" />
<link rel="preconnect" href="https://c.amazon-adsystem.com" crossorigin="" />
<link rel="preconnect" href="https://s.amazon-adsystem.com" crossorigin="" />
<link rel="preconnect" href="https://btloader.com/" crossorigin="" />
<link rel="preconnect" href="https://api.btloader.com/" crossorigin="" />
<link
rel="preconnect"
href="https://confiant-integrations.global.ssl.fastly.net"
crossorigin=""
/>
<link rel="stylesheet" href="https://a.pub.network/reuters-com/cls.css" />
<script
src="https://graphics.thomsonreuters.com/cdn/js/bootstrap.static.js"
on:load="{bootstrapLoad}"></script>
<script
src="https://a.pub.network/reuters-com/pubfig.min.js"
data-cfasync="false"
async></script>
</svelte:head>

2
src/components/AdSlot/AdSlot.stories.svelte
View file

@ -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 @@
<Meta {...meta} />
<Template let:args>
<AdScripts />
<AdSlot {...args} />
<!-- <AdSlot placementName="reuters_desktop_canvas" dataFreestarAd="__970x250" /> Add a crown -->
</Template>

231
src/components/AdSlot/AdSlot.svelte
View file

@ -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(() => {
(<any>window).graphicsAdQueue = (<any>window).graphicsAdQueue || [];
(<any>window).graphicsAdQueue.push({
placementName,
slotId: placementName,
});
});
</script>
<!-- @component `AdSlot` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-DocumentCloud--default) -->
<svelte:head>
<!-- PLACE THIS SECTION INSIDE OF YOUR HEAD TAGS -->
<!-- Below is a recommended list of pre-connections, which allow the network to establish each connection quicker, speeding up response times and improving ad performance. -->
<link rel="preconnect" href="https://a.pub.network/" crossorigin="" />
<link rel="preconnect" href="https://b.pub.network/" crossorigin="" />
<link rel="preconnect" href="https://c.pub.network/" crossorigin="" />
<link rel="preconnect" href="https://d.pub.network/" crossorigin="" />
<link rel="preconnect" href="https://c.amazon-adsystem.com" crossorigin="" />
<link rel="preconnect" href="https://s.amazon-adsystem.com" crossorigin="" />
<link rel="preconnect" href="https://btloader.com/" crossorigin="" />
<link rel="preconnect" href="https://api.btloader.com/" crossorigin="" />
<link
rel="preconnect"
href="https://confiant-integrations.global.ssl.fastly.net"
crossorigin=""
/>
<!-- Below is a link to a CSS file that accounts for Cumulative Layout Shift, a new Core Web Vitals subset that Google uses to help rank your site in search -->
<!-- The file is intended to eliminate the layout shifts that are seen when ads load into the page. If you don't want to use this, simply remove this file -->
<!-- To find out more about CLS, visit https://web.dev/vitals/ -->
<link rel="stylesheet" href="https://a.pub.network/reuters-com/cls.css" />
<script
id="btstrp"
src="https://graphics.thomsonreuters.com/cdn/js/bootstrap.static.js">
</script>
<script type="text/javascript">
console.log('#GJ svelte:head is about to be executed');
const getParameterByName = (name, 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, ' '));
};
function trackTiming(timingName) {
const timestamp = window.performance.now();
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'rum_add_timing',
rum_timing_name: timingName,
rum_timing_timestamp: timestamp,
});
}
const IAS_REQUEST_TIMEOUT = 600;
function Ias() {
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';
// eslint-disable-next-line no-console
console.log('IAS setup complete');
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 = (error) => {
// eslint-disable-next-line no-console
console.warn('IAS load error', error);
resolve('error');
};
});
}
console.log('#GJ before freestar init', window.freestar);
var 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';
const ONETRUST_LOGS = 'ot_logs';
const ONETRUST_GEOLOCATION_MOCK = 'ot_geolocation_mock';
const ONETRUST_SCRIPT_ID = '38cb75bd-fbe1-4ac8-b4af-e531ab368caf-test';
var script = document.querySelector('#btstrp');
script.addEventListener('load', function () {
console.log('#GJ', btstrp, 'window.initBootstrap', window.initBootstrap);
trackTiming('onetrust_start');
console.log('#GJ before initBootstrap');
window.initBootstrap(
{
onetrust_logs: getParameterByName(ONETRUST_LOGS) || 'false',
geolocation_mock:
getParameterByName(ONETRUST_GEOLOCATION_MOCK) || 'default',
onetrust_script_id: ONETRUST_SCRIPT_ID,
},
(onetrust_response) => {
trackTiming('onetrust_completion');
const {
require_consent,
consent,
require_gdpr_consent,
gdpr_consent_data,
require_ccpa_consent,
ccpa_consent_data,
} = onetrust_response;
// Trigger data layer events to GTM
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'bootstrap_results',
...onetrust_response,
});
const opt_in = require_consent ? consent : true;
const token =
(require_gdpr_consent ? gdpr_consent_data : undefined) ||
(require_ccpa_consent ? ccpa_consent_data : undefined);
const consent_given = require_consent && consent;
const ias_promise = Ias();
return Promise.all([ias_promise]).then((responses) => {
const [ias_response] = responses;
console.log('#GJ resolved all promises');
return {
...onetrust_response,
ias: ias_response,
};
});
}
);
console.log('#GJ before get results');
window.bootstrap.getResults((result) => {
// eslint-disable-next-line no-console
console.log('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 = url.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);
}
});
console.log('#GJ adding ads', window.graphicsAdQueue);
if (!Array.isArray(window.graphicsAdQueue)) {
console.error('Ad queue not initialized!');
}
freestar.queue.push(function () {
freestar.newAdSlots(window.graphicsAdQueue || [], 'foobar');
});
freestar.queue.push(function () {
googletag.pubads().set('page_url', 'https://www.reuters.com/'); // This line should only be used for testing
});
console.log('#GJ Ads were added 2');
});
});
console.log('#GJ svelte:head was executed');
</script>
<script
src="https://a.pub.network/reuters-com/pubfig.min.js"
data-cfasync="false"
async></script>
</svelte:head>
<!-- @component `AdSlot` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-AdSlot--default) -->
<Block id="{id}" cls="freestar-adslot {cls}">
<div data-freestar-ad="{dataFreestarAd || null}" id="{placementName}"></div>
</Block>

102
src/components/AdSlot/scripts/bootstrapLoad.ts Normal file
View file

@ -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 = (<any>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');
(<any>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
(<any>window).dataLayer = (<any>window).dataLayer || [];
(<any>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,
};
});
}
);
(<any>window).bootstrap.getResults((result) => {
// Set GAM
(<any>window).googletag = (<any>window).googletag || { cmd: [] };
(<any>window).googletag.cmd.push(() => {
(<any>window).googletag.pubads().enableSingleRequest();
(<any>window).googletag.pubads().enableAsyncRendering();
(<any>window).googletag.pubads().collapseEmptyDivs(true);
// Global Ads test targeting
const adstest = new URL(document.location.href).searchParams.get('adstest');
if (adstest) {
(<any>window).googletag.pubads().setTargeting('adstest', adstest);
}
const template = (<any>document.querySelector('meta[name="ad:template"]'))?.content;
if (template) {
(<any>window).googletag.pubads().setTargeting('template', template);
}
});
if (!Array.isArray((<any>window).graphicsAdQueue)) {
console.error('Ad queue not initialized!');
}
freestar.queue.push(function() {
freestar.newAdSlots((<any>window).graphicsAdQueue || [], 'foobar');
});
freestar.queue.push(function() {
(<any>window).googletag.pubads().set('page_url', 'https://www.reuters.com/'); // This line should only be used for testing
});
});
};

12
src/components/AdSlot/scripts/getParameterByName.ts Normal file
View file

@ -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, ' '));
};

32
src/components/AdSlot/scripts/ias.ts Normal file
View file

@ -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');
(<any>window).__iasPET = (<any>window).__iasPET || {};
(<any>window).__iasPET.queue = (<any>window).__iasPET.queue || [];
(<any>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');
};
});
};

9
src/components/AdSlot/scripts/trackTiming.ts Normal file
View file

@ -0,0 +1,9 @@
export default (timingName: string) => {
const timestamp = window.performance.now();
(<any>window).dataLayer = (<any>window).dataLayer || [];
(<any>window).dataLayer.push({
event: 'rum_add_timing',
rum_timing_name: timingName,
rum_timing_timestamp: timestamp,
});
};

9
src/components/AdSlot/stories/docs/component.md
View file

@ -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
<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
<script>
import { AdSlot } from '@reuters-graphics/graphics-components';
import { AdSlot, AdScripts } from '@reuters-graphics/graphics-components';
</script>
<!-- Include only ONCE per page -->
<AdScripts />
<AdSlot
placementName="reuters_desktop_native"
slotId="reuters_desktop_native"

2
src/index.js
View file

@ -1,5 +1,7 @@
// Components
export { default as Article } from './components/Article/Article.svelte';
export { default as AdScripts } from './components/AdSlot/AdScripts.svelte';
export { default as AdSlot } from './components/AdSlot/AdSlot.svelte';
export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
export { default as Block } from './components/Block/Block.svelte';
export { default as BodyText } from './components/BodyText/BodyText.svelte';

5
yarn.lock
View file

@ -2471,11 +2471,6 @@
dependencies:
"@babel/runtime" "^7.12.5"
"@tr/rcom-bootstrap@1.0.19-alpha-2":
version "1.0.19-alpha-2"
resolved "https://npm.pkg.github.com/download/@tr/rcom-bootstrap/1.0.19-alpha-2/b6dd0970ac9a8fce8eb9890cc75576ea08c5ba06"
integrity sha512-+qg2hyJHlGB8z82K1JL0me3JeIpogrIh56pe1FaZUK9qn2lVHtdQVdjYCD52UR9lpeBpAWEAy9MgeoTvpi/9zQ==
"@tsconfig/svelte@^3.0.0":
version "3.0.0"
resolved "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-3.0.0.tgz"