Creating an HTML5 ad for AdWords: a step-by-step guide

Creating an HTML5 ad for AdWords: a step-by-step guide Prerequisites 1. 2. 3. 4. Ability to zip and unzip files A text editor (preferably, one with s...
Author: Tabitha Rodgers
4 downloads 0 Views 355KB Size
Creating an HTML5 ad for AdWords: a step-by-step guide Prerequisites 1. 2. 3. 4.

Ability to zip and unzip files A text editor (preferably, one with syntax-highlighting) Basic knowledge of HTML5, CSS3, and JavaScript Basic understanding of how to use jQuery or a similar JavaScript library

Support files ZIP file containing the template ad we'll modify

Overview In this tutorial, we'll build a simple ad (download it ​ here​ ):

This ad includes headline text, an action button, styling (the fonts and colors), and animation..

Download the support files In the support files section, you’ll find a ZIP file. This ZIP file is a fully preconfigured template for AdWords. If you were to upload it into AdWords right now, it could be used as an ad. But, we wouldn’t recommend it.This ad would be empty.

Action steps: 1. Download this ZIP file containing all of the prerequisite ad code. 2. Unzip the file. 3. Open the unzipped folder and look at what’s inside.

Understanding the anatomy of an HTML5 ad Every ad includes 3 pieces: 1. The content (HTML file) 2. The presentation (CSS file) 3. The interactivity (JS file)

The index.html file The index.html file is the root of your HTML5 ad, and is what pulls all of the other pieces together. Inside an index.html file, you’ll see two pieces: the section and the section.

section The section includes all of the references to other pieces of your creative. Think of it as the section that tells AdWords how to build and show your ad. With the section, you can do the following: 1. 2. 3. 4.

Define the size of your ad. Define CSS files and fonts to include. Define JavaScript files to include. Determine the ad-click behavior.

Define the size of your ad

The ad size tag defines the width and height of your ad; it is what AdWords uses to determine which inventory your ad is suitable for:  

Click ​ here​ for a list of acceptable sizes.

Action step: ● Change the width and height values in the meta tag to match the ad size you want to build for. In this tutorial, we’re using width=300 and height=250.

Define CSS and font files to include The code below defines the CSS and font files that our ad needs to render properly:       

Let’s look at what each of these lines does: 1. Line 1 (the “google-recommended.css” line) tells AdWords to include the google-recommended.css file that’s also in the ZIP folder. With this CSS file, different browsers will treat HTML5 content in the same way (for instance, by picking a standard font or padding for each element). 2. Line 2 (the “style.css” line) tells AdWords to include the style.css file that’s also in the ZIP folder. This CSS file should include all of the styling rules that apply for your ad. Note, you can have as many of these CSS files as you wish, but for the purpose of this ad we just have one. 3. Line 3 (the “fonts” line) tells AdWords to fetch a Google Font. But, this won’t actually make the ad use it. First, we need to add the Google Font’s name “Roboto Slab” to the styles.css file. You can use any Google Font by linking to it. ​ Browse for other Google Fonts​ to include in your ad.

Action step: ● In this tutorial, we're using Roboto Slab. Uncomment the fonts link in the sample index.html file.

Define JavaScript files to include Use tags to define the JavaScript files that should be included with your ad. Scripts enable interactivity and animation for your creative, making the ad come alive for your customers. In our ad sample, we use the ​ jQuery library​ to make it easier to design our JavaScript code. Like this:  

jQuery is not required, but is highly recommended because it makes the ad less likely to have cross-browser issues. We’ve also included “ad-interactivity.js” as the script that holds all of our other interactivity code. The following script is a file inside of our ZIP folder that we will fill out later:  

You can add as many script files as you’d like, as long as they're included in your ad’s ZIP file. For simplicity, we’re including only a single JavaScript file (“ad-interactivity.js”). Determine the ad-click behavior The last thing the section does is define how your customers will leave your ad and go to your landing page. There are 2 ways customers can click out of your ad: 1. They could be sent to your landing page by clicking ​ anywhere​ in the ad. a. If you want ​ any​ click on your ad to send customers to the landing page, specify this by ​ not​ including the ExitApi script (see below for what this API ​ does). 2. They could be sent to your landing page by clicking ​ a specific button​ in the ad.

a. If you want a click on a ​ specific button​ in your ad to send customers to your landing page, specify this by including the ExitApi script in the section. Like this:  

The ExitApi script adds the necessary JavaScript code for supporting custom behavior to leave an ad. Later in this tutorial, we'll see how to use the ExitApi script.

Action steps: 1. In this tutorial, we’ll be defining an ad click on our call-to-action (CTA) button. Uncomment​ the ExitApi script. 2. If you want every click in your ad, no matter where, to lead to your landing page, remove the ExitApi line.

section The body section of the index.html file is where the actual content in our ad is stored. You can use standard HTML code here. A section includes: ● An header section ● An tag for a logo ● A tag for a CTA.

Action steps: 1. Compare what you see in the section with what you see in the ad (see the image below). 2. Can you see how each piece fits into the ad itself?

Presentation with style.css and Google-recommended styles.css files The style.css and google-recommended-styles.css files define how the content in the .html file looks. 1. The “google-recommended-styles.css” file hosts css rules that help make sure each browser has a consistent set of base rules - we recommend you keep this css file for all of your projects, but it is not required. 2. The style.css file is the specific stylesheet for this creative. It includes all of the rules that make our ad ​ look​ like our ad. Think of it as a coat of paint that’s applied on top of the content in the index.html file.

Interactivity with the ad-interactivity.js file The ad-interactivity.js file defines how the content in the index.html file interacts with the customer. Will it animate? What will happen when a user clicks our button? These are answered by the JavaScript defined in our ad.

Images with the company-logo.png file Note that all of the images we want to include in our ad ​ must​ be included in the ZIP file. We call these “local” files, because they’re included ​ inside​ the ad file (as opposed to “external” files, which are located outside of the ad file). External files are not allowed for HTML5 ads in AdWords, unless they are a Google Font or a Google-hosted version of jQuery.

Add content with HTML5 code Now that you have all the pieces of the ad, you can start building the content with the

index.html file. Like this:         HTML5 ads are the future          Learn More!       

This ad has 3 pieces: ● A header - “HTML5 ads are the future” ● A logo - The tag ● A CTA button - What customers need to click to exit the app.

Action steps: 1. Copy and paste the code above into your index.html file inside of the tag. 2. Open the index.html file in the browser. 3. Do you see your ad? It may look unfinished because it still needs the CSS file.

Open the index.html file in a browser window to preview your ad. It should look like this:

Well, the pieces are all there…

Defining how customers get to the landing page from the ad Notice something interesting about the tag? There’s a defined attribute: "onclick". The “onclick” attribute defines what happens when a customer clicks that button. Here, you’ll notice we’ve set "onclick" to be a JavaScript function: