Merge pull request #371 from guardian/jlk/fix-thirdPartyJSTracking

docs/svelte-template-authoring.md

@@ -8,13 +8,17 @@ These are HTML + CSS, where Ad Manager variables are replaced by
 the creative serving them. Many of the templates fit this category, such as `fabric`,
 `fabric-video`, `manual`, etc. They live in the [`/src/templates/ssr`](/src/templates/ssr) directory.
 
+They also can contain an `index.ts` file, which contains supplemental plain js/ts for the template which is not compiled by svelte.
+
 ### Dynamic (CSR)
 
 Dynamic templates need to make a request to an api in order to generate their
 content, they are effectively tiny web apps. These are mainly the `capi-*` templates, e.g. `capi-single-paidfor`.
 These only generate JS + CSS, and the HTML is generated on the client by svelte.
 They live in the [`/src/templates/csr`](/src/templates/csr) directory.
 
+They can also contain a `index.html` file which contains additional html to include in the template outside of the svelte rendering process, this is useful for certain props that can contain arbitrary html/js that can break the svelte rendering process.
+
 ## Creating a template
 
 Templates themselves are defined by a directory living inside the `csr` or `ssr`
@@ -23,6 +27,8 @@ folders. The files making up a template are:
 - `index.svelte` (required)
 - `test.json` (optional, only for development purposes)
 - `README.md` (optional description)
+- `index.ts` (optional, only for SSR templates)
+- `index.html` (optional, only for CSR templates)
 
 So by creating a directory inside `ssr` or `csr` adding an index.svelte file and you have the basics of a template.
 

src/routes/csr/[template]/+page.server.ts

@@ -18,6 +18,11 @@ interface Data {
 
 const github = 'https://github.com/guardian/commercial-templates/blob';
 
+const getSupplementalHTML = (template: string) => {
+	const path = `src/templates/csr/${template}/index.html`;
+	return existsSync(path) ? readFileSync(path, 'utf-8') : null;
+};
+
 export const load: PageServerLoad = async ({ params }) => {
 	const { template } = params;
 
@@ -58,6 +63,7 @@ export const load: PageServerLoad = async ({ params }) => {
 	const html = [
 		`<!-- ${stamp} -->`,
 		`<div id="svelte" data-template-id="${template}"></div>`,
+		getSupplementalHTML(template) ?? '',
 		`<script>${String(chunks[0].code)}</script>`,
 	].join('\n');
 

src/templates/components/Fabric.svelte

@@ -7,7 +7,6 @@
 	export let TrackingPixel: string;
 	export let ResearchPixel: string;
 	export let ViewabilityPixel: string;
-	export let thirdPartyJSTracking: string;
 	export let BackgroundScrollType: 'parallax' | 'none' | 'fixed';
 	export let BackgroundColour: string;
 	export let BackgroundImage: string;
@@ -100,8 +99,6 @@
 	<Pixel src={ViewabilityPixel} />
 {/if}
 
-{@html thirdPartyJSTracking}
-
 <style lang="scss">
 	:global(body) {
 		background-color: var(--background-color);

src/templates/csr/fabric-xl/index.html

@@ -0,0 +1 @@
+[%thirdPartyJSTracking%]

src/templates/csr/fabric-xl/index.svelte

@@ -6,7 +6,6 @@
 	export let TrackingPixel: GAMVariable;
 	export let ResearchPixel: GAMVariable;
 	export let ViewabilityPixel: GAMVariable;
-	export let thirdPartyJSTracking: GAMVariable;
 	export let ShowLabel: GAMVariable;
 
 	export let BackgroundScrollType: GAMVariable<'parallax' | 'none' | 'fixed'>;
@@ -39,7 +38,6 @@
 	{TrackingPixel}
 	{ResearchPixel}
 	{ViewabilityPixel}
-	{thirdPartyJSTracking}
 	{BackgroundScrollType}
 	{BackgroundColour}
 	{BackgroundImage}

src/templates/csr/fabric-xl/test.json

@@ -2,7 +2,7 @@
 	"TrackingPixel": "",
 	"ResearchPixel": "",
 	"ViewabilityPixel": "",
-	"thirdPartyJSTracking": "",
+	"thirdPartyJSTracking": "<SCRIPT TYPE='application/javascript' SRC='https://pixel.adsafeprotected.com/rjss/st/726370/54949606/skeleton.js'></SCRIPT> <NOSCRIPT><IMG SRC='https://pixel.adsafeprotected.com/rfw/st/726370/54949605/skeleton.gif?gdpr=${GDPR}&gdpr_consent=${GDPR_CONSENT_278}&gdpr_pd=${GDPR_PD}' BORDER=0 WIDTH=1 HEIGHT=1 ALT=''></NOSCRIPT>",
 	"BackgroundScrollType": "parallax",
 	"BackgroundColour": "transparent",
 	"BackgroundImage": "",

src/templates/csr/fabric/index.html

@@ -0,0 +1 @@
+[%thirdPartyJSTracking%]

src/templates/csr/fabric/index.svelte

@@ -6,7 +6,6 @@
 	export let Trackingpixel: GAMVariable;
 	export let Researchpixel: GAMVariable;
 	export let Viewabilitypixel: GAMVariable;
-	export let thirdPartyJSTracking: GAMVariable;
 
 	export let BackgroundScrollType: GAMVariable<'parallax' | 'none' | 'fixed'>;
 	export let BackgroundColour: GAMVariable;
@@ -36,7 +35,6 @@
 	TrackingPixel={Trackingpixel}
 	ResearchPixel={Researchpixel}
 	ViewabilityPixel={Viewabilitypixel}
-	{thirdPartyJSTracking}
 	{BackgroundScrollType}
 	{BackgroundColour}
 	{BackgroundImage}

src/templates/csr/fabric/test.json

@@ -2,7 +2,7 @@
 	"Trackingpixel": "",
 	"Researchpixel": "",
 	"Viewabilitypixel": "",
-	"thirdPartyJSTracking": "",
+	"thirdPartyJSTracking": "<SCRIPT TYPE='application/javascript' SRC='https://pixel.adsafeprotected.com/rjss/st/726370/54949606/skeleton.js'></SCRIPT> <NOSCRIPT><IMG SRC='https://pixel.adsafeprotected.com/rfw/st/726370/54949605/skeleton.gif?gdpr=${GDPR}&gdpr_consent=${GDPR_CONSENT_278}&gdpr_pd=${GDPR_PD}' BORDER=0 WIDTH=1 HEIGHT=1 ALT=''></NOSCRIPT>",
 	"BackgroundScrollType": "parallax",
 	"BackgroundColour": "transparent",
 	"BackgroundImage": "",