ad docs
This commit is contained in:
parent
7af68be15f
commit
c86dde006a
3 changed files with 44 additions and 41 deletions
|
|
@ -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}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in a new issue