From bf6aa689bedb9c1f607c843ebda091419144bfdd Mon Sep 17 00:00:00 2001
From: Jake Lee Kennedy <jlkennedy127@gmail.com>
Date: Wed, 21 Feb 2024 17:10:14 +0000
Subject: [PATCH 1/2] workaround for thirdPartyJSTracking

---
 src/routes/csr/[template]/+page.server.ts                 | 6 ++++++
 src/templates/components/Fabric.svelte                    | 3 ---
 src/templates/csr/fabric-xl/{ad.json.disabled => ad.json} | 0
 src/templates/csr/fabric-xl/index.html                    | 1 +
 src/templates/csr/fabric-xl/index.svelte                  | 2 --
 src/templates/csr/fabric-xl/test.json                     | 2 +-
 src/templates/csr/fabric/{ad.json.disabled => ad.json}    | 0
 src/templates/csr/fabric/index.html                       | 1 +
 src/templates/csr/fabric/index.svelte                     | 2 --
 src/templates/csr/fabric/test.json                        | 2 +-
 10 files changed, 10 insertions(+), 9 deletions(-)
 rename src/templates/csr/fabric-xl/{ad.json.disabled => ad.json} (100%)
 create mode 100644 src/templates/csr/fabric-xl/index.html
 rename src/templates/csr/fabric/{ad.json.disabled => ad.json} (100%)
 create mode 100644 src/templates/csr/fabric/index.html

diff --git a/src/routes/csr/[template]/+page.server.ts b/src/routes/csr/[template]/+page.server.ts
index d6f770f8..628dcff9 100644
--- a/src/routes/csr/[template]/+page.server.ts
+++ b/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');
 
diff --git a/src/templates/components/Fabric.svelte b/src/templates/components/Fabric.svelte
index bb18446b..8532acc3 100644
--- a/src/templates/components/Fabric.svelte
+++ b/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);
diff --git a/src/templates/csr/fabric-xl/ad.json.disabled b/src/templates/csr/fabric-xl/ad.json
similarity index 100%
rename from src/templates/csr/fabric-xl/ad.json.disabled
rename to src/templates/csr/fabric-xl/ad.json
diff --git a/src/templates/csr/fabric-xl/index.html b/src/templates/csr/fabric-xl/index.html
new file mode 100644
index 00000000..efa6e13b
--- /dev/null
+++ b/src/templates/csr/fabric-xl/index.html
@@ -0,0 +1 @@
+[%thirdPartyJSTracking%]
diff --git a/src/templates/csr/fabric-xl/index.svelte b/src/templates/csr/fabric-xl/index.svelte
index 456ffa7e..87993846 100644
--- a/src/templates/csr/fabric-xl/index.svelte
+++ b/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}
diff --git a/src/templates/csr/fabric-xl/test.json b/src/templates/csr/fabric-xl/test.json
index 7bddbd38..e195f4b9 100644
--- a/src/templates/csr/fabric-xl/test.json
+++ b/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": "",
diff --git a/src/templates/csr/fabric/ad.json.disabled b/src/templates/csr/fabric/ad.json
similarity index 100%
rename from src/templates/csr/fabric/ad.json.disabled
rename to src/templates/csr/fabric/ad.json
diff --git a/src/templates/csr/fabric/index.html b/src/templates/csr/fabric/index.html
new file mode 100644
index 00000000..efa6e13b
--- /dev/null
+++ b/src/templates/csr/fabric/index.html
@@ -0,0 +1 @@
+[%thirdPartyJSTracking%]
diff --git a/src/templates/csr/fabric/index.svelte b/src/templates/csr/fabric/index.svelte
index a80cb3ca..5a94ec36 100644
--- a/src/templates/csr/fabric/index.svelte
+++ b/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}
diff --git a/src/templates/csr/fabric/test.json b/src/templates/csr/fabric/test.json
index 30bd3422..ee618e1e 100644
--- a/src/templates/csr/fabric/test.json
+++ b/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": "",

From d9ba6f2bba41ff1611fdf446b1c3b49243b2fdf5 Mon Sep 17 00:00:00 2001
From: Jake Lee Kennedy <jlkennedy127@gmail.com>
Date: Tue, 27 Feb 2024 10:23:29 +0000
Subject: [PATCH 2/2] add info on extra template files to readme

---
 docs/svelte-template-authoring.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/svelte-template-authoring.md b/docs/svelte-template-authoring.md
index 1ac6c7a2..6c5369cc 100644
--- a/docs/svelte-template-authoring.md
+++ b/docs/svelte-template-authoring.md
@@ -8,6 +8,8 @@ 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
@@ -15,6 +17,8 @@ content, they are effectively tiny web apps. These are mainly the `capi-*` templ
 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.