Adding Amazon Affiliate Native Shopping ads to Ghost Blogs

 This blog uses the Ghost blog content management system. I have been fairly happy with it so far, but I had a bit of a struggle to get Amazon affiliate native shopping ads to work correctly. Copying and pasting the code into an HTML block, Markdown block, or directly onto the page didn't work. Searching for the answer on google didn't answer any questions.

If you haven't set up an account:
First you will need to create an Amazon Affiliate/Associates account. This process is fairly simple. You will need a URL where your blog is hosted, but this is not as strict as google's adsense which won't allow subdomains such as blog.danielbigelow.com. Once you are signed up, you can create ads to display products by pasting their code.

 Creating an Amazon Native shopping ad is as easy as selecting what you want to display and how you want them to display. The site will provide two blocks of JavaScript, shown as tags <script></script>. These two pieces of the code do different things. Normally these script pieces can be pasted directly into your code where you want the ad displayed, but this doesn't work in a lot of content management systems such as Ghost.

 Lets look at the pieces of code behind creating the ads on your page, then I'll show you how to change what amazon provided to make the ad appear on your blog.

 First, the following block of code set's variables. There is not really anything that the code actually performs outside of that. Here is how the code looks:

<script type="text/javascript">
amzn_assoc_placement = "adunit0";
amzn_assoc_search_bar = "true";
amzn_assoc_tracking_id = "yourtrackingID";   //your not mine
amzn_assoc_search_bar_position = "bottom";
amzn_assoc_ad_mode = "search";
amzn_assoc_ad_type = "smart";
amzn_assoc_marketplace = "amazon";
amzn_assoc_region = "US";
amzn_assoc_title = "Shop Related Products";
amzn_assoc_default_search_phrase = "Ghost";
amzn_assoc_default_category = "All";
amzn_assoc_linkid = "AssociateLinkID";   //your not mine
</script>

 Then, the next script is used to pull in a script from Amazon to display the ad. By using the src keyword in the opening script tag, their script will run on your page.  It looks for the variables that were set in the first script block.  Here is how this piece of code looks:

<script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script>

 The problem with the code that Amazon provided is that the code is setup to be responsive. It doesn't know what size it should be, and because of the way the default Ghost theme is built, the ad just never appears. This could be fixed by creating a custom size ad rather than responsive, but this can cause issue later with page layouts.

 The solution is actually fairly simple. By putting the second script into a separate <div> tag, we are able to give the ad some height and width to appear in.  

<script type="text/javascript">
amzn_assoc_placement = "adunit0";
amzn_assoc_search_bar = "true";
amzn_assoc_tracking_id = "yourtrackingID";   //your not mine
amzn_assoc_search_bar_position = "bottom";
amzn_assoc_ad_mode = "search";
amzn_assoc_ad_type = "smart";
amzn_assoc_marketplace = "amazon";
amzn_assoc_region = "US";
amzn_assoc_title = "Shop Related Products";
amzn_assoc_default_search_phrase = "Ghost";
amzn_assoc_default_category = "All";
amzn_assoc_linkid = "AssociateLinkID";   //your not mine
</script>
<div id="ad" style="height: 360px; width: 100%;">
<script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script>
</div>

This will cause the ad to display correctly like below.

As an Amazon Associate I earn from qualifying purchases.