Встроенное рекламное объявление Amazon в Nuxt

#vue.js #nuxt.js #ads #affiliate

#vue.js #nuxt.js #объявления #Аффилиат

Вопрос:

Я хочу разместить нативную рекламу покупок Amazon на своем веб-сайте. Рекламный код имеет следующий формат:

 <script type="text/javascript">
amzn_assoc_tracking_id = "xxxxxxx";
amzn_assoc_ad_mode = "manual";
amzn_assoc_ad_type = "smart";
amzn_assoc_marketplace = "amazon";
amzn_assoc_region = "US";
amzn_assoc_design = "enhanced_links";
amzn_assoc_asins = "xxxxxxx";
amzn_assoc_placement = "adunit";
amzn_assoc_linkid = "xxxxxxx";
</script>
<script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script>

Они сказали: «Скопируйте сгенерированный HTML и вставьте его в код вашего веб-сайта»..

Кому-нибудь удалось перенести нативную рекламу покупок в Nuxt

1. Можете ли вы объяснить, в чем проблема, с которой вы столкнулись, немного подробнее? В этом нет ничего, что Nuxt делает сложнее, чем обычный HTML. Я бы начал с встраивания этого в ваш HTML-шаблон, а затем, если вам нужно каким-то образом его компонентировать, начните разрабатывать компонент, который автоматически отображает тот же контент, но принимает «динамические» биты в качестве свойств и отображает их в шаблоне компонента.

2. @JasonTrue. Она не динамическая. xxxxxxx — это константа. Проблема в том, что после размещения скрипта в коде реклама по-прежнему не отображается на веб-сайте. (Изображение: iili.io/2fPcKP.jpg )

3. Мне непонятно, куда вы поместили это в своем коде, поэтому мои навыки экстрасенсорной отладки будут несколько ограничены. Есть ли она в шаблоне HTML? Компонент Vue? Работает ли это в обычном HTML-файле на вашем веб-сайте? Если да, то присутствует ли точно такой же код в отрисованном HTML из nuxt?

Ответ №1:

Вы можете разрешить первому скрипту в шаблоне вашего компонента nuxt объявлять все переменные. Или измените некоторые из них в начале вашей смонтированной функции в вашем компоненте.

Реальная трудность здесь заключается в асинхронной загрузке вашего объявления после того, как переменные будут готовы. Поэтому я использовал https://github.com/krux/postscribe которую вы не можете импортировать в свой компонент, поскольку она предназначена для клиента.

Итак, что я здесь сделал, так это внедрил функцию клиентского плагина, содержащую вызов postscribe с помощью скрипта src, который я, наконец, вызвал при монтировании, и мои объявления загрузились o/

Ответ №2:

Вам нужно только вставить код в app.html корневой каталог вашего проекта nuxt:

 <!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
  {{ HEAD }}
  <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script>
  <script type="text/javascript">
    amzn_assoc_tracking_id = "xxxxxxx";
    amzn_assoc_ad_mode = "manual";
    amzn_assoc_ad_type = "smart";
    amzn_assoc_marketplace = "amazon";
    amzn_assoc_region = "US";
    amzn_assoc_design = "enhanced_links";
    amzn_assoc_asins = "xxxxxxx";
    amzn_assoc_placement = "adunit";
    amzn_assoc_linkid = "xxxxxxx";
  </script>
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>

1. Я думаю, что скрипт использует переменные для динамической вставки HTML на основе значений переменных, поэтому, скорее всего, это должно быть 1) инвертировано и 2) в <теле> содержимого.