-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #146 from reuters-graphics/ads-fix
Ads fix
- Loading branch information
Showing
13 changed files
with
274 additions
and
214 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| export type AdType = | ||
| | 'leaderboard' | ||
| | 'sponsorlogo' | ||
| | 'native' | ||
| | 'mpu' | ||
| | 'billboard'; | ||
|
|
||
| export type PlacementName = | ||
| | 'reuters_desktop_leaderboard_atf' | ||
| | 'reuters_mobile_leaderboard' | ||
| | 'reuters_desktop_native_1' | ||
| | 'reuters_mobile_mpu_1' | ||
| | 'reuters_sponsorlogo' | ||
| | 'reuters_billboard_desktop'; | ||
|
|
||
| export type DesktopPlacementName = | ||
| | 'reuters_desktop_leaderboard_atf' | ||
| | 'reuters_desktop_native_1' | ||
| | 'reuters_sponsorlogo' | ||
| | 'reuters_billboard_desktop'; | ||
|
|
||
| export type MobilePlacementName<DesktopPlacementName extends string> = | ||
| DesktopPlacementName extends 'reuters_desktop_leaderboard_atf' | ||
| ? 'reuters_mobile_leaderboard' | ||
| : DesktopPlacementName extends 'reuters_desktop_native_1' | ||
| ? 'reuters_mobile_mpu_1' | ||
| : DesktopPlacementName extends 'reuters_sponsorlogo' | ||
| ? 'reuters_sponsorlogo' | ||
| : DesktopPlacementName extends 'reuters_billboard_desktop' | ||
| ? 'reuters_mobile_mpu_1' | ||
| : never; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,126 +1,29 @@ | ||
| <script lang="ts"> | ||
| /** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */ | ||
| type PlacementName = | ||
| // Disabling leaderboard for now... | ||
| // | 'reuters_desktop_leaderboard_atf' | ||
| // | 'reuters_mobile_leaderboard' | ||
| | 'reuters_desktop_native_1' | ||
| | 'reuters_mobile_mpu_1' | ||
| | 'reuters_sponsorlogo' | ||
| | 'reuters_desktop_canvas'; | ||
| import type { PlacementName, AdType } from './@types/ads'; | ||
| import { onMount } from 'svelte'; | ||
| import { getRandomAdId } from './utils'; | ||
| /** | ||
| * The unique placement name from FreeStar dashboard. | ||
| * @required | ||
| */ | ||
| export let placementName: PlacementName = 'reuters_desktop_native_1'; | ||
| export let placementName: PlacementName; | ||
| export let adType: AdType; | ||
| /** | ||
| * The unique slot Id from FreeStar dashboard. | ||
| * @TODO Unclear at what level this bit of config is used with placements... | ||
| */ | ||
| export let dataFreestarAd: string = '__970x250'; | ||
| /** Add an ID to target with SCSS. */ | ||
| export let id: string = ''; | ||
| /** Add a class to target with SCSS. */ | ||
| let cls: string = 'my-12'; | ||
| export { cls as class }; | ||
| import { onMount } from 'svelte'; | ||
| import Block from '../Block/Block.svelte'; | ||
| const random4 = () => | ||
| Math.floor((1 + Math.random()) * 0x10000) | ||
| .toString(16) | ||
| .substring(1); | ||
| const randomAdId = 'ad-' + random4() + random4(); | ||
| const getAdType = (placementName: PlacementName) => { | ||
| switch (placementName) { | ||
| // case 'reuters_desktop_leaderboard_atf': | ||
| // case 'reuters_mobile_leaderboard': | ||
| // return 'leaderboard'; | ||
| case 'reuters_sponsorlogo': | ||
| return 'Sponsorlogo'; | ||
| case 'reuters_mobile_mpu_1': | ||
| return 'mpu'; | ||
| default: | ||
| return 'native'; | ||
| } | ||
| }; | ||
| const adId = getRandomAdId(); | ||
| onMount(() => { | ||
| const urlParams = new URLSearchParams(window.location.search); | ||
| const adstest = urlParams.get('adstest'); | ||
| window.graphicsAdQueue = window.graphicsAdQueue || []; | ||
| window.graphicsAdQueue.push({ | ||
| placementName, | ||
| slotId: randomAdId, | ||
| type: getAdType(placementName), | ||
| graphicId: window.location.pathname, | ||
| adstest, | ||
| slotId: adId, | ||
| targeting: { | ||
| div_id: adId, | ||
| type: adType, | ||
| }, | ||
| }); | ||
| }); | ||
| </script> | ||
|
|
||
| <!-- @component `AdSlot` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-AdSlot--default) --> | ||
| <Block id="{id}" class="freestar-adslot {cls}"> | ||
| <div class="ad-block"> | ||
| <div class="ad-label">Advertisement · Scroll to continue</div> | ||
| <div class="ad-container"> | ||
| <div class="ad-slot__inner"> | ||
| <div> | ||
| <div | ||
| data-freestar-ad="{dataFreestarAd || null}" | ||
| id="{randomAdId}" | ||
| ></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Block> | ||
|
|
||
| <style lang="scss"> | ||
| div.ad-block { | ||
| border-bottom: 1px solid var(--theme-colour-brand-rules); | ||
| border-top: 1px solid var(--theme-colour-brand-rules); | ||
| div.ad-label { | ||
| font-family: Knowledge, 'Source Sans Pro', Arial, Helvetica, sans-serif; | ||
| font-size: 14px; | ||
| margin: 6px 0; | ||
| line-height: 1.333; | ||
| color: var(--theme-colour-text-secondary); | ||
| width: 100%; | ||
| text-align: center; | ||
| } | ||
| div.ad-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| min-height: 415px; | ||
| @media (max-width: 767.9px) { | ||
| min-height: 320px; | ||
| } | ||
| div.ad-slot__inner { | ||
| margin: auto 0; | ||
| width: 100%; | ||
| max-width: 100%; | ||
| flex: unset; | ||
| & > div { | ||
| display: block; | ||
| div[data-freestar-ad] { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </style> | ||
| <div data-freestar-ad="{dataFreestarAd || null}" id="{adId}"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <script> | ||
| import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; | ||
| // @ts-ignore | ||
| import componentDocs from './stories/docs/component.md?raw'; | ||
| import AdScripts from './AdScripts.svelte'; | ||
| import InlineAd from './InlineAd.svelte'; | ||
| import { withComponentDocs } from '$docs/utils/withParams.js'; | ||
| const meta = { | ||
| title: 'Components/InlineAd', | ||
| component: InlineAd, | ||
| ...withComponentDocs(componentDocs), | ||
| }; | ||
| </script> | ||
|
|
||
| <Meta title="Components/InlineAd" {...meta} /> | ||
|
|
||
| <Template let:args> | ||
| <div> | ||
| <AdScripts /> | ||
| <InlineAd /> | ||
| <InlineAd /> | ||
| </div> | ||
| </Template> | ||
|
|
||
| <Story name="Default" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <script lang="ts"> | ||
| import Block from '../Block/Block.svelte'; | ||
| import { DesktopPlacementName } from './@types/ads'; | ||
| import ResponsiveAd from './ResponsiveAd.svelte'; | ||
| /** Add an ID to target with SCSS. */ | ||
| export let id: string = ''; | ||
| /** Add a class to target with SCSS. */ | ||
| let cls: string = 'my-12'; | ||
| export { cls as class }; | ||
| const desktopPlacementName: DesktopPlacementName = 'reuters_desktop_native_1'; | ||
| </script> | ||
|
|
||
| <!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InlineAd--default) --> | ||
| <Block id="{id}" class="freestar-adslot {cls}"> | ||
| <div class="ad-block"> | ||
| <div class="ad-label">Advertisement · Scroll to continue</div> | ||
| <div class="ad-container"> | ||
| <div class="ad-slot__inner"> | ||
| <div> | ||
| <ResponsiveAd desktopPlacementName="{desktopPlacementName}" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Block> | ||
|
|
||
| <style lang="scss"> | ||
| div.ad-block { | ||
| border-bottom: 1px solid var(--theme-colour-brand-rules); | ||
| border-top: 1px solid var(--theme-colour-brand-rules); | ||
| div.ad-label { | ||
| font-family: Knowledge, 'Source Sans Pro', Arial, Helvetica, sans-serif; | ||
| font-size: 14px; | ||
| margin: 6px 0; | ||
| line-height: 1.333; | ||
| color: var(--theme-colour-text-secondary); | ||
| width: 100%; | ||
| text-align: center; | ||
| } | ||
| div.ad-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| min-height: 415px; | ||
| @media (max-width: 767.9px) { | ||
| min-height: 320px; | ||
| } | ||
| div.ad-slot__inner { | ||
| margin: auto 0; | ||
| width: 100%; | ||
| max-width: 100%; | ||
| flex: unset; | ||
| & > div { | ||
| display: block; | ||
| :global(div[data-freestar-ad]) { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.