Amazon Native Shopping Ad in Nuxt

user_3927279 0
Viewed 348

I want to place Amazon Native Shopping Ad on my website. The Ad code has the following format:

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

They said: "Copy the generated HTML and paste it into the code for your website.".

Has anyone succeeded in bringing Native Shopping Ad to Nuxt

affiliate nuxt.js vue.js ads
2 Answers

You can let the first script in the template of your nuxt component to declare all the variables. Or modify some of them at the beginning of your mounted function in your component.

The actual difficulty here is to load your ad asynchronously after the variables are ready. So I used https://github.com/krux/postscribe which you cannot import in your component as it's meant for the client.

So what I did here was a client plugin injected function containing the postscribe call with the src script, which I finally called in mounted and my ads got loaded \o/

user_116247710

You only need to paste the code into the app.html in your nuxt project root directory:

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