Nuxt的Amazon Native Shopping广告

如何解决Nuxt的Amazon Native Shopping广告

我想在我的网站上放置Amazon Native Shopping Ad。广告代码具有以下格式：

<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

解决方法

您可以让nuxt 组件模板中的第一个脚本声明所有变量。或者在组件中挂载函数的开头修改其中的一些。

这里的实际困难是在变量准备好后异步加载您的广告。因此，我使用了 https://github.com/krux/postscribe，您无法在组件中导入它，因为它是为客户端设计的。

所以我在这里做的是一个客户端插件注入函数，其中包含带有 src 脚本的 postscribe 调用，我最终调用了该脚本并加载了我的广告 \o/

您只需要将代码粘贴到nuxt项目根目录的app.html中：

<!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>