> 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/ru/uchebnye-materialy/uchebnye-materialy-dlya-izdatelei/exoclick-ad-zone-integration-with-vue.js.md).

# Интеграция рекламной зоны ExoClick с Vue.js

В этом руководстве мы разберем разные примеры того, как интегрировать рекламные зоны ExoClick в проект Vue.js.

## Пример: Баннер

{% stepper %}
{% step %}

### Создайте components/BannerAd.vue

```vue
<template>
 <h2>Баннерная реклама 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>
```

Не забудьте заменить оба `ins class` и `data-zoneid` на фактический класс и свой собственный ID зоны из панели администратора.
{% endstep %}

{% step %}

### Используйте его в App.vue

Импортируйте компонент рекламы в основное приложение

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


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

Вы можете разместить `<BannerAd />` в любом месте макета (в шапке, подвале, боковой панели и т. д.).

Запустите приложение, и вы должны увидеть баннерную рекламу.

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

## Пример: VAST

В этом примере используется [Fluid Player](https://www.fluidplayer.com/) в качестве видеоплеера для показа рекламы.

{% stepper %}
{% step %}

### Создайте components/FluidPlayer.vue

```vue
<template>
 <div class="video-section">
   <h2>VAST-реклама и 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(() => {
 // Загрузите CDN Fluid Player
 const script = document.createElement('script');
 script.src = 'https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js';
 script.onload = () => {
   // Инициализируйте 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: "Реклама"
     }
   });
 };
 document.body.appendChild(script);
});
</script>
```

Не забудьте заменить все значения-заполнители на свои.
{% endstep %}

{% step %}

### Используйте его в App.vue

Импортируйте компонент рекламы в основное приложение

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

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

Запустите приложение, и вы должны увидеть VAST-рекламу.

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

## Пример: Popunder

{% stepper %}
{% step %}

### В вашей папке public создайте файл с именем: popunder\_script.js

<figure><img src="/files/6a9f596a76106daf724468d893dc0232d361222a" alt=""><figcaption></figcaption></figure>

Вы можете назвать его как угодно.
{% endstep %}

{% step %}

### Вставьте скрипт Popunder из панели администратора ExoClick внутрь файла.

Убедитесь, что форматирование такое же, как в примере ниже.

```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){};

   //версия 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...
})();
```

Не забудьте заменить `idzone` на свой собственный ID зоны из панели администратора.\
Обновите `trigger_class` если у вас настроен пользовательский класс для кликов.
{% endstep %}

{% step %}

### Добавьте скрипт в 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>Заголовок</title>
</head>

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

<!-- Скрипт Popunder ExoClick -->
 <script type="application/javascript" src="/popunder_script.js"></script>
 <!-- Конец скрипта Popunder ExoClick -->
</body>

</html>
```

При такой настройке popunder-реклама будет запускаться при взаимодействии пользователя.

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

{% hint style="info" %}
Скрипт push-уведомлений работает только тогда, когда скрипт добавлен в `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/ru/uchebnye-materialy/uchebnye-materialy-dlya-izdatelei/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.