Как позвонить в AdSense Auto Ads при изменении маршрута для SPA (одностраничное приложение)? - PullRequest
Новая
       112

Как позвонить в AdSense Auto Ads при изменении маршрута для SPA (одностраничное приложение)?

2 голосов
/ 17 марта 2020

Я включил необходимый тег сценария в глобальный шаблон. Файл html, который содержит все динамические c страницы для моего SPA (написано в Sapper / Svelte).

www.ensueco.com

<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Если я загружаю страницу индекса, автоматически загружается автоматическая реклама, но когда я нажимаю на ссылку, переходящую на другую страницу / статью, маршрутизация на стороне клиента изменит контент в окне контента, но не будет воссоздан новые сгенерированные объявления.

Если я открываю данную статью / подстраницу в качестве начальной загрузки страницы, она также отлично загружает объявления из авторекламы, но при нажатии кнопки «домой» в главной навигации, возвращающейся на главную страницу, новые объявления не загружаются в окно контента.

В: Как попросить сценарий adsbygoogle снова выполнить при маршрутизации на стороне клиента, чтобы заполнить автоматическую рекламу на всех страницах?

В настоящее время у меня есть скрипт, который подписывается на события изменения маршрута и пересылает эту информацию в Google Analytics: 

page.subscribe(({ path, params, query }) => {
gtag("config", "GOOGLE_ANALYTICS", { page_path: path });
});

Но не уверен, смогу ли я сделать что-то подобное в этом, чтобы попросить adsbygoogle выполнить снова? (приведенный ниже код был протестирован и не работает) 

page.subscribe(({ path, params, query }) => {
// (window.adsbygoogle = []).push({
// google_ad_client: "ca-pub-XXXXXXXXXXXXX",
// enable_page_level_ads: true,
// tag_partner: "site_kit"
// });
gtag("config", "GOOGLE_ANALYTICS", { page_path: path });
});

Приведенный выше код при тестировании дает мне следующее:

Я получаю эту ошибку при изменении маршрута: 

Uncaught
O {message: "adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: Only one 'enab…esyndication.com/pagead/js/adsbygoogle.js:58:409)"}

И если я удаляю enable_page_level_ads, я получаю это: 

Uncaught 
O {message: "adsbygoogle.push() error: All ins elements in the … with class=adsbygoogle already have ads in them.", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: All ins elemen…js/adsbygoogle.js:185:25)↵    at <anonymous>:1:38"}

Итак, в основном мне нужно выполнить какой-то метод, который создает новые теги (на основе автоматической рекламы), чтобы я мог выполнить этот метод и заполнить все новые элементы ins. Я думаю.

Спасибо

ДОПОЛНИТЕЛЬНЫЕ МЫСЛИ

Из того, что я понимаю, скрипт загружается после SSR (рендеринг на стороне сервера) почему содержимое HTML, CSS и JS с моего сайта уже загружено после выполнения сценария adsbygoogle.

Из POW для разработчиков я бы ожидал, что можно будет очистить массив adsbygoogle и повторно инициализировать объявления с помощью скрипта Google, чтобы JS сканировал теперь динамически загружаемый контент и на основе новый window.pushed URI (window.history.pushState()) и разместить новые объявления, как если бы они были загружены после SSR этой страницы.

1 Ответ

0 голосов
/ 27 марта 2020

Возможное решение с помощью jQuery

Создайте файл:

Если вы поместите тег скрипта в отдельный php / html, вызовите его autoads. html и разместите в нем тег сценария рекламы. Поместите это куда-нибудь, откуда вы можете вызвать его на сервере через URL. 

<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Вызовите файл:

Используя функции jQuery .click & .load, мы можем вызвать autoads . html через его URL при нажатии на ссылку с классом .myNavButton, которая должна выполнять любые сценарии, содержащиеся в файле.

Поскольку сценарий не отображается, мы можем просто загрузить его в тег тела , хотя любой существующий тег должен работать.

HTML

<a href="/" class="myNavButton">Home</a>
<a href="/page1" class="myNavButton">Some Page</a>
<a href="/page2" class="myNavButton">Another Page</a>

jQuery

$(document).ready(function(){
  $(".myNavButton").click(function(){
    $("body").load("autoads.html");
  });
});

Альтернатива:

Поскольку многократное выполнение сценария может вызвать конфликтные ситуации, альтернативой может быть цель jQuery перезагрузить любой iframes на странице.

Возможно, использовать что-то подобное внутри функции click ? 

$('iframe').attr('src', $('iframe').attr('src'));

Источники:

...