Amazon Native Shopping Ad in Nuxt

Question

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

Can you explain what the problem you're having is in a little more detail? There's nothing about this that Nuxt makes harder than normal HTML. I'd start by embedding this in your HTML template, and then, if you need to componentize it in some way, start designing a component that automatically renders the same content but takes the "dynamic" bits as properties and renders them in a component template. — JasonTrue, Sep 12 '20 at 11:38
@JasonTrue. It's not dynamic. xxxxxxx is a constant. The problem is that after placing the script in the code, the Ads still don't show up on website. (Image: https://iili.io/2fPcKP.jpg) — HoangYell, Sep 13 '20 at 01:08
It's not clear to me where you've put it in your code, so my psychic debugging skills will be somewhat limited. Is it in an HTML template? A Vue component? Does it work in a plain HTML file on your website? If so, is exact same code present in the rendered HTML from nuxt? — JasonTrue, Sep 13 '20 at 06:33

score 0 · Answer 1 · answered Jan 18 '21 at 03:21

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/

score -2 · Answer 2 · answered Sep 05 '20 at 15:02

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>

I think the script uses the variables to dynamically insert HTML based on the values of the variables, so most likely this needs to be 1) inverted and 2) in the of the content. — JasonTrue, Sep 12 '20 at 11:45

Amazon Native Shopping Ad in Nuxt

2 Answers2