---
# System prepended metadata

title: ADVERLINE Setup - matchendirect.fr

---

# 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 |
