Как как вставить рекламный код Adsense, в шаблон Nuxt / Vue?

Question

[EvgeniySaschenko]

Добрый день,

Делаю сайт на Nuxt, есть необходимость выводить HTML фрагменты которые приходят с бекенда.

К примеру такая ситуация:
Я вставлю такой код с помощью директивы v-html, но фрейм с рекламой не появляется, а просто выводится html который я вставил (т.е. его скрипт гугла не видит и не превращает в фрейм).
Если код просто вставить в шаблон куском то всё ОК, но он приходит в переменной с бекенда поэтому так не выйдет.

Возможно проблема в том оригинальный DOM элемент (сформирований на основе ответа от сервера) заменяется на другой, я это обнаружил когда выполнял поиск элемента document.querySelector('[data-ad-client]') в родительском компоненте на этапе mounted.

Подскажите плиз как с этим разобраться.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Homepage Leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Answer 1

[EvgeniySaschenko]

Просто вставить код не вышло, заюзал этот плагин vue-google-adsense, значения атрибутов из строки достал так:

const div = document.createElement('div');
div.innerHTML = strHtml;
 const insElement = div.querySelector('ins');
 for (let i = 0; i < insElement.attributes.length; i++) {
    this.insAttr[insElement.attributes[i].name] = insElement.attributes[i].value;
}

Answer 2

[Just Me]

Правильно определённая проблема - вывод динамических скриптов в HTML с помощью JS. Варианты:

1) вставка во фрейм. Только не с помощью v-html, а для этого есть нативные js функции. То же самое можно сделать с помощью vue - плагина

2) вручную собрать тег script и вставить его в HTML

Comments

[EvgeniySaschenko]

Похоже вариант с iframe не работает.
Я вставил html код в iframe но реклама не погрузилась, кроме того размер фрейма не смог бы адаптироваться под размеры содержимого.

Вот так добавлял:

elementIframe.contentDocument.body.innerHTML = 'код который я выше писал';

[Just Me]

EvgeniySaschenko,
https://www.dyn-web.com/tutorials/iframes/refs/ifr...
https://stackoverflow.com/questions/21795761/inser...
https://www.w3schools.com/jsref/prop_frame_content...