{boldTitle}{regularTitle}
+{EventDateTime}
+
",
- "BackgroundImage":"https://adops-assets.s3.amazonaws.com/dap-fabrics/prog-dmpu-test-image/dmpu-test.jpg"
+ "BackgroundImage":"https://adops-assets.s3.amazonaws.com/dap-fabrics/prog-dmpu-test-image/dmpu-test.jpg",
+ "thirdPartyJSTracking": " 
"
}
diff --git a/legacy/src/programmatic-dmpu/web/index.html b/legacy/src/programmatic-dmpu/web/index.html
index 5d024b90..e299ad56 100644
--- a/legacy/src/programmatic-dmpu/web/index.html
+++ b/legacy/src/programmatic-dmpu/web/index.html
@@ -7,3 +7,4 @@
+[%thirdPartyJSTracking%]
\ No newline at end of file
diff --git a/legacy/src/programmatic-mpu/test.json b/legacy/src/programmatic-mpu/test.json
index 47a8da9c..725af8dd 100644
--- a/legacy/src/programmatic-mpu/test.json
+++ b/legacy/src/programmatic-mpu/test.json
@@ -4,5 +4,6 @@
"TrackingPixel": "https://gu.com/tracking-pixel.gif",
"ResearchPixel": "https://gu.com/research-pixel.gif",
"ViewabilityTracker": "",
- "BackgroundImage":"https://adops-assets.s3.amazonaws.com/SkySports_Aug18_Background.jpg"
+ "BackgroundImage":"https://adops-assets.s3.amazonaws.com/SkySports_Aug18_Background.jpg",
+ "thirdPartyJSTracking": " "
}
diff --git a/legacy/src/programmatic-mpu/web/index.html b/legacy/src/programmatic-mpu/web/index.html
index d78a5033..59e4cfce 100644
--- a/legacy/src/programmatic-mpu/web/index.html
+++ b/legacy/src/programmatic-mpu/web/index.html
@@ -7,3 +7,4 @@
",
- "BackgroundImage":"https://adops-assets.s3.amazonaws.com/SkySports_Aug18_Background.jpg"
+ "BackgroundImage":"https://adops-assets.s3.amazonaws.com/SkySports_Aug18_Background.jpg",
+ "thirdPartyJSTracking": " "
}
diff --git a/legacy/src/programmatic-mpu/web/index.html b/legacy/src/programmatic-mpu/web/index.html
index d78a5033..59e4cfce 100644
--- a/legacy/src/programmatic-mpu/web/index.html
+++ b/legacy/src/programmatic-mpu/web/index.html
@@ -7,3 +7,4 @@
+[%thirdPartyJSTracking%]
\ No newline at end of file
diff --git a/src/lib/Previews.svelte b/src/lib/Previews.svelte
index 9718bec0..6e867af0 100644
--- a/src/lib/Previews.svelte
+++ b/src/lib/Previews.svelte
@@ -34,7 +34,7 @@
};
onMount(() => {
- window.addEventListener('message', (ev: MessageEvent) => {
+ window.addEventListener('message', (ev: MessageEvent) => {
if (!ev.isTrusted) return;
const { source, data: json } = ev;
@@ -49,7 +49,16 @@
const iframe = source.frameElement as HTMLIFrameElement;
iframe.height = String(data.value.height);
break;
-
+ case 'get-page-url':
+ source.postMessage(
+ JSON.stringify({
+ id: data.id,
+ result:
+ 'https://www.theguardian.com/lifeandstyle/2023/jul/19/a-moment-that-changed-me-i-borrowed-a-dog-and-discovered-a-healthier-happier-way-of-life',
+ }),
+ '*',
+ );
+ break;
default:
break;
}
diff --git a/src/lib/cmp.ts b/src/lib/cmp.ts
new file mode 100644
index 00000000..637c7701
--- /dev/null
+++ b/src/lib/cmp.ts
@@ -0,0 +1,68 @@
+import { generateId, timeout } from './messenger';
+
+interface ConsentState {
+ dateCreated: string;
+ gpcEnabled: boolean;
+ newUser: boolean;
+ uspString: string;
+}
+
+interface CmpReturn {
+ __cmpReturn: {
+ returnValue: ConsentState;
+ callId: string;
+ success: boolean;
+ };
+}
+
+const isReplyFromCMP = (json: unknown): json is CmpReturn => {
+ const reply = json as CmpReturn;
+ return '__cmpReturn' in reply && typeof reply.__cmpReturn === 'object';
+};
+
+const decodeReply = (e: MessageEvent): CmpReturn | void => {
+ try {
+ const json: unknown = JSON.parse(e.data);
+
+ if (isReplyFromCMP(json)) {
+ return json;
+ }
+
+ return;
+ } catch (_) {
+ return;
+ }
+};
+
+const isCcpaOptedOut = (consentState: ConsentState) => {
+ return consentState.uspString[2] === 'Y';
+};
+
+const getUSPData = async (): Promise =>
+ timeout(
+ new Promise((resolve) => {
+ const callId = generateId();
+ const message = {
+ __cmpCall: {
+ command: 'getUSPData',
+ version: 1,
+ callId,
+ },
+ };
+
+ const listener = (e: MessageEvent) => {
+ const decoded = decodeReply(e);
+ if (decoded && decoded.__cmpReturn.callId === callId) {
+ resolve(decoded.__cmpReturn.returnValue);
+ window.removeEventListener('message', listener);
+ }
+ };
+
+ window.addEventListener('message', listener);
+
+ window.top?.postMessage(JSON.stringify(message), '*');
+ }),
+ 3000,
+ );
+
+export { getUSPData, isCcpaOptedOut };
diff --git a/src/lib/messenger.ts b/src/lib/messenger.ts
index 239fe6ba..e3e07520 100644
--- a/src/lib/messenger.ts
+++ b/src/lib/messenger.ts
@@ -1,5 +1,6 @@
type StandardMessage = {
type: Type;
+ id?: string;
iframeId?: string;
slotId?: string;
/**
@@ -7,6 +8,8 @@ type StandardMessage = {
*
* We mostly treat this as unknown and leave it up to the message
* listeners to convert to a type they can handle
+ *
+ * Although some messages don't have a value property, e.g. 'get-page-url', this property is still required due to validation in messenger.ts in the commercial repo
*/
value: Data;
};
@@ -27,12 +30,28 @@ type BackgroundMessage = StandardMessage<
backgroundPosition: string;
backgroundSize: string;
ctaUrl: string;
+ videoSource: string;
}
>;
type TypeMessage = StandardMessage<'type', string>;
-type Message = ResizeMessage | StringMessage | BackgroundMessage | TypeMessage;
+type GetPageURLMessage = StandardMessage<'get-page-url', string>;
+
+type PassbackRefreshMessage = StandardMessage<'passback-refresh', string>;
+
+type Message =
+ | ResizeMessage
+ | StringMessage
+ | BackgroundMessage
+ | TypeMessage
+ | GetPageURLMessage
+ | PassbackRefreshMessage;
+
+type MessengerResponse = {
+ id: string;
+ result: string;
+};
const generateId = () => {
const _4chars = () =>
@@ -42,6 +61,12 @@ const generateId = () => {
return `${_4chars()}${_4chars()}-${_4chars()}-${_4chars()}-${_4chars()}-${_4chars()}${_4chars()}${_4chars()}`;
};
+const timeout = async (promise: Promise, ms: number): Promise =>
+ Promise.race([
+ promise,
+ new Promise((resolve) => window.setTimeout(resolve, ms)),
+ ]);
+
/**
* Post message to parent frame
*
@@ -52,5 +77,49 @@ const post = (arg: Message): void => {
window.top?.postMessage(JSON.stringify({ id: generateId(), ...arg }), '*');
};
-export { post };
+const isReplyFromMessenger = (json: unknown): json is MessengerResponse => {
+ const reply = json as MessengerResponse;
+ return (
+ 'result' in reply &&
+ typeof reply.result === 'string' &&
+ 'id' in reply &&
+ typeof reply.id === 'string'
+ );
+};
+
+const decodeReply = (e: MessageEvent): MessengerResponse | void => {
+ try {
+ const json: unknown = JSON.parse(e.data);
+
+ if (isReplyFromMessenger(json)) {
+ return json;
+ }
+
+ return;
+ } catch (_) {
+ return;
+ }
+};
+
+const postAndListen = (arg: Message): Promise =>
+ timeout(
+ new Promise((resolve) => {
+ const id = generateId();
+
+ const listener = (e: MessageEvent) => {
+ const decoded = decodeReply(e);
+ if (decoded && decoded.id === id) {
+ resolve(decoded.result);
+ window.removeEventListener('message', listener);
+ }
+ };
+
+ window.addEventListener('message', listener);
+
+ post({ ...arg, id });
+ }),
+ 3000,
+ );
+
+export { post, timeout, postAndListen, generateId };
export type { Message };
diff --git a/src/lib/messenger/get-page-url.ts b/src/lib/messenger/get-page-url.ts
new file mode 100644
index 00000000..5cf34ce2
--- /dev/null
+++ b/src/lib/messenger/get-page-url.ts
@@ -0,0 +1,7 @@
+import { postAndListen } from '$lib/messenger';
+
+const getPageURL = () => {
+ return postAndListen({ type: 'get-page-url', value: '' });
+};
+
+export { getPageURL };
diff --git a/src/lib/public-good.ts b/src/lib/public-good.ts
new file mode 100644
index 00000000..7688a0f8
--- /dev/null
+++ b/src/lib/public-good.ts
@@ -0,0 +1,34 @@
+/**
+ * https://assets.publicgood.com/docs/gen/pgmApi.html#create__anchor
+ */
+export interface PgmApiOptions {
+ partnerId: string;
+ attributes: {
+ targetId?: string;
+ targetType?: string;
+ url: string;
+ };
+ onShow?: () => void;
+ onHide?: () => void;
+}
+
+/**
+ * https://assets.publicgood.com/docs/gen/global.html#MatchInfo
+ */
+interface MatchInfo {
+ action: string;
+ cpm: number;
+ partner_id: string;
+ campaign_id: string;
+}
+
+export interface PgmApi {
+ create: (el: HTMLElement, options: PgmApiOptions) => void;
+ getAdvice(options: PgmApiOptions): Promise;
+}
+
+export const create = (el: HTMLElement, options: PgmApiOptions) => {
+ const win = window as typeof window & { pgmApi: PgmApi };
+
+ win.pgmApi.create(el, options);
+};
diff --git a/src/lib/rollup.ts b/src/lib/rollup.ts
index 33a06597..9411d731 100644
--- a/src/lib/rollup.ts
+++ b/src/lib/rollup.ts
@@ -9,10 +9,6 @@ import { terser } from 'rollup-plugin-terser';
import preprocess from 'svelte-preprocess';
import type { Props } from './svelte';
-const performancescript = `window.performance.mark('svelteEnd');
-const measure = window.performance.measure('svelte', 'svelteStart','svelteEnd');
-document.querySelector("#metrics").innerText = \`\${measure.duration.toFixed(2)}ms\`;`;
-
const virtual = (template: string, props: Props): Plugin => ({
name: 'virtual-template',
resolveId: (source: string) => {
@@ -28,11 +24,10 @@ const virtual = (template: string, props: Props): Plugin => ({
}
if (id === 'dom') {
return `import Template from "./src/templates/csr/${template}/index.svelte";
-window.performance.mark('svelteStart');
new Template({
target: document.querySelector('#svelte'),
props: ${JSON.stringify(props)},
-});${performancescript}`;
+});`;
}
return null;
},
diff --git a/src/routes/csr/[template].json.ts b/src/routes/csr/[template].json.ts
index 525d8507..b7994305 100644
--- a/src/routes/csr/[template].json.ts
+++ b/src/routes/csr/[template].json.ts
@@ -70,7 +70,6 @@ export const GET: RequestHandler = async ({ params }) => {
const html = [
``,
``,
- ``,
``,
].join('\n');
diff --git a/src/templates/components/Card.svelte b/src/templates/components/CapiCard.svelte
similarity index 100%
rename from src/templates/components/Card.svelte
rename to src/templates/components/CapiCard.svelte
diff --git a/src/templates/components/EventsHeader.svelte b/src/templates/components/EventsHeader.svelte
new file mode 100644
index 00000000..555c1965
--- /dev/null
+++ b/src/templates/components/EventsHeader.svelte
@@ -0,0 +1,114 @@
+
+
+
+
+
+
+
+
diff --git a/src/templates/components/ManualCard.svelte b/src/templates/components/ManualCard.svelte
new file mode 100644
index 00000000..ef026052
--- /dev/null
+++ b/src/templates/components/ManualCard.svelte
@@ -0,0 +1,162 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/templates/ssr/interscroller/index.ts b/src/templates/ssr/interscroller/index.ts
index 6eb3d27c..1a50aee5 100644
--- a/src/templates/ssr/interscroller/index.ts
+++ b/src/templates/ssr/interscroller/index.ts
@@ -15,6 +15,7 @@ post({
backgroundPosition: 'center center',
backgroundSize: 'cover',
ctaUrl: `%%CLICK_URL_UNESC%%%%DEST_URL%%`,
+ videoSource: `[%VideoSource%]`,
},
});
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ Book tickets
+