There are two main types of templates, which live in different folders.
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
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 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
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.
Templates themselves are defined by a directory living inside the csr
or ssr
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.
A template consists of html
sandwiched in script
and style
tags.
Ad Manager variables are identified with the Prop
type and the build tool automatically
replaces them with the correct string, e.g. [%MyVar%]
.
<script lang="ts">
import type { GAMVariable } from '$lib/gam';
export let MyVar: GAMVariable;
</script>
<aside>My ad content with {MyVar}</aside>
<style>
aside {
color: white;
background-color: black;
}
</style>
To learn more more about Svelte, you can follow their tutorial.
Run pnpm dev
to start the local preview environment and head to http://localhost:7777
and click on your template in the list.
You should see a preview and the code at the bottom of the page.
Copy and paste the code at the bottom of the page into the Native Template in Google Ad Manager.
Note: The compiled template code is not written to a file.