> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/tutorials/pt/tutoriais/tutoriais-para-editores/exoclick-ad-zone-integration-with-vue.js.md).

# Integração da Zona de Anúncios ExoClick com Vue.js

Neste tutorial, vamos percorrer diferentes exemplos de como integrar ExoClick Ad Zones dentro de um projeto Vue.js.

## Exemplo: Banner

{% stepper %}
{% step %}

### Crie components/BannerAd.vue

```vue
<template>
 <h2>Anúncio de Banner 300x250</h2>
 <ins class="xxxxxxxxx" data-zoneid="xxxxxxxxx"></ins>
</template>


<script>
export default {
 name: 'BannerAd',
 mounted() {
   const adScript = document.createElement('script');
   adScript.src = 'https://a.magsrv.com/ad-provider.js';
   adScript.async = true;
   adScript.type = 'application/javascript';
   document.body.appendChild(adScript);


   adScript.onload = () => {
     (window.AdProvider = window.AdProvider || []).push({ serve: {} });
   };
 }
}
</script>
```

Lembre-se de substituir ambos `classe ins` e `data-zoneid` pela classe real e pelo seu próprio ID de zona no painel de administração.
{% endstep %}

{% step %}

### Use-o em App.vue

Importe o componente de anúncio na sua aplicação principal

```javascript
<script setup>
import BannerAd from './components/BannerAd.vue';
</script>


<template>
 <main>
     <BannerAd />
 </main>
</template>
```

Pode mover `<BannerAd />` para qualquer lugar no layout (cabeçalho, rodapé, barra lateral, etc.).

Execute a aplicação e deverá ver o anúncio de banner.

<figure><img src="/files/e52f11f9ec12d0f15abe17bd6d3c954b0da8235a" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## Exemplo: VAST

Este exemplo usa [Fluid Player](https://www.fluidplayer.com/) como reprodutor de vídeo para exibir anúncios.

{% stepper %}
{% step %}

### Crie components/FluidPlayer.vue

```vue
<template>
 <div class="video-section">
   <h2>Anúncios VAST e Fluid Player</h2>
   <div class="video-wrapper">
     <video
       id="example-player"
       controls
       style="width: 640px; height: 360px;"
     >
       <source
         data-fluid-hd
         src="https://www.test.com/video_720.mp4"
         title="720p"
         type="video/mp4"
       />
       <source
         src="https://www.test.com/video_360.mp4"
         title="360p"
         type="video/mp4"
       />
     </video>
   </div>
 </div>
</template>


<script setup>
import { onMounted } from 'vue';


onMounted(() => {
 // Carregar o CDN do Fluid Player
 const script = document.createElement('script');
 script.src = 'https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js';
 script.onload = () => {
   // Inicializar o Fluid Player
   window.fluidPlayer('example-player', {
     layoutControls: {
       primaryColor: "#28B8ED",
       timelinePreview: {
         file: 'thumbnails.vtt',
         type: 'VTT'
       },
       controlForwardBackward: {
         show: true,
         doubleTapMobile: false
       }
     },
     vastOptions: {
       adList: [
         {
           roll: "preRoll",
           vastTag: "https://s.magsrv.com/v1/vast.php?idzone=xxxxxxxxx",
           timer: 5
         },
         {
           roll: "onPauseRoll",
           vastTag: "https://s.magsrv.com/splash.php?idzone=xxxxxxxxx",
           vAlign: "middle"
         }
       ],
       adCTAText: "Advertisement"
     }
   });
 };
 document.body.appendChild(script);
});
</script>
```

Lembre-se de substituir todos os valores de placeholder pelos seus próprios.
{% endstep %}

{% step %}

### Use-o em App.vue

Importe o componente de anúncio na sua aplicação principal

```javascript
<script setup>
import FluidPlayer from './components/FluidPlayer.vue';
</script>

<template>
 <main>
   <FluidPlayer />
 </main>
</template>
```

Execute a aplicação e deverá ver os anúncios VAST.

<figure><img src="/files/6764e1e7ee3d12f0299b6754dff6da4fc943ed27" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## Exemplo: Popunder

{% stepper %}
{% step %}

### Na sua pasta pública, crie um ficheiro com o nome: popunder\_script.js

<figure><img src="/files/5b072eaa65b9a06a27d992cfccef026499796fe3" alt=""><figcaption></figcaption></figure>

Pode nomeá-lo como quiser.
{% endstep %}

{% step %}

### Cole o script Popunder do seu painel de administração ExoClick no ficheiro.

Certifique-se de manter a mesma formatação que vê no exemplo abaixo.

```javascript
(function() {
   function randStr(e,t){for(var n="",r=t||"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",o=0;o<e;o++)n+=r.charAt(Math.floor(Math.random()*r.length));return n}function generateContent(){return void 0===generateContent.val&&(generateContent.val="document.dispatchEvent("+randStr(4*Math.random()+3)+");"),generateContent.val}try{Object.defineProperty(document.currentScript,"innerHTML",{get:generateContent}),Object.defineProperty(document.currentScript,"textContent",{get:generateContent})}catch(e){};

   //versão 7.0.0

   var adConfig = {
   "ads_host": "a.pemsrv.com",
   "syndication_host": "s.pemsrv.com",
   "idzone": xxxxxxxxx,
   "popup_fallback": false,
   "popup_force": false,
   "chrome_enabled": true,
   "new_tab": false,
   "frequency_period": 1,
   "frequency_count": 1,
   "trigger_method": 2,
   "trigger_class": "xxxxxxxxx",
   "trigger_delay": 0,
   "capping_enabled": false,
   "tcf_enabled": false,
   "only_inline": false
};


window.document.querySelectorAll||(document.querySelectorAll...
})();
```

Lembre-se de substituir `idzone` pelo seu próprio ID de Zona no painel de administração.\
Atualize `trigger_class` se tiver uma classe personalizada configurada para cliques.
{% endstep %}

{% step %}

### Adicione o script a index.html

```javascript
<!DOCTYPE html>
<html lang="">

<head>
 <meta charset="UTF-8">
 <link rel="icon" href="/favicon.ico">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Título</title>
</head>

<body>
 <div id="app"></div>
 <script type="module" src="/src/main.js"></script>

<!-- Script Popunder da ExoClick -->
 <script type="application/javascript" src="/popunder_script.js"></script>
 <!-- Fim do script Popunder da ExoClick -->
</body>

</html>
```

Com esta configuração, o anúncio popunder será acionado na interação do utilizador.

<figure><img src="/files/54728baa79c64ce86258d757210428db8b1977e8" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

{% hint style="info" %}
O script do anúncio de Push Notification só funciona quando o script é adicionado a `index.html`
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.exoclick.com/tutorials/pt/tutoriais/tutoriais-para-editores/exoclick-ad-zone-integration-with-vue.js.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.