@EvgeniySaschenko

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

Добрый день,

Делаю сайт на 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>
  • Вопрос задан
  • 352 просмотра
Решения вопроса 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;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Just__Den
FULL STACK
Правильно определённая проблема - вывод динамических скриптов в HTML с помощью JS. Варианты:

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы