docs: updated gpt examples

index.html

@@ -23,7 +23,7 @@
     </div>
   </section>
   <section class="grid grid-cols-2 gap-4">
-    <a href="./playground/local-dev/index.html"
+    <a href="/playground/local-dev/index.html"
       class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
       <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
         Local Development
@@ -32,7 +32,7 @@ <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
         Development demo
       </p>
     </a>
-    <a href="./playground/gpt/index.html"
+    <a href="/playground/gpt/index.html"
       class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
       <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
         GPT
@@ -41,7 +41,7 @@ <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
         Showcase how to integrate with Google Publisher Tags.
       </p>
     </a>
-    <a href="/playground/gpt/index.html"
+    <a href=""
       class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
       <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
         Livewrapped

playground/gpt/config.ts

@@ -5,19 +5,12 @@ export default {
         {
             format: AdvantageFormatName.TopScroll,
             setup: () => {
-                return new Promise<void>((resolve, reject) => {
-                    const queryParams = new URLSearchParams(
-                        window.location.search
-                    );
-                    const simulateIntegrationError = queryParams.get(
-                        "simulateIntegrationError"
-                    );
+                return new Promise<void>((resolve) => {
+                    /* Setup your site to accomodate the topscroll format here.
+                    Perhaps you might need to hide a sticky header menu or similar. */
 
-                    if (simulateIntegrationError === "true") {
-                        reject();
-                    } else {
-                        resolve();
-                    }
+                    // call resolve when done
+                    resolve();
                 });
             }
             /*
@@ -28,6 +21,18 @@ export default {
                 console.log("Resetting top scroll format");
             }
             */
+        },
+        {
+            format: AdvantageFormatName.Midscroll,
+            setup: () => {
+                return new Promise<void>((resolve) => {
+                    /* Setup your site to accomodate the Midscroll format here.
+                    Perhaps you might need to adjust the wrapper to occupy 100% of page width or similar. */
+
+                    // call resolve when done
+                    resolve();
+                });
+            }
         }
     ]
 };

playground/gpt/index.html

@@ -15,6 +15,10 @@
             googletag
                 .defineSlot('/5374/TV2no/marked/test/madington', [10, 10], 'banner-ad')
                 .addService(googletag.pubads());
+            // Define an ad slot for div with id "middle-of-page".
+            googletag
+                .defineSlot('/5374/TV2no/marked/test/madington', [1, 1], 'middle-of-page-ad')
+                .addService(googletag.pubads());
             googletag.enableServices();
         });
     </script>
@@ -336,23 +340,20 @@ <h2 class="sans-serif text-xl font-bold mb-4">
             </article>
         </section>
     </div>
-    <advantage-wrapper exclude-formats="TOPSCROLL,MIDSCROLL">
+    <advantage-wrapper>
         <div slot="advantage-ad-slot">
-            <iframe src="./topscroll.html" title="advantage-ad" style="border: 0; width: 0; height: 0"
-                scrolling="no"></iframe>
+            <!-- START / This is an ordinary GPT slot  -->
+            <div id="middle-of-page-ad">
+                <script>
+                    googletag.cmd.push(() => {
+                        // Request and render an ad for the "middle-of-page-ad" slot.
+                        googletag.display("middle-of-page-ad");
+                    });
+                </script>
+            </div>
+            <!-- / END -->
         </div>
     </advantage-wrapper>
-
-    <div id="ad-slot-to-be-wrapped" style="width: 100%">
-        <iframe id="midscroll" src="./midscroll.html" title="advantage-ad" style="
-                    display: block;
-                    border: 0;
-                    width: 320px;
-                    height: 320px;
-                    margin-left: auto;
-                    margin-right: auto;
-                " scrolling="no"></iframe>
-    </div>
     <div class="container mx-auto px-4 py-4">
         <section class="grid grid-cols-1 lg:gap-6 lg:grid-cols-2 lg:grid-rows-3">
             <article class="py-4">
@@ -652,19 +653,6 @@ <h2 class="sans-serif text-xl font-bold mb-4">
             </article>
         </section>
     </div>
-    <script>
-        // This is a helper function to wrap an ad slot element with an Advantage-wrapper
-        // The advantageCmdQueue will be executed by the Advantage-wrapper script when it is loaded
-        window.advantageCmdQueue = [
-            (advantageWrapAdSlotElement) => {
-                // advantageWrapAdSlotElement is a function that wraps an ad slot element with an Advantage-wrapper. It takes either a selector string or an HTMLElement as an argument.
-                // You can also pass an optional second argument to specify the formats to exclude for the wrapped ad slot.
-                advantageWrapAdSlotElement("#ad-slot-to-be-wrapped", [
-                    "topscroll"
-                ]);
-            }
-        ];
-    </script>
     <script type="module" src="./index.ts"></script>
 </body>
 

playground/gpt/index.ts

@@ -1,6 +1,4 @@
-import { Advantage } from "@src/advantage";
-import { AdvantageAdSlotResponder } from "@src/advantage/messaging/publisher-side";
-import localConfig from "./config";
+import { Advantage, AdvantageFormatName } from "@src/advantage";
 
 /* 
 
@@ -11,31 +9,38 @@ This is the code that the publisher should include in their website.
 const advantage = Advantage.getInstance();
 
 advantage.configure({
-    /* Load the configuration from a remote file. Use your own logic for resolving a config url */
-    configUrlResolver: () => {
-        /* You could use hostname or any other logic to determine the config file 
-        return `https://example.com/configs/${window.location.hostname}.js`;
-        */
-        return "./config.ts";
-    },
-    /* Or use a local configuration */
-    ...localConfig
-});
+    formatIntegrations: [
+        {
+            format: AdvantageFormatName.TopScroll,
+            setup: () => {
+                return new Promise<void>((resolve) => {
+                    /* Setup your site to accomodate the topscroll format here.
+                    Perhaps you might need to hide a sticky header menu or similar. */
 
-// Advantage Publisher API
-new AdvantageAdSlotResponder({
-    adSlotElement: document.querySelector("#custom")!,
-    formatRequestHandler: (format, elem) => {
-        return new Promise((resolve) => {
-            console.log("Received format request: ", format, elem);
-            resolve();
-        });
-    }
-});
+                    // call resolve when done
+                    resolve();
+                });
+            }
+            /*
+            onClose: () => {
+                console.log("Closing top scroll format");
+            }
+            onReset: () => {
+                console.log("Resetting top scroll format");
+            }
+            */
+        },
+        {
+            format: AdvantageFormatName.Midscroll,
+            setup: () => {
+                return new Promise<void>((resolve) => {
+                    /* Setup your site to accomodate the Midscroll format here.
+                    Perhaps you might need to adjust the wrapper to occupy 100% of page width or similar. */
 
-/*
-setTimeout(() => {
-    const midscroll = document.querySelector("#midscroll");
-    midscroll?.parentElement?.removeChild(midscroll);
-}, 5000);
-*/
+                    // call resolve when done
+                    resolve();
+                });
+            }
+        }
+    ]
+});