Merge pull request #101 from reuters-graphics/greg-ads

WIP Freestar Ads

.eslintrc.cjs

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  ignorePatterns: ['node_modules', 'docs/**'],
+  ignorePatterns: ['node_modules', 'docs/**', '.eslintrc.cjs'],
   extends: ['standard', 'plugin:svelte/recommended'],
   plugins: ['@typescript-eslint'],
   parserOptions: {

package.json

@@ -98,12 +98,12 @@
     "rimraf": "^5.0.0",
     "sass": "^1.65.1",
     "storybook": "^7.4.2",
-    "svelte": "^4.2.0",
+    "svelte": "^4.2.8",
     "svelte-loader": "^3.1.9",
-    "svelte-preprocess": "^5.0.4",
+    "svelte-preprocess": "^5.1.3",
-    "svelte2tsx": "^0.6.21",
+    "svelte2tsx": "^0.6.27",
     "tiny-glob": "^0.2.9",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "vite": "^4.4.9"
   },
   "dependencies": {
@@ -122,6 +122,7 @@
     "proper-url-join": "^2.1.1",
     "pym.js": "^1.3.2",
     "slugify": "^1.6.5",
+    "standard": "^17.1.0",
     "svelte-fa": "^2.4.0",
     "svelte-intersection-observer": "^0.10.0",
     "svelte-search": "^2.0.1",
@@ -132,6 +133,12 @@
     "./actions/cssVariables": "./dist/actions/cssVariables/index.js",
     "./actions/resizeObserver": "./dist/actions/resizeObserver/index.js",
     "./components/@types/global.ts": "./dist/components/@types/global.ts",
+    "./components/AdSlot/AdScripts.svelte": "./dist/components/AdSlot/AdScripts.svelte",
+    "./components/AdSlot/AdSlot.svelte": "./dist/components/AdSlot/AdSlot.svelte",
+    "./components/AdSlot/adScripts/bootstrap.ts": "./dist/components/AdSlot/adScripts/bootstrap.ts",
+    "./components/AdSlot/adScripts/getParameterByName.ts": "./dist/components/AdSlot/adScripts/getParameterByName.ts",
+    "./components/AdSlot/adScripts/ias.ts": "./dist/components/AdSlot/adScripts/ias.ts",
+    "./components/AdSlot/adScripts/loadScript.ts": "./dist/components/AdSlot/adScripts/loadScript.ts",
     "./components/Analytics/Analytics.svelte": "./dist/components/Analytics/Analytics.svelte",
     "./components/Analytics/providers/chartbeat.ts": "./dist/components/Analytics/providers/chartbeat.ts",
     "./components/Analytics/providers/ga.ts": "./dist/components/Analytics/providers/ga.ts",

src/components/AdSlot/AdScripts.svelte

@@ -0,0 +1,30 @@
+<script>
+  import { onMount } from 'svelte';
+  import { loadBootstrap } from './adScripts/bootstrap';
+  import { loadScript } from './adScripts/loadScript';
+
+  onMount(() => {
+    window.graphicsAdQueue = window.graphicsAdQueue || [];
+    loadScript(
+      'https://graphics.thomsonreuters.com/cdn/js/bootstrap.static.js',
+      loadBootstrap
+    );
+  });
+</script>
+
+<svelte:head>
+  <link rel="preconnect" href="https://a.pub.network/" crossorigin="" />
+  <link rel="preconnect" href="https://b.pub.network/" crossorigin="" />
+  <link rel="preconnect" href="https://c.pub.network/" crossorigin="" />
+  <link rel="preconnect" href="https://d.pub.network/" crossorigin="" />
+  <link rel="preconnect" href="https://c.amazon-adsystem.com" crossorigin="" />
+  <link rel="preconnect" href="https://s.amazon-adsystem.com" crossorigin="" />
+  <link rel="preconnect" href="https://btloader.com/" crossorigin="" />
+  <link rel="preconnect" href="https://api.btloader.com/" crossorigin="" />
+  <link
+    rel="preconnect"
+    href="https://confiant-integrations.global.ssl.fastly.net"
+    crossorigin=""
+  />
+  <link rel="stylesheet" href="https://a.pub.network/reuters-com/cls.css" />
+</svelte:head>

src/components/AdSlot/AdSlot.stories.svelte

@@ -0,0 +1,50 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // Don't lose the "?raw" in markdown imports!
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import AdScripts from './AdScripts.svelte';
+  import AdSlot from './AdSlot.svelte';
+
+  import { withComponentDocs } from '$docs/utils/withParams.js';
+
+  const meta = {
+    title: 'Components/AdSlot',
+    component: AdSlot,
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      placementName: {
+        control: 'select',
+        options: [
+          'reuters_desktop_leaderboard_atf',
+          'reuters_desktop_native',
+          'reuters_desktop_canvas',
+        ],
+      },
+      dataFreestarAd: {
+        control: 'select',
+        options: ['__970x250'],
+      },
+    },
+  };
+</script>
+
+<Meta {...meta} />
+
+<Template let:args>
+  <div>
+    <AdScripts />
+    <AdSlot {...args} />
+    <AdSlot placementName="reuters_desktop_canvas" dataFreestarAd="__970x250" />
+  </div>
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    placementName: 'reuters_desktop_native_1',
+    dataFreestarAd: '__970x250',
+  }}"
+/>

src/components/AdSlot/AdSlot.svelte

@@ -0,0 +1,106 @@
+<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';
+
+  /**
+   * The unique placement name from FreeStar dashboard.
+   * @required
+   */
+  export let placementName: PlacementName = 'reuters_desktop_native_1';
+
+  /**
+   * The unique slot Id from FreeStar dashboard.
+   */
+  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';
+    }
+  };
+
+  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,
+    });
+  });
+</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 data-freestar-ad="{dataFreestarAd || null}" id="{randomAdId}"></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 {
+      min-height: 415px;
+      @media (max-width: 767.9px) {
+        min-height: 320px;
+      }
+      & > div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+</style>

src/components/AdSlot/adScripts/bootstrap.ts

@@ -0,0 +1,85 @@
+import getParameterByName from './getParameterByName';
+import Ias from './ias';
+import { loadScript } from './loadScript';
+
+const ONETRUST_LOGS = 'ot_logs';
+const ONETRUST_GEOLOCATION_MOCK = 'ot_geolocation_mock';
+const ONETRUST_SCRIPT_ID = '38cb75bd-fbe1-4ac8-b4af-e531ab368caf-test';
+
+export const loadBootstrap = () => {
+  (<any>window).freestar = (<any>window).freestar || {};
+  const freestar = (<any>window).freestar;
+  freestar.debug = true;
+  freestar.queue = freestar.queue || [];
+  freestar.config = freestar.config || {};
+  freestar.config.enabled_slots = [];
+  freestar.initCallback = function() {
+    freestar.config.enabled_slots.length === 0 ?
+      (freestar.initCallbackCalled = false) :
+      freestar.newAdSlots(freestar.config.enabled_slots);
+  };
+
+  // Ask Rachel
+  freestar.config.channel = '/4735792/reuters.com/home';
+
+  (<any>window).initBootstrap(
+    {
+      onetrust_logs: getParameterByName(ONETRUST_LOGS) || 'false',
+      geolocation_mock:
+        getParameterByName(ONETRUST_GEOLOCATION_MOCK) || 'default',
+      onetrust_script_id: ONETRUST_SCRIPT_ID,
+    },
+    (onetrustResponse) => {
+      const iasPromise = Ias();
+
+      // Ask Thea about Permutive implementation (considering there are no logged in users on Graphics)
+      // Should we use Permutive at all?
+      // Should we import ArcP SDK to graphics to get the same user as logged in on RCom?
+      return Promise.all([iasPromise]).then((responses) => {
+        const [iasResponse] = responses;
+
+        return {
+          ...onetrustResponse,
+          ias: iasResponse,
+        };
+      });
+    }
+  );
+
+  (<any>window).bootstrap.getResults((result) => {
+    // Load Freestar script
+    loadScript('https://a.pub.network/reuters-com/pubfig.min.js');
+
+    // Set GAM
+    (<any>window).googletag = (<any>window).googletag || { cmd: [] };
+    (<any>window).googletag.cmd.push(() => {
+      (<any>window).googletag.pubads().enableSingleRequest();
+      (<any>window).googletag.pubads().enableAsyncRendering();
+      (<any>window).googletag.pubads().collapseEmptyDivs(true);
+
+      // Global Ads test targeting
+      const adstest = new URL(document.location.href).searchParams.get('adstest');
+      if (adstest) {
+        (<any>window).googletag.pubads().setTargeting('adstest', adstest);
+      }
+
+      // Ask Rachel about targeting
+      const template = (<any>document.querySelector('meta[name="ad:template"]'))?.content;
+      if (template) {
+        (<any>window).googletag.pubads().setTargeting('template', template);
+      }
+    });
+
+    if (!Array.isArray((<any>window).graphicsAdQueue)) {
+      console.error('Ad queue not initialized!');
+    }
+
+    freestar.queue.push(function() {
+      freestar.newAdSlots((<any>window).graphicsAdQueue || [], 'foobar');
+    });
+
+    freestar.queue.push(function() {
+      (<any>window).googletag.pubads().set('page_url', 'https://www.reuters.com/'); // This line should only be used for testing
+    });
+  });
+};

src/components/AdSlot/adScripts/getParameterByName.ts

@@ -0,0 +1,12 @@
+export default (name: string, url = window.location.href) => {
+  // eslint-disable-next-line no-useless-escape
+  name = name.replace(/[\[\]]/g, '\\$&');
+  const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
+  const results = regex.exec(url);
+
+  if (!results) return null;
+
+  if (!results[2]) return '';
+
+  return decodeURIComponent(results[2].replace(/\+/g, ' '));
+};

src/components/AdSlot/adScripts/ias.ts

@@ -0,0 +1,27 @@
+const IAS_REQUEST_TIMEOUT = 600;
+
+export default () => {
+  return new Promise((resolve) => {
+    const timerId = setTimeout(() => {
+      resolve('Resolved with timeout');
+    }, IAS_REQUEST_TIMEOUT);
+
+    const setupIAS = () => {
+      clearTimeout(timerId);
+      (<any>window).__iasPET = (<any>window).__iasPET || {};
+      (<any>window).__iasPET.queue = (<any>window).__iasPET.queue || [];
+      (<any>window).__iasPET.pubId = '931336'; // Ask Rachel
+      resolve('loaded');
+    };
+
+    // Set up IAS pet.js
+    const script = document.createElement('script');
+    script.src = '//static.adsafeprotected.com/iasPET.1.js';
+    script.setAttribute('async', 'async');
+    document.head.appendChild(script);
+    script.onload = setupIAS;
+    script.onerror = () => {
+      resolve('error');
+    };
+  });
+};

src/components/AdSlot/adScripts/loadScript.ts

@@ -0,0 +1,6 @@
+export const loadScript = (src: string, onload?: () => void) => {
+  const script = document.createElement('script');
+  script.addEventListener('load', onload);
+  script.src = src;
+  document.head.append(script);
+};

src/components/AdSlot/stories/docs/component.md

@@ -0,0 +1,29 @@
+Display a FreeStar Ad Slot
+
+Note: You must use this domain to access the story book:
+`http://localhost.arcpublishing.com:3000`
+
+This domain has been whitelisted on the Ad server. To setup the domain locally, add the following line to `/etc/hosts`:
+
+```
+127.0.0.1 localhost localhost.arcpublishing.com
+```
+
+```svelte
+<script>
+  import { AdSlot, AdScripts } from '@reuters-graphics/graphics-components';
+</script>
+
+<!-- Include only ONCE per page -->
+<AdScripts />
+
+<AdSlot
+  placementName="reuters_desktop_native"
+  slotId="reuters_desktop_native"
+/>
+
+<AdSlot
+  placementName="reuters_desktop_native"
+  slotId="reuters_desktop_native"
+/>
+```

src/components/Article/Article.svelte

@@ -45,7 +45,7 @@
 <main>
   <article
     id="{id}"
-    class:embedded="{embedded}"
+    class:embedded
     role="{role}"
     use:cssVariables="{columnWidthVars}"
   >

src/components/Headline/stories/graphic.svelte

@@ -650,6 +650,7 @@
 <!-- End ai2html - 2023-08-23 14:09 -->
 
 <!-- Generated by ai2html v0.100.0 - 2023-08-23 14:09 -->
+
 <!-- ai file: graphic.ai -->
 <!-- svelte-ignore css-unused-selector -->
 <style lang="scss">

src/components/HeroHeadline/stories/graphics/quakemap.svelte

@@ -445,6 +445,7 @@
 <!-- End ai2html - 2022-06-24 21:49 -->
 
 <!-- Generated by ai2html v0.100.0 - 2022-06-24 21:49 -->
+
 <!-- ai file: quake-map-top.ai -->
 <style lang="scss">
   #g-quake-map-top-box,

src/globals.d.ts

@@ -17,6 +17,8 @@ declare global {
     _sf_async_config: ChartbeatConfig,
     /** Chartbeat method */
     pSUPERFLY: (config: { path: string, title: string }) => void,
+    /** Graphics ads */
+    graphicsAdQueue: any[],
   }
 }
 

src/index.js

@@ -8,6 +8,8 @@ export {
   registerPageview
 } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';
+export { default as AdScripts } from './components/AdSlot/AdScripts.svelte';
+export { default as AdSlot } from './components/AdSlot/AdSlot.svelte';
 export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
 export { default as Block } from './components/Block/Block.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';