56 lines
1.1 KiB
Text
56 lines
1.1 KiB
Text
import { Meta, Canvas } from '@storybook/blocks';
|
|
|
|
import * as InlineAdStories from './InlineAd.stories.svelte';
|
|
|
|
<Meta of={InlineAdStories} />
|
|
|
|
# InlineAd
|
|
|
|
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 { AdScripts } from '@reuters-graphics/graphics-components';
|
|
</script>
|
|
|
|
<!-- 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}
|
|
```
|
|
|
|
You may add **up to three** inline ads per page, but must set the `n` prop on multiple ads in sequential order, 1 - 3.
|
|
|
|
```svelte
|
|
<!-- First inline ad on the page -->
|
|
<InlineAd n={1} />
|
|
<!-- ... second ... -->
|
|
<InlineAd n={2} />
|
|
<!-- ... third and final. -->
|
|
<InlineAd n={3} />
|
|
```
|
|
|
|
<Canvas of={InlineAdStories.Demo} />
|