What do you do when you want to use the same banner template for an entire feed of products? Create a dynamic banner! Unfortunately, the pre-existing banner templates aren’t the best looking display ads…
Luckily, we were able to conquer Google Web Designer and create awesome banners for our clients.
Let’s get technical.
So how does Google Web Designer work? There are 2 key parts: designing and binding. Design wise, GWD is similar to (a very basic version of) photoshop. You can drag and drop components onto the page and begin visually building out the banner.
(This banner will show 2 products and has spots for a logo and CTA)
Once you have all the components on the page (typically product details, logo, and a CTA) it’s time to start binding the dynamic elements. Any component that will change based on the product being pulled in needs to be bound. So product images, names, and prices all need binding in order to display the correct info for the product. This is also achievable through the GWD UI.
(Here we bound a container to pull in the logo, another container to pull in the product image, and a “tap area” to the exit URL.)
Test It Out
GWD provides a “preview” option that uses a sample feed to show a rough example of what the banner will look like. Generally, it’s not a good idea to use this a strict guide of what the actual banner will look like since the images are sometimes skewed and shaped oddly.
Perfecting with CSS
After previewing, it’s time to perfect the design. CSS is your #bff here and lets us make all the styling changes we need. Text color needs adjusting? Done. Do images need to be scaled? Got it! I like to be very thorough and match every pixel to the mock design to make sure it looks as close to the original design as possible.
Final upload
After everything is done, it’s time to inspect the HTML and javascript code to make sure things look good and that no wonky behavior will happen.
The last step is uploading to Adwords and making sure the final design is top notch. I like to do this several times so that I can get different products tested in the banner.
And that’s it! We’ve now built out a fully customized dynamic banner. *insert raised hands emoji*