How to add Amazon affiliate and Google AdSense ads to your Vue app.

Sooner or later, if you are developing a content site, niche blog, or some other website that attracts organic visitors, you may decide you want to start making money with your website in the form of ads. When you go to do that, you may end up using some sort of script tag that the ad service provides you with that you need to add to your html somewhere.

If you go ahead and paste the script tag as it is somewhere in your Vue app template, right away your console will start to give you errors:

“Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as script, as they will not be parsed.”

So, how should you go about fixing this issue?

For me, the best way I found was by creating a Vue component just for my ad. That way, I could simply add the component to the pages I wanted the ads to appear, and have a single source of truth for each ad I was going to serve.

I also needed a way to load the script asynchronously from the Vue script tag so that the browser wouldn't have issues with ads calling document.write synchronously. For that, I found a link to postscribe, an npm package just for doing that.

First, install postscribe:

npm install --save postscribe

Then, use postscribe to asynchronously load your script in your Vue component and attach it to the dom:

<template>
    <div>
        <div id="homeadinfo"></div>
        <div id="homeadimage"></div>
    </div>
</template>
<script>
/* eslint-disable no-useless-escape */
import postscribe from "postscribe";
export default {
    name: "home-garden-banner-ad", //Edit as needed
    mounted: function() {
        postscribe(
            "#homeadinfo",
            `<script type="text/javascript">
                        amzn_assoc_ad_type = "banner";
                        amzn_assoc_marketplace = "amazon";
                        amzn_assoc_region = "US";
                        amzn_assoc_placement = "assoc_banner_placement_default";
                        amzn_assoc_campaigns = "your campaign";
                        amzn_assoc_banner_type = "category";
                        amzn_assoc_isresponsive = "true";
                        amzn_assoc_banner_id = "your banner id";
                        amzn_assoc_tracking_id = "your tracking id";
                        amzn_assoc_linkid = "your id";
                    <\/script>`
        );

        postscribe(
            "#homeadimage",
            `<script type="text/javascript"
                                        src="//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1">
                    <\/script>`
        );
    }
};
</script>

This attaches the scripts and loads them asynchronously using the postscribe package.

Edit the id and script tags as needed.

Then, import and use your component in your pages/ components.

<template>
  <home-garden-banner-ad></home-garden-banner-ad>
  ...
</template>
<script>
   import HomeGardenBannerAd from "@/Components/Ads/HomeGardenBannerAd.vue";
  export default {
    components: {
        HomeGardenBannerAd
    },
}
</script>

The great way about this method is you can use those ads over and over, and you can have one central place to edit your ads as needed!