Create perfect AdWords ad mockups and previews using Chrome Developer Tools

This post is adapted from an answer I posted to this question on Reddit.

User adwordshalp was attempting to use the Ad Preview tool to take a screenshot of an ad mockup for a client proposal, but was running into some errors.

“All I want to do is see the image of what an ad would look like.”

Editing AdWords ads using Chrome Developer Tools

I like to use Chrome Developer Tools as a quick way to create ad previews, or see how ad copy will look within the context of the search results, without having to create an ad in AdWords and use the ad preview tool or mess around in Photoshop

Here’s the process I use to create quick ad previews in Google Chrome (other browsers have similar developer tools):

  1. Search your query on Google, and find an ad that has the features you want (sitelinks, extended headline, ratings, etc.).
  2. Right click on the ad headline and click inspect. Find the headline text in dev tools and double click it. You can edit the text right in dev tools.
    Editing an AdWords ad in Chrome Developer Tools
  3. When you’re done editing the headline, hit enter and you will see the updated ad.

Repeat the process for all ad elements you want to edit – description lines, sitelinks, callouts, reviews, ratings.

Create mobile ad previews with Google Chrome or Safari

If you want to create mobile ad mockups, you can use the same process using remote debugging for Google Chrome with an Android smartphone, or Safari’s inspect device feature with an iPhone, connected via USB.

Leave a Reply

Your email address will not be published. Required fields are marked *