You are on page 1of 14

Creative Specs

Gmail Sponsored Promotions
updated 1/30/2014 Overview Teaser Text File Teaser Logo Image Rich Promotion Image Fully-Expanded Ad: the HTML creative asset (Basic Message Ad) Images Folder Detailed HTML Specs Supported CSS in GMAIL Embedding a YouTube Video To embed a video Removing ad overlays from your embedded videos Embedding a Form Form Field Validation Types Incorrect or invalid entries in form Click To Call Dynamic Ads Overview Setting up a feed Note on sharing Using the feed in an ad Supported fields Campaign specific dynamic values

The GSP creative asset will be a ZIP folder, containing five components: 1. Teaser text file 2. Teaser logo image 3. Rich Promotion image 4. HTML file with the fully-expanded ad unit 5. File folder containing any images from the fully-expanded HTML ad Preview of ZIP folder:

File limits: ● Creative ZIP has a max of 100 files ● Each file has to be less than 500 KB in size ● Max image size in pixels is 650x650

Teaser Text File
Teaser ad info saved as text file: 'teaser.txt' Sender: 15 characters (must be either the domain or recognized name of the advertiser) Subject: 25 Characters (can include an offer, % discount or compelling announcement) Body: 100 Characters (short summary or powerful call-to-action) URL: 25 characters such as Note: No ALL CAPS words or faces are allowed in the teaser (other than the sender name in the right hand side placement). Standard AdWords policies also apply (e.g. can’t say “click here”). We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

Teaser Logo Image
Small icon, graphic or brand logo for teaser banner ad. Image saved as 'teaser.png', 'teaser.gif' or 'teaser.jpg' Image size: Up to 144x144

Rich Promotion Image
● ● ● ● ● ● ● An experimental desktop Promotions tab placement 580x400 max size Image saved as ‘preview.png’, ‘preview.gif’ or ‘preview.jpg’ Option to select area from larger expanded creative Standard GSP image policies apply Faces are allowed Text and/or logos are allowed but should be high res enough to work on multiple screen sizes

Fully-Expanded Ad: the HTML creative asset (Basic Message Ad)
Max Width: 650px Height: Unlimited (recommend no more than 650px) Recommend use of Table to ensure consistent presentation on multiple browsers Allowed Markup: ● HTML ● No Javascript (inline or linked .js files) ● No Stylesheets (style attribute of tags is okay though) ● No Flash, HTML5, Audio, iFrames or animated images (including animated GIFs) ● Some CSS is not supported. See below for further details.

No 3rd party pixels: only static click trackers, no dynamic click trackers

Sample Creatives: Ask your Google rep for a mock and we’ll send a template creative ZIP for reference. Test it out: Please try all creatives in the tool: Good to know: Please make sure to push the Request Approval button for review. Policy/Legal Issues around ad copy: If there is any uncertainty around messaging you are planning to run, please reach out to the GSP team for clearance.

Images Folder
Provide the files of any images that feature in the HTML creative. This will be a folder, saved as 'images', with any image files saved as '.png', '.gif' or .'jpg' Preview:

Detailed HTML Specs
The HTML is the main body of the advertisement. The HTML and CSS must be well formed. It will be rendered with <!DOCTYPE html>. Guidelines for index.html ● Fixed maximum width of 650px ● Use UTF-8 encoding ● Styling / CSS guidelines ● Tables tend to give the most consistent layout across various browsers ● Use per attribute style declarations e.g. <div style=”color: black; font­size: 1.2em”> ● Background- image is okay to use

Supported CSS in GMAIL
Note: Not all possible values of each property are supported.

background-attachment', background-clip', background-color', background-image', background-origin', background-position', background-repeat', background-size', background', border-bottom-color', border-bottom-left-radius', border-bottom-right-radius', border-bottom-style', border-bottom-width', border-bottom', border-collapse', border-color', border-left-color', border-left-style',

border-top-right-radius', border-top-style', border-top-width', border-top', border-width', border', font-family', font-size', caption-side', clear', color', direction', display', empty-cells', float', font-stretch', font-style', font-variant', font-weight',

margin', max-height', max-width', min-height', min-width', outline-color', outline-style', outline-width', outline', overflow-x', overflow-y', overflow', padding-bottom', padding-left', padding-right', padding-top', padding', quotes', table-layout',

