|
| 1 | +<!DOCTYPE html> |
| 2 | +<!-- |
| 3 | + @license |
| 4 | + Copyright 2022 Google LLC. All Rights Reserved. |
| 5 | + SPDX-License-Identifier: Apache-2.0 |
| 6 | +--> |
| 7 | +<html> |
| 8 | + <head> |
| 9 | + <meta charset="utf-8" /> |
| 10 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 11 | + <meta |
| 12 | + name="description" |
| 13 | + content="Customize the web interstitial continue reading trigger and button." |
| 14 | + /> |
| 15 | + <title>Configure web interstitial continue reading button</title> |
| 16 | + <script |
| 17 | + async |
| 18 | + src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" |
| 19 | + crossorigin="anonymous" |
| 20 | + ></script> |
| 21 | + <script> |
| 22 | + window.googletag = window.googletag || { cmd: [] }; |
| 23 | + |
| 24 | + let interstitialSlot; |
| 25 | + |
| 26 | + googletag.cmd.push(() => { |
| 27 | + // Define a web interstitial ad slot. |
| 28 | + interstitialSlot = googletag.defineOutOfPageSlot( |
| 29 | + "/6355419/Travel/Europe/France/Paris", |
| 30 | + googletag.enums.OutOfPageFormat.INTERSTITIAL, |
| 31 | + ); |
| 32 | + |
| 33 | + // Slot returns null if the page or device does not support interstitials. |
| 34 | + if (interstitialSlot) { |
| 35 | + // Enable optional interstitial triggers and register the slot. |
| 36 | + interstitialSlot.addService(googletag.pubads()).setConfig({ |
| 37 | + interstitial: { |
| 38 | + triggers: { |
| 39 | + continueReading: true, |
| 40 | + }, |
| 41 | + }, |
| 42 | + // Note: Customizing the "View ad to continue" button text is not directly |
| 43 | + // supported by the GPT API. However, the button's font and color |
| 44 | + // (including text and background color) can be customized using |
| 45 | + // `continueButton` config options: |
| 46 | + continueButton: { |
| 47 | + font: "Arial", |
| 48 | + fontColor: "white", |
| 49 | + backgroundColor: "#1a73e8", |
| 50 | + // Specifying a targetId is optional. If set, the trigger is only |
| 51 | + // applied to that element; if omitted, it is applied to the whole page. |
| 52 | + // If set to an element ID that is not in the DOM, the trigger is not |
| 53 | + // activated, and the continueReading button is not displayed. |
| 54 | + targetId: "target-div-id", |
| 55 | + }, |
| 56 | + }); |
| 57 | + |
| 58 | + document.getElementById("status").textContent = "Interstitial is loading..."; |
| 59 | + |
| 60 | + // Add event listener to enable navigation once the interstitial loads. |
| 61 | + // If this event doesn't fire, try clearing local storage and refreshing |
| 62 | + // the page. |
| 63 | + googletag.pubads().addEventListener("slotOnload", (event) => { |
| 64 | + if (interstitialSlot === event.slot) { |
| 65 | + document.getElementById("status").textContent = "Interstitial is loaded."; |
| 66 | + } |
| 67 | + }); |
| 68 | + |
| 69 | + // By default, the detected language of the current page is used to render |
| 70 | + // interstitial UI elements. This behavior can be overridden by manually |
| 71 | + // specifying the document language: |
| 72 | + // googletag.pubads().set("document_language", "en"); |
| 73 | + } |
| 74 | + |
| 75 | + // Define static ad slots. |
| 76 | + googletag |
| 77 | + .defineSlot("/6355419/Travel/Europe", [728, 90], "banner-ad") |
| 78 | + .addService(googletag.pubads()); |
| 79 | + |
| 80 | + // Enable SRA. |
| 81 | + googletag.setConfig({ |
| 82 | + singleRequest: true, |
| 83 | + }); |
| 84 | + |
| 85 | + // Enable services. |
| 86 | + googletag.enableServices(); |
| 87 | + }); |
| 88 | + </script> |
| 89 | + <style> |
| 90 | + .banner-container { |
| 91 | + display: flex; |
| 92 | + justify-content: center; |
| 93 | + margin-bottom: 20px; |
| 94 | + } |
| 95 | + |
| 96 | + .column-layout { |
| 97 | + display: flex; |
| 98 | + gap: 20px; |
| 99 | + max-width: 1200px; |
| 100 | + margin: 0 auto; |
| 101 | + } |
| 102 | + |
| 103 | + .left-column { |
| 104 | + flex: 1; |
| 105 | + min-width: 150px; |
| 106 | + } |
| 107 | + |
| 108 | + .main-column { |
| 109 | + flex: 3; |
| 110 | + font-size: 1.25rem; |
| 111 | + min-height: 200vh; |
| 112 | + min-width: 300px; |
| 113 | + } |
| 114 | + |
| 115 | + .right-column { |
| 116 | + flex: 1; |
| 117 | + min-width: 150px; |
| 118 | + } |
| 119 | + </style> |
| 120 | + </head> |
| 121 | + <body> |
| 122 | + <div class="banner-container"> |
| 123 | + <div id="banner-ad" style="width: 728px; height: 90px"></div> |
| 124 | + </div> |
| 125 | + |
| 126 | + <div class="column-layout"> |
| 127 | + <div class="left-column"></div> |
| 128 | + |
| 129 | + <div class="main-column" id="target-div-id"> |
| 130 | + <span id="status">Web interstitial is not supported on this page.</span> |
| 131 | + <p> |
| 132 | + <!-- |
| 133 | + You can prevent specific links from triggering GPT-managed web |
| 134 | + interstials by adding a data-google-interstitial="false" attribute to |
| 135 | + the anchor element or any ancestor of the anchor element. |
| 136 | + --> |
| 137 | + <a data-google-interstitial="false" href="https://www.example.com/"> |
| 138 | + This link will never trigger an interstitial |
| 139 | + </a> |
| 140 | + </p> |
| 141 | + |
| 142 | + <h2>Article Title</h2> |
| 143 | + <p> |
| 144 | + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus consequat massa, |
| 145 | + vel ultrices nibh viverra id. Vestibulum leo arcu, malesuada sed suscipit vel, sagittis |
| 146 | + non ipsum. Nunc ultrices id dolor nec venenatis. Phasellus sit amet ultricies neque. |
| 147 | + Maecenas libero nisl, iaculis nec libero et, laoreet semper lacus. Morbi porta lorem sit |
| 148 | + amet luctus imperdiet. Phasellus at luctus nunc. Nam pretium leo eu ultricies finibus. Sed |
| 149 | + tortor purus, mattis non ligula eget, suscipit sodales odio. |
| 150 | + </p> |
| 151 | + <p> |
| 152 | + Sed vel feugiat tortor, quis semper mauris. Aliquam malesuada ligula et eros consectetur |
| 153 | + dictum. Fusce feugiat turpis ante, ut tempor tellus luctus eu. Nam convallis, nibh ut |
| 154 | + vehicula venenatis, felis ipsum vulputate quam, vitae pellentesque est est a ligula. |
| 155 | + Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce dignissim mi sed nisi |
| 156 | + semper, id ultricies nulla fringilla. Donec luctus tempus risus, nec commodo mauris |
| 157 | + venenatis quis. Vivamus efficitur velit sed odio congue, non consectetur dolor vehicula. |
| 158 | + </p> |
| 159 | + <p> |
| 160 | + Curabitur cursus urna in mi imperdiet ultricies. Maecenas imperdiet lacus et leo rutrum, |
| 161 | + non vehicula metus pharetra. Phasellus ante orci, aliquam sed fringilla eget, ultrices sed |
| 162 | + sem. Quisque blandit felis et porttitor tincidunt. Phasellus vel condimentum eros. Integer |
| 163 | + quam nulla, suscipit eu scelerisque tincidunt, placerat non sapien. In tempor a orci a |
| 164 | + bibendum. Pellentesque elementum, massa vitae bibendum varius, tortor ex suscipit ipsum, |
| 165 | + vitae maximus sapien ex at est. Fusce volutpat, massa at commodo vehicula, libero turpis |
| 166 | + rhoncus nulla, ac fermentum enim arcu vitae est. Suspendisse posuere eget lectus vitae |
| 167 | + rutrum. In quis diam sit amet augue venenatis aliquet. Suspendisse dictum vestibulum eros |
| 168 | + ac consequat. In eu lorem tellus. Praesent eget risus tempus, porta lectus sit amet, |
| 169 | + dapibus nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per |
| 170 | + inceptos himenaeos. Phasellus sit amet ultrices ex. |
| 171 | + </p> |
| 172 | + <p> |
| 173 | + Aliquam mi diam, consectetur et venenatis non, mollis vel nulla. Praesent egestas libero |
| 174 | + dui. Nullam posuere egestas lectus. Nam vel elementum lorem. In enim nisi, iaculis nec |
| 175 | + imperdiet a, auctor eget dui. Aenean pharetra lorem libero, vel commodo orci rutrum |
| 176 | + convallis. Suspendisse sed lacus id purus pulvinar pharetra sit amet id arcu. Quisque |
| 177 | + vitae faucibus risus, at molestie urna. Curabitur lobortis vel lacus vel faucibus. Sed |
| 178 | + vehicula auctor auctor. Suspendisse neque arcu, posuere eget dignissim ut, posuere at |
| 179 | + tellus. Cras suscipit egestas metus, non vestibulum mi aliquam nec. Nam nisi lacus, |
| 180 | + consectetur nec libero at, placerat feugiat turpis. Cras viverra nisi mauris, in |
| 181 | + sollicitudin risus bibendum et. Aliquam id dolor maximus, interdum est vel, placerat orci. |
| 182 | + </p> |
| 183 | + <p> |
| 184 | + Integer et ex viverra, tincidunt ligula ac, eleifend augue. Curabitur id egestas eros, et |
| 185 | + eleifend turpis. Vestibulum ac tortor ullamcorper, molestie orci quis, lobortis mauris. |
| 186 | + Suspendisse vehicula magna ac ipsum suscipit, eu dignissim erat dapibus. Morbi in orci |
| 187 | + ultrices, hendrerit risus sed, facilisis nulla. Pellentesque ante sem, pretium at aliquet |
| 188 | + vitae, convallis ac quam. In ultricies mollis elementum. In dignissim, sapien non placerat |
| 189 | + porta, enim sapien elementum ex, nec egestas mi velit a massa. Pellentesque eu condimentum |
| 190 | + quam, at molestie erat. Aliquam tincidunt placerat magna, ut gravida justo vehicula eu. |
| 191 | + Fusce scelerisque efficitur sagittis. |
| 192 | + </p> |
| 193 | + <p> |
| 194 | + Vestibulum vitae malesuada velit. Phasellus congue convallis blandit. Sed feugiat ante |
| 195 | + sem, non iaculis turpis eleifend et. Vivamus mauris urna, sodales vel semper sed, viverra |
| 196 | + quis arcu. Ut ornare lacus suscipit nisl elementum tincidunt. Pellentesque in elit et est |
| 197 | + ullamcorper commodo. Maecenas nec libero metus. Suspendisse ut leo id dui tincidunt |
| 198 | + consectetur ut nec elit. Proin nec libero rhoncus, consectetur leo et, dapibus nulla. |
| 199 | + </p> |
| 200 | + <p> |
| 201 | + Duis in fermentum eros, id scelerisque enim. Aliquam lobortis eu sem ac faucibus. Mauris |
| 202 | + nunc odio, faucibus at metus non, sagittis maximus turpis. Suspendisse lectus orci, |
| 203 | + tincidunt ac orci id, blandit finibus quam. Proin rhoncus neque non est ullamcorper |
| 204 | + tristique. Sed elementum ligula vel molestie tristique. Etiam sit amet tellus non purus |
| 205 | + mollis vulputate. Maecenas eu sodales nunc. Donec mollis sapien quis libero elementum |
| 206 | + placerat. Aenean ipsum nulla, dignissim vel pulvinar at, aliquam at massa. |
| 207 | + </p> |
| 208 | + <p> |
| 209 | + Pellentesque odio neque, blandit quis tortor in, ultricies lobortis purus. Suspendisse |
| 210 | + potenti. Etiam suscipit neque magna, sit amet accumsan purus malesuada ut. Quisque |
| 211 | + faucibus vitae turpis nec euismod. Sed aliquam velit eget consectetur maximus. Phasellus |
| 212 | + vitae consequat dui. Aliquam dapibus cursus lorem eu sodales. Aliquam id laoreet erat, sit |
| 213 | + amet luctus elit. |
| 214 | + </p> |
| 215 | + <p> |
| 216 | + Cras blandit consectetur risus eget aliquam. Phasellus consequat sem a sem fringilla |
| 217 | + placerat. Fusce at molestie nisi. Nullam ipsum elit, commodo at aliquam sit amet, sodales |
| 218 | + sed sem. Pellentesque massa tellus, interdum nec lacinia non, ullamcorper vel eros. |
| 219 | + Vestibulum id dui volutpat, ultrices ante eget, sollicitudin magna. Curabitur malesuada |
| 220 | + justo lectus, et pulvinar nulla vestibulum eget. Praesent quis leo ipsum. Nullam magna |
| 221 | + mauris, vestibulum vel ornare nec, aliquet faucibus justo. Donec ut elit elementum, |
| 222 | + posuere ex id, molestie dui. Phasellus tristique augue pellentesque eros volutpat, ac |
| 223 | + vestibulum urna scelerisque. Proin commodo sagittis urna, in dapibus tortor rutrum sed. |
| 224 | + Phasellus sit amet nisi diam. Sed fringilla massa eget euismod iaculis. Sed vulputate |
| 225 | + purus lorem, quis porttitor nulla maximus ac. |
| 226 | + </p> |
| 227 | + <p> |
| 228 | + Fusce bibendum interdum nibh, at pretium quam ornare sit amet. Maecenas eu maximus eros, |
| 229 | + pellentesque aliquam arcu. Vivamus tristique finibus sem, non porta diam rhoncus vitae. |
| 230 | + Praesent et blandit diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices |
| 231 | + posuere cubilia curae; Cras vestibulum mollis vestibulum. Integer ultrices sodales |
| 232 | + malesuada. Duis et nunc leo. In imperdiet vitae sapien nec sollicitudin. Mauris vitae ex |
| 233 | + maximus ex vulputate venenatis. |
| 234 | + </p> |
| 235 | + </div> |
| 236 | + |
| 237 | + <div class="right-column"></div> |
| 238 | + </div> |
| 239 | + <script> |
| 240 | + googletag.cmd.push(() => { |
| 241 | + // Ensure the first call to display comes after static ad slot |
| 242 | + // divs are defined. If you do not have any static ad slots, this |
| 243 | + // call can be made immediately after services are enabled. |
| 244 | + googletag.display(interstitialSlot); |
| 245 | + }); |
| 246 | + </script> |
| 247 | + </body> |
| 248 | +</html> |
0 commit comments