This commit is contained in:
Jon McClure 2024-05-15 18:34:37 +01:00
parent 7af68be15f
commit c86dde006a
3 changed files with 44 additions and 41 deletions

View file

@ -3,26 +3,33 @@ Add programmatic ads inline on your page.
> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
```svelte
<!-- +page.svelte -->
<script>
import { AdSlot, AdScripts } from '@reuters-graphics/graphics-components';
import { AdScripts } from '@reuters-graphics/graphics-components';
</script>
<!-- ALWAYS check if in an embed context! -->
{#if !embedded}
<!-- Include AdScripts only ONCE per page -->
<AdScripts />
{/if}
<!-- ... -->
{#if !embedded}
<AdSlot />
{/if}
<!-- ... -->
{#if !embedded}
<!-- Can add multiple ads to your page -->
<AdSlot />
{/if}
<!-- Include AdScripts only ONCE per page for any type of ad -->
<AdScripts />
```
```svelte
<!-- App.svelte -->
<script>
import { InlineAd } from '@reuters-graphics/graphics-components';
export let embedded = false;
</script>
{#each content.blocks as block}
<!-- ... -->
{#if block.Type === 'inline-ad'}
<!-- Check if in an embed context! -->
{#if !embedded}
<InlineAd />
{/if}
{/if}
<!-- ... -->
{/each}
```

View file

@ -12,17 +12,10 @@ Add a leaderboard ad to your page.
} from '@reuters-graphics/graphics-components';
</script>
<!-- ALWAYS check if in an embed context! -->
{#if !embedded}
<!-- Include AdScripts only ONCE per page -->
<AdScripts />
{/if}
<!-- Include AdScripts only ONCE per page for any type of ad -->
<AdScripts />
<!-- ... -->
{#if !embedded}
<!-- ALWAYS put the leaderboard ad directly above the SiteHeader -->
<SponsorshipAd />
<SiteHeader />
{/if}
<!-- ALWAYS put the leaderboard ad directly above the SiteHeader -->
<LeaderboardAd />
<SiteHeader />
```

View file

@ -3,21 +3,24 @@ Add a sponsorship ad to your page.
> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
```svelte
<!-- +page.svelte -->
<script>
import {
SponsorshipAd,
AdScripts,
} from '@reuters-graphics/graphics-components';
import { AdScripts } from '@reuters-graphics/graphics-components';
</script>
<!-- ALWAYS check if in an embed context! -->
{#if !embedded}
<!-- Include AdScripts only ONCE per page -->
<AdScripts />
{/if}
<!-- Include AdScripts only ONCE per page for any type of ad -->
<AdScripts />
```
<!-- ... -->
```svelte
<!-- App.svelte -->
<script>
import { SponsorshipAd } from '@reuters-graphics/graphics-components';
export let embedded = false;
</script>
<!-- Check if in an embed context! -->
{#if !embedded}
<SponsorshipAd />
{/if}