问题描述
我想在我的网站上放置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>
有没有人成功地将原生购物广告引入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>