# ADVERLINE Setup - matchendirect.fr
## Setup
https://gam-adv.glitch.me/matchendirect.fr/
To view the source code (on Chrome):
**ctrl+U** or **right click > Display non-editable HTML source code for the current page**
This preview should be used as reference only, as it has all the placements (desktop, mobile) declared at once. You should adapt the content per page instead.
## Integration
* **The code** use by google ad services (gpt, gam, dfp) and our wrapper should be declared **in the head tag**.
* **The ad placements** should be put **in the body tag**.
The following integration is the most straightforward, but it could change depending on your site's needs. For example, it's possible to add placements during navigation.
#### Order of the stack
1. Loading of the **CMP**
2. Asynchronous loading of **gpt.js**
3. Define the **ADVERLINE** namespace
4. Declare ad slots (**dfpAdUnits**) present in the page
5. Make sure your **$data** global variable exists
7. Loading of the **wrapper**
## Snippets
#### head
```htmlembedded=
<head>
<!-- Insert the CMP before any advertising behaviours -->
...
<!-- Google integration -->
<script src="https://www.googletagservices.com/tag/js/gpt.js" async></script>
<!-- Wrapper integration -->
<script>
var ADVERLINE = ADVERLINE || { dfpAdUnits: [], data: {} };
// IMPORTANT: only declare adUnits present in the page
ADVERLINE.dfpAdUnits = [
"div-gpt-ad-skin-0",
"div-gpt-ad-banner-0",
"div-gpt-ad-mpu-0",
"div-gpt-ad-intext-dsk-0",
"div-gpt-ad-footer-0",
];
</script>
<!-- IMPORTANT: make sure window.$data exists before loading the wrapper -->
<script src="https://cdn.adnext.fr/wrapper/matchendirect.fr.js" async></script>
</head>
```
#### body
```htmlembedded=
<body>
<div id="div-gpt-ad-skin-0"></div>
<div id="div-gpt-ad-banner-0"></div>
<div id="div-gpt-ad-mpu-0"></div>
<div id="div-gpt-ad-intext-dsk-0"></div>
<div id="div-gpt-ad-footer-0"></div>
</body>
```
## Video Player
The insertion of the script is done automatically. It only needs a div container to be present in the page's body (see below). This placement **does not** need to be declared in `ADVERLINE.dfpAdUnits`.
**edit:** specifically for your site, the div container must be inside a div with 100% width.
#### body
```htmlembedded=
<body>
<div class="text-center getPubCentrale">
<div class="akcelo-wrapper akcelo-wrapper-label akcelo-adunit-3540" style="height: auto">
<div style="width:100%;">
<div id="vlyby-player"></div>
</div>
</div>
</div>
</body>
```
## AdPlay to Adverline
#### desktop
| adUnitPath | id AdPlay | id Adverline |
| -------- | -------- | -------- |
| Skin | gmp-skin | div-gpt-ad-skin-dsk-0 |
| mh_masthead | gmp-masthead-fakeskin | div-gpt-ad-banner-0 |
| 300x250_dsk | gmp-box-first-dsk | div-gpt-ad-mpu-0 |
| | gmp-box-second-dsk | div-gpt-ad-mpu-1 |
| floor_dsk | gmp-ad-floor-2 | div-gpt-ad-floor-0 |
| *none* | gmp-videoincontent | vlyby-player |
Sign in with Wallet
Connect another wallet