Working single Freestar Ad

src/components/AdSlot/AdSlot.stories.svelte

@@ -17,9 +17,9 @@
       placementName: {
         control: 'select',
         options: [
+          'reuters_desktop_leaderboard_atf',
           'reuters_desktop_native',
           'reuters_desktop_canvas',
-          'reuters_desktop_leaderboard_atf',
         ],
       },
       dataFreestarAd: {
@@ -34,12 +34,13 @@
 
 <Template let:args>
   <AdSlot {...args} />
+  <!-- <AdSlot placementName="reuters_desktop_canvas" dataFreestarAd="__970x250" /> Add a crown -->
 </Template>
 
 <Story
   name="Default"
   args="{{
-    placementName: 'reuters_desktop_canvas',
-    slotId: 'reuters_desktop_canvas',
+    placementName: 'reuters_desktop_leaderboard_atf',
+    dataFreestarAd: '__970x250',
   }}"
 />

src/components/AdSlot/AdSlot.svelte

@@ -47,33 +47,20 @@
     href="https://confiant-integrations.global.ssl.fastly.net"
     crossorigin=""
   />
+
   <!-- Below is a link to a CSS file that accounts for Cumulative Layout Shift, a new Core Web Vitals subset that Google uses to help rank your site in search -->
   <!-- The file is intended to eliminate the layout shifts that are seen when ads load into the page. If you don't want to use this, simply remove this file -->
   <!-- To find out more about CLS, visit https://web.dev/vitals/ -->
   <link rel="stylesheet" href="https://a.pub.network/reuters-com/cls.css" />
+
   <script
     id="btstrp"
-    src="https://graphics.thomsonreuters.com/cdn/js/bootstrap.static.js"></script>
+    src="https://graphics.thomsonreuters.com/cdn/js/bootstrap.static.js">
+  </script>
+
   <script type="text/javascript">
-    console.log('#GJ before freestar init', window.freestar);
-    var freestar = window.freestar || {};
-    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);
-    };
-
-    freestar.config.channel = '/4735792/reuters.com/home';
-
     console.log('#GJ svelte:head is about to be executed');
 
-    const ONETRUST_LOGS = 'ot_logs';
-    const ONETRUST_GEOLOCATION_MOCK = 'ot_geolocation_mock';
-    const ONETRUST_SCRIPT_ID = '38cb75bd-fbe1-4ac8-b4af-e531ab368caf-test';
-
     const getParameterByName = (name, url = window.location.href) => {
       // eslint-disable-next-line no-useless-escape
       name = name.replace(/[\[\]]/g, '\\$&');
@@ -136,6 +123,23 @@
       });
     }
 
+    console.log('#GJ before freestar init', window.freestar);
+    var freestar = window.freestar || {};
+    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);
+    };
+
+    freestar.config.channel = '/4735792/reuters.com/home';
+
+    const ONETRUST_LOGS = 'ot_logs';
+    const ONETRUST_GEOLOCATION_MOCK = 'ot_geolocation_mock';
+    const ONETRUST_SCRIPT_ID = '38cb75bd-fbe1-4ac8-b4af-e531ab368caf-test';
+
     var script = document.querySelector('#btstrp');
     script.addEventListener('load', function () {
       console.log('#GJ', btstrp, 'window.initBootstrap', window.initBootstrap);
@@ -215,24 +219,12 @@
         });
 
         console.log('#GJ adding ads', window.graphicsAdQueue);
-        /* freestar.queue.push(function() {
-          freestar.newAdSlots(window.graphicsAdQueue || [], 'foobar');
-        }) */
+        if (!Array.isArray(window.graphicsAdQueue)) {
+          console.error('Ad queue not initialized!');
+        }
 
         freestar.queue.push(function () {
-          freestar.newAdSlots(
-            [
-              {
-                placementName: 'reuters_desktop_leaderboard_atf',
-                slotId: 'reuters_desktop_leaderboard_atf_id',
-                targeting: {
-                  foo: 'bar',
-                  bar: 'baz',
-                },
-              },
-            ],
-            'foobar'
-          );
+          freestar.newAdSlots(window.graphicsAdQueue || [], 'foobar');
         });
 
         freestar.queue.push(function () {
@@ -253,10 +245,4 @@
 
 <Block id="{id}" cls="freestar-adslot {cls}">
   <div data-freestar-ad="{dataFreestarAd || null}" id="{placementName}"></div>
-
-  <!-- Tag ID: reuters_desktop_leaderboard_atf -->
-  <div
-    data-freestar-ad="__970x250"
-    id="reuters_desktop_leaderboard_atf_id"
-  ></div>
 </Block>

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

@@ -1,5 +1,14 @@
 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 please add the following line to `/etc/hosts`:
+
+```
+127.0.0.1	localhost localhost.arcpublishing.com
+```
+
 ```svelte
 <script>
   import { AdSlot } from '@reuters-graphics/graphics-components';