border-left-width', border-left', border-radius', border-right-color', border-right-style', border-right-width', border-right', border-spacing', border-style', border-top-color', border-top-left-radius',

font', letter-spacing', line-height', list-style-image', list-style-position', list-style-type', list-style', margin-bottom', margin-left', margin-right', margin-top',

text-align', text-decoration', text-indent', text-overflow', text-transform', vertical-align', white-space', width', word-break', word-spacing', word-wrap'

Embedding a YouTube Video
A YouTube video can be embedded into an ad with a preview window. When the user clicks on the video teaser, the video will play in a lightbox inside of Gmail.

To embed a video
Include this snippet: <a href=""> <img src="images/gmail-ninja-preview.jpg" alt="Gmail Ninja Video"> </a> Just make sure to replace the youtube link, image source and alt to be appropriate for your ad. If you happen to use this html snippet and you don’t want the video to play in a lightbox, please set the class “nonplayable”, as shown below: <a href="" class="nonplayable"> <img src="images/gmail-ninja-preview.jpg" alt="Gmail Ninja Video"> </a> It is recommended that the image you use (in this example, images/gmail-ninja-preview.jpg) include some type of play button so that users will know that clicking will play a video. The system does not add anything to this image to indicate that it will play a video.

Removing ad overlays from your embedded videos
Within the host Youtube account, there is a setting to disable ads on top of your videos.

Embedding a Form
Use a Form in the expanded ad to shorten the steps to conversion. Embedded forms are the most recommended use of GSP because it reduces the path to convert and drives higher conversion rates, right within Gmail. Your customer will fill out the text fields and click to ‘submit’, ‘sign-up’, or complete any other desired action and continue on to your landing page. All information will be passed directly to the advertiser, nothing is passed or saved on Google servers. Google Docs instructions

Form Field Validation Types
To add more value to forms, several validation types have been built into Gmail Sponsored Promotions. To take advantage of these validations, the advertiser can make several small adjustments to their creative. Non-empty input or textarea: To ensure that a text field in a form is not left empty, simply add the attribute ‘required’ to the input. ex: <input required type="text" size="25"> or <textarea required rows="3" cols="20"></textarea>

Telephone type input: To ensure that a telephone type text field has a valid US phone number, simply add the attribute ‘ xautocompletetype="phone-full"’ to the input. If the field is not marked as ‘required’, it will only be validated if it contains a value. The accepted format will be anything that has 10 digits, spaces, dashes and parentheses such as 6505555555/650-555-5555/(650) 5555555/etc. ex: <input type="text" x-autocompletetype="phone-full" size="25"> or <input required type="text" x-autocompletetype="phone-full" size="25"> Email type input: To ensure that an email type text field has a valid email format, simply add the attribute ‘ xautocompletetype="email"’ to the input. If the field is not marked as ‘required’, it will only be validated if it contains a value. The accepted format will be a text string in the format ex: <input type="text" x-autocompletetype="email" size="25"> or <input required type="text" x-autocompletetype="email" size="25"> Zip code type input: To ensure that a zip code type text field has a valid zip format, simply add the attribute ‘xautocompletetype="postal-code"’ to the input. If the field is not marked as ‘required’, it will only be validated if it contains a value. The accepted format will be a string beginning with 5 digits. ex: <input type="text" x-autocompletetype="postal-code" size="25"> or <input required type="text" x-autocompletetype="postal-code" size="25"> Submit type input: To take advantage of forms in message ads the submit button must conform to the following format: <input type="submit" style="...">

Incorrect or invalid entries in form
When validation of a field fails, user will not being to submit form. The user will be informed which fields require fixing. In browsers that support html5, the user will see a tooltip on fields that were marked as ‘required’ and have no value; on older browsers the input will be highlighted red and they will see an error message at the top of their window. For fields which have specific validation (phone/email/zip code), the input will be highlighted red and they will see a specific error message at the top of their window. When the form validates successfully, it will submit.

Successful submission of the form will result in the user being directed to the advertiser's landing page!

Click To Call
To create a click to call link, use "tel:##########" in the link href. example: <a href="tel:55586753096">555-867-53096</a> and it will look like this: 555-867-5309

Dynamic Ads
You can dynamically change the text of the teaser following this guide.

Setting up a feed
When the user navigates to the “Ads” section they will see a new button labelled “+Feed”.

When they click on “+Feed”, a popup will open prompting the user for a feed name and offering a “Create” button.

When the user clicks on “Create”, a new Google spreadsheet is created and shared with them (this might take a few seconds). T he url of the new spreadsheet is provided in the popup.

The spreadsheet can also be opened later by using the link the the new menu called “My Feeds” on the Ads page.

The newly created spreadsheet will have 3 sheets (seen at the bottom of the spreadsheet).

The first sheet called ‘sync data’ should not be edited as it contains a unique url required to sync the new feed, more on this later. The second sheet called ‘feed data’ is where the user will enter the dynamic values. The third sheet is called ‘do not edit’ and contains metadata for administrative use and should not be ch anged. At this point the feed is set up and needs to be populated with data. To do so, values must be entered in the second tab call ed ‘feed data’. A column should be defined for each dynamic field the user intends to use in their ad. Column names should not contain spaces or special characters (they should be alpha numeric with underscores). For each field, a value must be defined.

In the above example, the user has defined 3 dynamic fields; ‘rate’, ‘today_date’ and ‘tracking_url’. A single value has been provided for each field. These are just examples, any field can be created. Once all the feed data has been populated, the user must sync the feed by clicking the link in the first sheet called ‘sync data’.

Clicking this link should open a new tab and should eventually display a success message (this will take a few seconds). This means the data in the spreadsheet has been successfully synced.

Note: Any time the feed data is changed in the spreadsheet, the procedure should be repeated to ensure that the data is synced.

Note on sharing
When the spreadsheet is created it is shared only with the person who requested its creation. It is therefore important that this person share the spreadsheet with anyone else that may require access to it as it does not automatically inherit access permissions from the account. It is important to share the spreadsheet with anyone who may need to update it (this is also important because account managers move around and sharing the spreadsheet with a wider audience ensures that the feed won’t be orphaned). People who do not have access to the spreadsheet but who have access to the account will still be able to use the feed, they just won’t be able to update its values.

Using the feed in an ad
Once a feed has been created it will appear in the list of available feeds in the first step of the Ad wizard. The user must select the field they wish to use before proceeding to the next steps.

Once they have selected a feed, they can use the dynamic values in any of the supported fields using the following syntax: {$column_name=[Some default value]}. The column name is defined in the spreadsheet (ex: tracking_url, rate or today_date) and the default value can be any text the user wishes to use if for some reason the dynamic value couldn’t be used. One case where the default values would be used as opposed to the dynamic values is if one/several of the dynamic values cause the ad to violate some criteria such as length of a field (ex: causes title to be more than 25 characters). Dynamic values are all or nothing, if a single one causes the ad to be invalid then all will fall back to their default value.

The preview will show what the ad will look like with default values:

The actual ad (unless invalid) will show the dynamic values when it is shown to users:

The advertiser must be conscious that all character limitations for teaser fields be honored with or without the dynamic values otherwise the defaults will be shown.

Supported fields
Currently fields that support dynamic content are: ● Teaser ○ Sender name ○ Title ○ Body ○ Sender display short URL ○ Redirect URL ● Ad body ○ Anchor href (ex: <a href=”{$tracking_code=[xyz]}”>) ○ Form action (ex: <form action=”{$tracking_code=[xyz]}”>)

Campaign specific dynamic values
Often an advertiser needs to create multiple creatives that are essentially identical with only slight differences such as different tracking codes within the ad body url’s for their different campaigns. With dynamic creatives, advertisers can now create a single creative and use dynamic field placeholders where those variable pieces need to be and decide what should be there on a per campaign basis by specifying the campaign id for each value in their feed. To use this feature, the advertiser needs to first set up all their campaigns as before. Once all the campaigns have been created, the campaign id’s (which can be found on the overview page) can be used in the feed to specify which values to us e for each campaign. To do so, create a column in the feed called "gsp_campaign_id" and list the id’s of the desired campaigns in that column. The n add the other columns as before. Now every row of dynamic values will be used specifically for the given campaign.

NOTE: It is important to keep in mind that at the time of rendering the ad with dynamic values, if any single dynamic field used does not have an associated dynamic value, all will resort to using their default values for consistency. To avoid this situation, make sure you have provided a value in each column for every row.