{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"1"},"maxLevel":{"value":"7"}},"macroMetadata":{"macroId":{"value":"879d318b928ded83482256169c2eea7f"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"3dafed0f-89e9-41ee-901f-1e33c6a5f45c"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"This integration guide applies if AdEngine needs to run on Single-Page-Application (SPA for short) type of pages. When the head code is not reloaded, and only content of the page changes due to user action.","type":"text"}]},{"type":"paragraph","content":[{"text":"This guide is based on ","type":"text"},{"text":"react.js","type":"text","marks":[{"type":"em"}]},{"text":" implementations. It should fit all others, however, please take into consideration that some elements of integration might differ.","type":"text"}]},{"type":"paragraph","content":[{"text":"For this integration guide, we assume the example of a website with the following two ads on every page:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"\"Top Leaderboard\"","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"ad-unit-name: topleaderboard","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"div-name: adngin-topleaderboard-0","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"\"Sidebar_2\"","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"ad-unit-name: sidebar_2","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"div-name: adngin-sidebar_2-0","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Head Configuration","type":"text"}]},{"type":"paragraph","content":[{"text":"The head section modifications are the essential part of this integration. Without adding the AdEngine script and configuration to the head, the ads won't render. In SPA type of pages, it's very important due to the specifications of those pages where the head config is not reloaded.","type":"text"}]},{"type":"paragraph","content":[{"text":"To have an optimized and effective setup to bid on the site, a few code tags need to be implemented as outlined below.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"AdEngine with automatic rendering","type":"text"}]},{"type":"paragraph","content":[{"text":"This is the easiest way to integrate AdEngine. It will load the site specific AdEngine configuration and display ads automatically in the selected div elements, when the user first enters the page.","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n","type":"text"}]},{"type":"paragraph","content":[{"text":"Note:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Replace ","type":"text"},{"text":"**site.domain**","type":"text","marks":[{"type":"strong"}]},{"text":" with the actual site domain","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Place the script at the very top of the header to ensure the best performance","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"If Google Analytics is used, place the AdEngine tag after the Google Analytics tag","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Keep the correct order of the tags: first configuration and then loading of AdEngine","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Body Configuration","type":"text"}]},{"type":"paragraph","content":[{"text":"The page body needs to define div elements that will be filled with ads. They need to be placed where the ad should be displayed.","type":"text"}]},{"type":"paragraph","content":[{"text":"The div elements should reserve the maximum width and height of the displayed ad to prevent ","type":"text"},{"text":"Cumulative Layout Shift","type":"text","marks":[{"type":"link","attrs":{"href":"https://web.dev/cls/"}}]},{"text":" (CLS). If you are using ad labeling, reserve an additional 15px of height for the label. To reserve the proper space please consult your account manager to get the exact ad sizes.","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n

\n\n\n

","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Virtual DOM pitfalls","type":"text"}]},{"type":"paragraph","content":[{"text":"Libraries such as React work with a virtual DOM that is used to update the real DOM whenever it detects a need for it (e.g. due a state change). Unfortunately, this makes modification of the DOM from the outside a bit tricky. In general, React will not touch external modifications, unless a ","type":"text"},{"text":"complete re-rendering","type":"text","marks":[{"type":"em"}]},{"text":" of a component occurs. The following examples illustrate cases where this happens:","type":"text"}]},{"type":"codeBlock","content":[{"text":"// Example 1: conditional component rendering\n\n {someCondition ? : }\n","type":"text"}]},{"type":"codeBlock","content":[{"text":"// Example 2: using react-router-dom for multi-page applications\nimport { Switch, Route } from 'react-router-dom';\n\n\n \n \n","type":"text"}]},{"type":"paragraph","content":[{"text":"Since the initial ad placement was empty, React will revert to this empty state in these cases. Re-auctioning of placements is required. Here's how, using functional React:","type":"text"}]},{"type":"codeBlock","content":[{"text":"const MyPage = () => {\n // the useEffect hook of functional React is equivalent to componentDidMount of class-based React\n useEffect(() => {\n if (window.adngin && window.adngin.adnginLoaderReady) {\n // when adnginLoaderReady boolean is true, it is safe to access command queues like adngin.queue or googletag.queue\n adngin.queue.push(() => {\n // it is recommended to auction only ONCE, so please gather all required ad unit names;\n // or do not pass anything if all ad units are to be re-auctioned\n const units = [\"adUnit1\", \"adUnit3\"];\n adngin.cmd.startAuction(units);\n });\n });\n });\n};","type":"text"}]},{"type":"paragraph","content":[{"text":"Details about ","type":"text"},{"text":"startAuction ","type":"text","marks":[{"type":"em"}]},{"text":"command can be found ","type":"text"},{"text":"here","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/DOC/pages/667451437"}}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Testing on a staging page","type":"text"}]},{"type":"paragraph","content":[{"text":"It is recommended to test an AdEngine integration on a staging page first to prevent any problems and allow your account manager to review the integration before going live on production.","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"id":"26a0","text":"⚠️","shortName":":warning:"}},{"text":" If you apply all steps directly on the live page without a review from your account manager, Snigel can`t be held responsible for any revenue loss.","type":"text"}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Consent management","type":"text"}]},{"type":"paragraph","content":[{"text":"If you are using AdConsent to manage user consent, there are additional elements required to be compliant with privacy laws.","type":"text"}]},{"type":"paragraph","content":[{"text":"Please follow the ","type":"text"},{"text":"Consent Management Page Integration Guide","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/DOC/pages/668796132"}}]}]}],"version":1}

Browser not supported