• About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
May 03, 2017

How to Build Dynamic Banners that Clients Love

Posted by Jamie Barbosa

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*

Previous
Next

Latest White Papers

  • Shifting Plans for 2020 & Beyond
  • Game On: How Brands Can Log Into A Diverse Multi-Billion Dollar Industry
  • What CCPA Means For Brands
  • How Google is Improving Consumer Data Privacy
  • Ways to Prepare for the Cookieless Future
  • See all White Papers

Featured Posts

  • Ad Age Names PMG #1 Best Place to Work in 2021
  • MediaPost Names PMG Independent Agency of the Year
  • PMG Client Portfolio Trends During Amazon Prime Day 2020
  • A Closer Look at the Congressional Big Tech Market Power Report
  • What to Know About Reddit

Categories

  • Consumer Insights
  • Content
  • Creative Design
  • Data Analytics
  • Development
  • Digital TV & Video
  • Ecommerce
  • Industry News
  • Local
  • Mobile
  • Paid Search
  • PMG Culture
  • Programmatic & Display
  • SEO
  • Social Media
  • Structured Data
Fort Worth

2845 West 7th Street
Fort Worth, TX 76107

Dallas

3102 Oak Lawn Avenue
Suite 650
Dallas, TX 75219

Austin

823 Congress Avenue
Suite 800
Austin, TX 78701

London

33 Broadwick Street
London
W1F 0DQ

New York

120 East 23rd Street
New York, NY 10010

Get in touch

(817) 420 9970
info@pmg.com

Subscribe to the PMG Newsletter
© 2021 PMG Worldwide, LLC, All Rights Reserved
  • Contact
  • Privacy Policy
 Tweet
 Share
 Tweet
 Share
 Tweet
 Share
 LinkedIn
We and our partners use cookies to personalize content, analyze traffic, and deliver ads. By using our website, you agree to the use of cookies as described in our Cookie Policy.