...
| Code Block |
|---|
<script data-cfasync="false" type="text/javascript">
window.snigelPubConf = {
"adengine": {
"activeAdUnits": ["topleaderboard","sidebar_2"]
}
}
</script>
<script data-cfasync="false" async src="https://cdn.snigelweb.com/adengine/**site.domain**/loader.js" type="text/javascript"></script>COPYscript> |
Note:
Replace **site.domain** with the actual site domain
Place the script at the very top of the header to ensure best performance
If Google Analytics is used, place the AdEngine tag after the Google Analytics tag
Keep the correct order of the tags: first configuration and then loading of AdEngine
...
| Code Block |
|---|
<!-- AdEngine Top Leaderboard --> <div id="adngin-topleaderboard-0"></div> <!-- AdEngine Sidebar_2 --> <div id="adngin-sidebar_2-0"></div>COPYdiv> |
Virtual DOM pitfalls
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 complete re-rendering of a component occurs. The following examples illustrate cases where this happens:
| Code Block |
|---|
// Example 1: conditional component rendering
<SomeComponent>
{someCondition ? <FirstComponent/> : <SecondComponent/>}
</SomeComponent>COPYSomeComponent> |
| Code Block |
|---|
// Example 2: using react-router-dom for multi-page applications
import { Switch, Route } from 'react-router-dom';
<Switch>
<Route exact path='/' component={HomePage}/>
<Route exact path='/login' component={LoginPage}/>
</Switch>COPYSwitch> |
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:
| Code Block |
|---|
const MyPage = () => {
// the useEffect hook of functional React is equivalent to componentDidMount of class-based React
useEffect(() => {
if (window.adngin && window.adngin.adnginLoaderReady) {
// when adnginLoaderReady boolean is true, it is safe to access command queues like adngin.queue or googletag.queue
adngin.queue.push(() => {
// it is recommended to auction only ONCE, so please gather all required ad unit names;
// or do not pass anything if all ad units are to be re-auctioned
const units = getAdUnitNamesForCurrentPage();
adngin.cmd.startAuction(units);
});
});
});
};COPY |
Details about startAuction command can be found here
Testing on a staging page
...
| Code Block |
|---|
<script data-cfasync="false" async src="https://staging-cdn.snigelweb.com/adengine/**site.domain**/loader.js" type="text/javascript"></script>COPYscript> |
Snigel is using the staging version of AdEngine to deliver previews of new features and enhancements before they are available on production. This way it is possible to test new features in a safe way.
...
If you are using AdConsent to manage user consent, there are additional elements required to be compliant with privacy laws.
Please follow the Consent Management Page Integration Guide