Ads Portfolio

Expandable Retail Ad

I had this idea for a long time, to build an expandable retail ad. An ad that can show more than one product on one page with one ad call.

300x250_retailadI built it to a point where I can demonstrate how it works. Imagine you are a retail shop, but you cannot decide which product you want to advertise, what about if you could advertise all your products, won’t that be nice.

This ad will allow you to upload as many products as you like, I built it making use of html, javascript and JSON (JavaScript Object Notation) to load the products dynamically.

Going forward I would like to make use of a Google Spreadsheet to upload all the products which will make it easier to update the ads going forward.

Let’s assume you will be uploading this ad in Google AdWords, by the way I am working on this, and you hit publish. In a weeks time you would like to change the products as it’s not on special anymore. No problem, all you will need to-do is open your Google Spreadsheet, update the details of the new products and that is it, your ads will then automatically update without you updating Google AdWords.

The last bit is what I will be working on next, but feel free to take a look at my example on GitHub.

You can also view the live demo here.

If you would like to play with the code yourself, you can download it by clicking on the link.  Expandable Retail Ad


Ads Coding Portfolio

Native Ad for DoubleClick for Publishers

One of our clients asked if we could create a Native Ad for DoubleClick for Publishers template for them.

Native Ads for Apps in DoubleClick
Picture from DFP

Now DFP (Double Click for Publishers) was working on a solution but the ETA was unknown. To give you and idea what it is, you can take a look at the DFP article.

We looked at our clients requirements and I started working on the creative. I had to create something that I could manipulate the dom once the ad tag has rendered on the page. I also had to make sure that this creative can be seen under user defined templates in the creative library and that the client will be able to make custom edits to each new ad.

I first had to detect a few things,  the width of the parent node in which this native ad will be rendering and while doing this I also needed to find the parent node class name so that I could apply additional styling to it, for example width and height which is being set in DFP. I pass all the DFP related values via DFP macros into my code.

You will also notice in my code that I am setting the height of the banner ad as the content resizes smaller, making sure that the content will still fit.

If you are not sure how DFP works and DFP tagging, please let me know, I will assist you with the setup.

You can download my code on github.