Fix shadow DOM sample and update dist/

PiperOrigin-RevId: 651396866
googleads · Jul 11, 2024 · 10ad315 · 10ad315
1 parent b2b1b96
commit 10ad315
Show file tree

Hide file tree

Showing 12 changed files with 334 additions and 25 deletions.
diff --git a/.eleventy.ts b/.eleventy.ts
@@ -56,10 +56,15 @@ module.exports = (eleventyConfig: UserConfig) => {
             const htmlContent =
                 fs.readFileSync(htmlPath)
                     .toString()
+                    // Replace <script> tag with the parsed head JS.
                     .replace(
                         /<script.*?src="\/sample.ts"><\/script>/gm,
                         `${parsedJs.head}`)
-                    .replace(/<\/body>/gm, `${parsedJs.body}</body>`);
+                    // Append parsed body JS to the <body> tag.
+                    .replace(/<\/body>/gm, `${parsedJs.body}</body>`)
+                    // If there are now 2 consecutive script tags in the body,
+                    // combine them into one.
+                    .replace(/(<body>.*)<\/script>\s+<script>(.*)/s, '$1\n$2');
 
             fs.writeFileSync(htmlPath, await formatCode(htmlContent, htmlPath));
             fs.unlinkSync(jsPath);

diff --git a/dist/shadow-dom/js/demo.details b/dist/shadow-dom/js/demo.details
@@ -0,0 +1,4 @@
+name: Display ads in the shadow DOM
+description: Use GPT to request and render ads in the shadow DOM.
+authors:
+  - Google Publisher Tag Team
diff --git a/dist/shadow-dom/js/demo.html b/dist/shadow-dom/js/demo.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2022 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Use GPT to request and render ads in the shadow DOM." />
+    <title>Display ads in the shadow DOM</title>
+    <script
+      async
+      src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
+      crossorigin="anonymous"
+    ></script>
+    <script>
+      window.googletag = window.googletag || { cmd: [] };
+
+      let adSlot;
+
+      googletag.cmd.push(() => {
+        // Define an ad slot for the "ad-slot" div.
+        adSlot = googletag
+          .defineSlot("/6355419/Travel/Europe", [300, 250], "ad-slot")
+          .addService(googletag.pubads());
+
+        // Enable the PubAdsService.
+        googletag.enableServices();
+      });
+
+      document.addEventListener("DOMContentLoaded", (event) => {
+        // Register click handlers.
+        document.querySelector("#clear").addEventListener("click", (event) => {
+          googletag.cmd.push(() => {
+            googletag.pubads().clear([adSlot]);
+          });
+        });
+
+        document.querySelector("#refresh").addEventListener("click", (event) => {
+          googletag.cmd.push(() => {
+            googletag.pubads().refresh([adSlot]);
+          });
+        });
+      });
+    </script>
+    <style>
+      body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        row-gap: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="host"></div>
+    <div class="controls">
+      <button id="clear">Clear ad</button>
+      <button id="refresh">Refresh ad</button>
+    </div>
+    <script>
+      // Attach a shadow DOM to the host element and insert an ad container.
+      // Ensure the shadow DOM is in open mode, to allow GPT access.
+      const shadow = document.querySelector("#host").attachShadow({ mode: "open" });
+      const adContainer = document.createElement("div");
+      adContainer.id = "ad-slot";
+      adContainer.style.cssText = "height: 250px; width: 300px;";
+      shadow.appendChild(adContainer);
+
+      googletag.cmd.push(() => {
+        // Locate the ad container in the shadow DOM and display an ad in it.
+        const shadowRoot = document.querySelector("#host").shadowRoot;
+        googletag.display(shadowRoot.querySelector("#ad-slot"));
+      });
+    </script>
+  </body>
+</html>
diff --git a/dist/shadow-dom/legacyjs/demo.details b/dist/shadow-dom/legacyjs/demo.details
@@ -0,0 +1,4 @@
+name: Display ads in the shadow DOM
+description: Use GPT to request and render ads in the shadow DOM.
+authors:
+  - Google Publisher Tag Team
diff --git a/dist/shadow-dom/legacyjs/demo.html b/dist/shadow-dom/legacyjs/demo.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2022 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Use GPT to request and render ads in the shadow DOM." />
+    <title>Display ads in the shadow DOM</title>
+    <script
+      async
+      src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
+      crossorigin="anonymous"
+    ></script>
+    <script>
+      window.googletag = window.googletag || { cmd: [] };
+
+      var adSlot;
+
+      googletag.cmd.push(function () {
+        // Define an ad slot for the "ad-slot" div.
+        adSlot = googletag
+          .defineSlot("/6355419/Travel/Europe", [300, 250], "ad-slot")
+          .addService(googletag.pubads());
+
+        // Enable the PubAdsService.
+        googletag.enableServices();
+      });
+
+      document.addEventListener("DOMContentLoaded", function (event) {
+        // Register click handlers.
+        document.querySelector("#clear").addEventListener("click", function (event) {
+          googletag.cmd.push(function () {
+            googletag.pubads().clear([adSlot]);
+          });
+        });
+
+        document.querySelector("#refresh").addEventListener("click", function (event) {
+          googletag.cmd.push(function () {
+            googletag.pubads().refresh([adSlot]);
+          });
+        });
+      });
+    </script>
+    <style>
+      body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        row-gap: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="host"></div>
+    <div class="controls">
+      <button id="clear">Clear ad</button>
+      <button id="refresh">Refresh ad</button>
+    </div>
+    <script>
+      // Attach a shadow DOM to the host element and insert an ad container.
+      // Ensure the shadow DOM is in open mode, to allow GPT access.
+      const shadow = document.querySelector("#host").attachShadow({ mode: "open" });
+      const adContainer = document.createElement("div");
+      adContainer.id = "ad-slot";
+      adContainer.style.cssText = "height: 250px; width: 300px;";
+      shadow.appendChild(adContainer);
+
+      googletag.cmd.push(function () {
+        // Locate the ad container in the shadow DOM and display an ad in it.
+        var shadowRoot = document.querySelector("#host").shadowRoot;
+        googletag.display(shadowRoot.querySelector("#ad-slot"));
+      });
+    </script>
+  </body>
+</html>
diff --git a/dist/shadow-dom/sample.yaml b/dist/shadow-dom/sample.yaml
@@ -0,0 +1,8 @@
+name: Display ads in the shadow DOM
+description: Use GPT to request and render ads in the shadow DOM.
+authors:
+  - Google Publisher Tag Team
+skill: Advanced
+keywords:
+  - Shadow DOM
+  - Web Components
diff --git a/dist/shadow-dom/ts/index.html b/dist/shadow-dom/ts/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<!--
+ @license
+ Copyright 2022 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Use GPT to request and render ads in the shadow DOM." />
+    <title>Display ads in the shadow DOM</title>
+    <script
+      async
+      src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
+      crossorigin="anonymous"
+    ></script>
+    <script type="module" src="/sample.ts"></script>
+    <style>
+      body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        row-gap: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="host"></div>
+    <div class="controls">
+      <button id="clear">Clear ad</button>
+      <button id="refresh">Refresh ad</button>
+    </div>
+    <script>
+      // Attach a shadow DOM to the host element and insert an ad container.
+      // Ensure the shadow DOM is in open mode, to allow GPT access.
+      const shadow = document.querySelector("#host").attachShadow({ mode: "open" });
+      const adContainer = document.createElement("div");
+      adContainer.id = "ad-slot";
+      adContainer.style.cssText = "height: 250px; width: 300px;";
+      shadow.appendChild(adContainer);
+    </script>
+  </body>
+</html>
diff --git a/dist/shadow-dom/ts/package.json b/dist/shadow-dom/ts/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "shadow-dom",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "private": true,
+  "description": "Use GPT to request and render ads in the shadow DOM.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/googleads/google-publisher-tag-samples"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/google-publisher-tag": "^1.20240701.0",
+    "typescript": "^5.5.3",
+    "vite": "^4.5.3"
+  },
+  "dependencies": {}
+}
diff --git a/dist/shadow-dom/ts/sample.ts b/dist/shadow-dom/ts/sample.ts
@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Using @types/google-publisher-tag
+// https://www.npmjs.com/package/@types/google-publisher-tag
+
+window.googletag = window.googletag || { cmd: [] };
+
+let adSlot: googletag.Slot;
+
+googletag.cmd.push(() => {
+  // Define an ad slot for the "ad-slot" div.
+  adSlot = googletag
+    .defineSlot("/6355419/Travel/Europe", [300, 250], "ad-slot")!
+    .addService(googletag.pubads());
+
+  // Enable the PubAdsService.
+  googletag.enableServices();
+
+  // Locate the ad container in the shadow DOM and display an ad in it.
+  const shadowRoot = document.querySelector("#host")!.shadowRoot!;
+  googletag.display(shadowRoot.querySelector("#ad-slot")!);
+});
+
+document.addEventListener("DOMContentLoaded", (event) => {
+  // Register click handlers.
+  document.querySelector("#clear")!.addEventListener("click", (event) => {
+    googletag.cmd.push(() => {
+      googletag.pubads().clear([adSlot]);
+    });
+  });
+
+  document.querySelector("#refresh")!.addEventListener("click", (event) => {
+    googletag.cmd.push(() => {
+      googletag.pubads().refresh([adSlot]);
+    });
+  });
+});
diff --git a/dist/shadow-dom/ts/tsconfig.json b/dist/shadow-dom/ts/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "moduleResolution": "Node",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  }
+}
diff --git a/samples/shadow-dom/index.njk b/samples/shadow-dom/index.njk
@@ -5,6 +5,15 @@
     <button id="clear">Clear ad</button>
     <button id="refresh">Refresh ad</button>
   </div>
+  <script>
+    // Attach a shadow DOM to the host element and insert an ad container.
+    // Ensure the shadow DOM is in open mode, to allow GPT access.
+    const shadow = document.querySelector('#host').attachShadow({mode: 'open'});
+    const adContainer = document.createElement('div');
+    adContainer.id = 'ad-slot';
+    adContainer.style.cssText = 'height: 250px; width: 300px;';
+    shadow.appendChild(adContainer);
+  </script>
 {% endblock %}
 {% block styles %}
   body {