Creating a Web Ad on Ghost Using the Snippet

This recipe shows you how to place an ad on a Ghost site using AdPlugg. This recipe just adds a single ad but you can use it to add any number of ads by combining it with other recipes, etc. The recipe uses the AdPlugg Ad Snippet (which will work on any site) but the instructions in this recipe are specific to a Ghost site.

This recipe will only put the Ad on your Ghost website. If you want the Ad to appear on your Ghost newsletters as well, see this recipe instead.

Create An Ad

First, we need to create an AdPlugg Ad.

1. From within your AdPlugg account, create an Ad and upload an ad image (see the Ad Help Page).

Add the AdPlugg JavaScript SDK to Your Ghost Site

Next we are going to add the AdPlugg JavaScript SDK to your Ghost site. This allows you to place and run AdPlugg ads on your site.

1. From inside the Ghost admin, go to Settings (the Gear icon) > Advanced > Code Injection.
2. From within your account at adplugg.com, click "Download" and then "Snippet".
3. Click the "Get The Snippet" button.
4. Copy the AdPlugg SDK and paste it into the Site Header field back in the Ghost admin.
5. Click the "Save" button.

Add an AdPlugg Ad Tag

Now we are going to add an AdPlugg Ad Tag to one of your Ghost Posts. We are going to do it using Ghost's HTML card.

1. From inside the Ghost admin, open the Post that you want to run the Ad on.
2. Edit the Post and press the plus (+) sign where you want the Ad to appear.
3. Choose "HTML card" from the list.
4. Paste the Ad Tag code that you copied above in to the HTML card box.
5. Click out of the HTML card box to save it. The ad should render.

Save the AdPlugg Ad Tag as a Ghost Snippet

Now, we are going to save the Ad Tag as a Ghost Snippet so that we can easily use it in other Posts.

Note that if you don't expect to use this particular Ad on other posts, you can skip this step.

1. Click on the edge of the HTML card box that you created above.
2. From the menu that pops up, click the Create Snippet button.
3. Give the Snippet a name.
4. Press the Plus (+) button to save the snippet.

Your snippet will now be available from the bottom of the cards list when you press the (+) button from the Post editor.

Preview and Test it!

Now, we'll test the Post and our Ad to make sure that it looks right.

1. Click the Preview button at the top of the editor.
2. Tab through the various device icons at the top to see how your Ad will look on each device.
3. Click on the email device icon.
4. Enter your email address into the test email recipient field at the bottom of the screen (if it is not already there).
5. Press the "Send test email" button.
6. Check your inbox for the test email and check it to make sure that the email and Ad look how you you want them.

When you are ready, Publish the post!

Adding More Ads!

You can easily add AdPlugg Ad Tags to anywhere in Ghost that supports cards by using the technique described above. This includes both Ghost Posts and Pages.

You can also use AdPlugg Zones to serve different (or the same) ads into these various areas.

Check out the other recipes in the AdPlugg Cookbook for more cool things that you can do with the ads on your Ghost site including scheduling, page targeting, rotation and more.

Check out the Creating an Ad for Web and Newsletters on Ghost recipe to learn how to include AdPlugg ads in your Post content on both your Ghost website and in your Ghost Newsletters.