gmail ads custom html templatesrich_media_gallery.storage.googleapis.com/galleryitems/...appendix a:...
TRANSCRIPT
Gmail Ads Custom HTML Templates Build Guide Last Updated: 2015/08/27
Overview: Intended Audience What do I need to get started?
Photoshop version HTML file version
Usage Photoshop Version
Included Layers Adding your own images Adding a Video URL Adding Clickthrough URLs Modifying placement of existing slices Adding / removing a slice Publishing as HTML
GIMP Workflow with Photoshop Version Included Layers Adding your own images Adding guides for slices Hiding the Clickthrough layer and selecting the image layer Creating Slices & Publishing to HTML Adding Video and Clickthrough URLs
HTML Version File overview Spec restrictions Changing the table layout Changing the size of a table cell Adding Clickthrough URLs Removing a Clickthrough URL Adding a Video URL Nonplayable video:
AdWords Upload Requirements Adding your logo image and teaser.txt ZIP file requirements Previewing in AdWords Preview in AdWords UI does not play videos in a lightbox
Appendix A: GIMP workflow: detailed instructions for adding clickthrough and video URLs for GIMP sliced files
Overview The Gmail Ads Custom HTML template is an option for advertisers to design their own creatives. These templates and techniques utilize Photoshop and the slicing feature.
Intended Audience Gmail Ads advertisers with Photoshop experience
What do I need to get started?
Photoshop version Adobe Photoshop. If you do not have access to Adobe Photoshop, you can use GIMP (free download), which can open the .psd file format. The instructions below are Photoshopspecific, although the basic technique involved (using the Slice tool to create sections of a page, and make some of the sections clickable with landing page URLs) is supported in GIMP. The workflow is slightly different in GIMP but the result is the same. 1
HTML file version Any plain text editor. (Use the HTML file if you aren’t familiar with Photoshop. Note that you’ll need to have a good grasp on handcoding HTML to use this method.) It is recommended to use a text editor (such as Sublime, Textmate, or Notepad) vs. an authoring tool (such as Adobe Edge or Google Web Designer) because the authoring tools may add additional code during save / export which will make your file incompatible with AdWords specs. For example, AdWords does not allow javascript and has multiple restrictions on the CSS properties which are supported for this ad format. (See specification here.) Authoring environments often include default javascript, whether or not you have written any javascript into your specific file. The presence of such javascript would result in your ad violating the AdWords specs and it would be rejected by the AdWords UI. So it’s best to stick with plain text.
1 See the GIMP Workflow with Photoshop Version section below.
Usage
Photoshop Version Below are granular instructions for using the Photoshop version of the templates. The instructions given use the Video template as an example, but the techniques involved apply to all of the templates. Note that Photoshop slices are not pegged to a specific layer, so removing layers will not remove the slices.
Included Layers
Clickthrough URL Hotspots Layer
Shows the areas which correspond to the clickthrough and video URL slices. This layer should be hidden or deleted before exporting the final creative.
Mock Demo Layer
Shows an example ad design. This layer should be deleted before exporting the final creative.
Adding your own images
1. Customize the photoshop file by adding your own images to the Layers. 2. This Mock Demo layer should be deleted before exporting the final creative.
Adding a Video URL 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. Views will count towards the video view count on YouTube. Autoplay is not supported. It is recommended that the image you use (in this example, images/Video_URL.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.
1. Select the Slice Select Tool, and doubleclick on a Slice to bring up the “Slice Options” dialog. For additional detail on how to use the Slice tool, read this Photoshop help article on slices.
2. Change the URL value from “http://” to the URL for your YouTube video
(e.g., http://www.youtube.com/watch?v=_I6iy1wmtQ)
3. Users who click on the area defined by the slice will view the video specified in the URL. 4. Leave the “Message Text” field blank (adding values to “Message Text” will cause
javascript to be added on export) 5. Click “OK”. 6. Save your file with the changes.
For additional detail on how to use the Slice tool, read this Photoshop help article on slices.
Adding Clickthrough URLs
1. Select the “Slice Select Tool”, and doubleclick on a Slice to bring up the “Slice Options” dialog. For additional detail on how to use the Slice tool, read this Photoshop help article on slices.
2. Change the URL value from “http://” to the clickthrough URL you want to use for the
slice.
Users who click on the area defined by the slice will be taken to this URL.
a. NOTE: to remove a clickthrough altogether for a slice, clear the “URL” and “Target” fields.
3. Leave the “Message Text” field blank (adding values to “Message Text” will cause javascript to be added on export)
4. Click “OK”. 5. Save your file with the changes.
Modifying placement of existing slices The Photoshop template has default slice areas. These slices can be adjusted to better accommodate your custom designs. For information on adjusting slices using the slice tool, read this Photoshop help article on slices.
Adding / removing a slice
Slices can be added or removed to better accommodate your custom designs. For information on using the slice tool, read this Photoshop help article on slices.
Publishing as HTML Once you have updated the creative with your own art, set clickthrough URLs for all the slices and made any slice adjustments you need, you are ready to publish. Publishing a file with slices results in a web page that has separate tiles for each area defined by a slice. Each slice loads as an individual image. If you use Photoshop’s “Save for Web” dialog, you will be given the opportunity to make adjustments to the image quality. Please read this Photoshop help article for more details on Save for Web (also known as “export” in newer versions). Once you have made any image adjustments you need, click “Save”. This will bring up a popup dialog with additional options:
1. Ensure the “Format” is set to “HTML and Images” 2. Ensure that the “Settings” option is set to “Default Settings” 3. Ensure the “Slices” option is set to “All Slices”. 4. Click “Save” and select a location. Photoshop will create an .html file and a folder with all
the images for the slices. Publishing with these settings will ensure that the HTML output is compatible with the AdWords spec. Some of the technical aspects of the HTML file:
It will be a tablebased layout. It will not have any CSS as either an external stylesheet or inline styles. It will not have any javascript.
GIMP Workflow with Photoshop Version If you do not have access to Photoshop, you can also use GIMP, which is a free software alternative. GIMP supports direct Photoshop file import, so you can use the same Photoshop template files in your GIMP workflow. The workflow in GIMP is slightly different, and requires a small bit of code editing to add the clickthrough URLs, as the Slice filter does not work the same as the Slice tool in Photoshop. Below are detailed instructions.
Included Layers
Clickthrough URL Hotspots Layer
Shows the areas which correspond to the clickthrough and video URL slices. This layer should be hidden or deleted before exporting the final creative.
Mock Demo Layer
Shows an example ad design. This layer should be deleted before exporting the final creative.
Adding your own images
1. Create a new Layer (Layers > New Layer) 2. Add your own images to this layer.
Adding guides for slices GIMP does not have a Slice tool, it instead has a Slice filter. Slices in GIMP are created wherever Guides are placed. This means that the end file may have more slices in GIMP than in Photoshop, because you cannot subdivide a single vertical slice into multiple horizontal slices any horizontal guides will bisect all vertical guides. The Photoshop files already contain guides, which can be arranged in GIMP where you would like to make the slices, like so:
Hiding the Clickthrough layer and selecting the image layer When you make the slices in the next step, GIMP will export whatever the active Layer is, regardless of layer visibility and whether layers above have 0 opacity. This means, if the Clickthrough layer is the active layer, then your image slices will be of the Clickthrough layer rather than your own art. To fix this:
1. In the Layers menu, toggle visibility to “off” for the “Clickthrough URL Hotspots” layer. 2. Click on the layer with the artwork that you want to export. Once selected, it should be
highlighted in the Layer menu, and also at the bottom of the main window. 3. In the above example, the “Mock Demo” layer would be exported during Slicing.
Please see this GIMP help article for more details about the Layers dialog. You are now ready to create your slices.
Creating Slices & Publishing to HTML Once you have the guides aligned where you would like the slices to be, you are ready to create the Slices using the Slice filter (Filters > Web > Slice). Please see this GIMP help article for more details about the Slice filter. The Slice filter will bring up a menu:
Please use the following settings:
1. Path for HTML export a. Please select the folder on your machine where you would like to save the output
to. 2. Filename for export:
a. File should be named “index.html” 3. Image format
a. Choose gif, jpg, or png, based on what will work best for your images. 4. Separate image folder
a. Select “Yes” 5. Folder for image export
a. Ensure this is set to “images” 6. Space between table elements
a. This must be 0 7. Javascript for onmouseover and clicked
a. This must be “No” 8. Skip animation for table caps
a. Select “Yes” Once you have made the setting changes, click “OK”. Your index.html and images folder will be available in the location you selected.
Adding Video and Clickthrough URLs Unlike Photoshop, the GIMP Slice filter workflow does not provide an opportunity to set URLs for each slice from within the tool. Instead, a placeholder clickthrough URL is automatically added to the middle slice. Video and Clickthrough URLs must be added to the code instead. Please see Appendix A for detailed instructions.
HTML Version Below are granular instructions for using the HTML version of the templates. The instructions given use the Video template as an example, but the techniques involved apply to all of the templates.
File overview The HTML folder for the Video template includes a single HTML file and several images in an ‘images’ folder. The HTML file was created by using the accompanying Photoshop file, which contains slices, and publishing it. The resulting HTML file is compliant with the Gmail Ads spec restrictions:
Spec restrictions Max Width: 650px Height: 1000px (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.
Please refer to Help Center article for more details.
Changing the table layout The HTML file uses a tablebased layout, which ensures it is compliant with the CSS restrictions that are part of the Gmail Ads spec (see above). All of the positioning is done via HTML table elements such as <table>, <tr> and <td>. The table cells contain <img> elements with “width” and “height” attributes. Here is a link to a page which explains HTML tables in more detail. In order to make changes to the table layout, it is recommended to use a plain text editor (such as Sublime, Textmate, or Notepad) vs. an authoring tool (such as Adobe Edge or Google Web Designer) because the authoring tools may add additional code during save / export which will make your file incompatible with AdWords specs.
Changing the size of a table cell The table in the video template uses the following code, for the table start and first slice: Example:
<table id="Table_01" width="650" height="650" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="http://" target="_blank">
<img src="images/Clickthrough_URL_1.jpg" width="650" height="270" border="0" alt="">
</a> </td>
</tr> The first row corresponds to the Clickthrough_URL_1 slice in the photoshop file:
The height of that slice is 270px. If you had an alternate image that you wanted to include for that slice, which was shorter in height than 270px, you would follow the following steps to adjust the size. For purposes of this demo let’s assume your image slice is 650px width by 100px height.
1. Change the “height” attribute in the <table> tag to accommodate the difference in total table height: 650 (270 100) = 480
a. The formula for this is: original table height (original slice height new slice height) = new table height
2. Change the “src” attribute in the <img> tag to reflect the filename of your custom image. Alternately, you can save your custom images in the “images” folder, and give it the same filename, in which case you don’t need to change the “src” attribute.
3. Change the “height” attribute of the <img> tag to “100” to reflect the updated width of your image.
4. When you preview your modified ad in a web browser, you should see a 650x480 table which contains your custom image as the top slice.
5. Repeat the above steps for other size changes you need to make. If you are adding additional vertical slices in any of the table cells, you can take advantage of the fact that a <tr> tag can contain multiple <td> tags with their own “width” and “height” attributes.
Example:
<! BEFORE: > <table id="Table_01" width="650" height="650" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="http://" target="_blank">
<img src="images/Clickthrough_URL_1.jpg" width="650" height="270" border="0" alt="">
</a> </td>
</tr> <! AFTER: > <table id="Table_01" width="650" height="480" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="http://" target="_blank">
<img src="images/Clickthrough_URL_1.jpg" width="650" height="100" border="0" alt="">
</a> </td>
</tr>
Adding Clickthrough URLs To add a clickthrough URL, simply replace the “href” attribute in the relevant <a> tag, with your clickthrough URL. Repeat this for each slice which has a clickthrough URL. Example:
<! BEFORE: > <table id="Table_01" width="650" height="650" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="http://" target="_blank">
<img src="images/Clickthrough_URL_1.jpg" width="650" height="270" border="0" alt="">
</a> </td>
</tr> <! AFTER: > <table id="Table_01" width="650" height="650" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="http://www.your.landingpage.com" target="_blank">
<img src="images/Clickthrough_URL_1.jpg" width="650" height="270" border="0" alt="">
</a> </td>
</tr>
Removing a Clickthrough URL To remove a clickthrough URL from a slice, remove the <a> tag which surrounds the <img> tag. Don’t forget to also remove the closing </a> tag. Example:
<! BEFORE: > <table id="Table_01" width="650" height="650" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="http://" target="_blank">
<img src="images/Clickthrough_URL_1.jpg" width="650" height="270" border="0" alt="">
</a> </td>
</tr> <! AFTER: > <table id="Table_01" width="650" height="650" border="0" cellpadding="0" cellspacing="0"> <tr> <td>
<img src="images/Clickthrough_URL_1.jpg" width="650" height="270" border="0" alt="">
</td> </tr>
Adding a Video URL To add a video URL, simply replace the “href” attribute in the relevant <a> tag, with the URL for your YouTube video (e.g., http://www.youtube.com/watch?v=_I6iy1wmtQ) Example:
<! BEFORE: > <table id="Table_01" width="650" height="650" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="http://" target="_blank">
<img src="images/Clickthrough_URL_1.jpg" width="650" height="270" border="0" alt="">
</a> </td>
</tr> <! AFTER: > <table id="Table_01" width="650" height="650" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="http://www.youtube.com/watch?v=_I6iy1wmtQ" target="_blank">
<img src="images/Clickthrough_URL_1.jpg" width="650" height="270" border="0" alt="">
</a> </td>
</tr>
Nonplayable video: If you don't want the video to play in a lightbox, and instead want the video to play on YouTube in a new tab, please add the CSS class "nonplayable" to the <a> tag containing your Video URL, as shown below: Example:
<table id="Table_01" width="650" height="650" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="http://www.youtube.com/watch?v=_I6iy1wmtQ" class= "nonplayable" target="_blank">
<img src="images/Clickthrough_URL_1.jpg" width="650" height="270" border="0" alt="">
</a> </td>
</tr>
AdWords Upload Requirements
Adding your logo image and teaser.txt Logo image and teaser.txt are required files for your campaign. Please refer to Help Center article for complete requirements to upload your file to AdWords.
ZIP file requirements Note, the files must be uploaded as a ZIP file, and following this naming convention:
HTML file = “index.html” Images folder = “images” Teaser text = “teaser.txt” Logo image = “logo.png”
Example:
Previewing in AdWords Please refer to Help Center article for complete instructions.
Known Issues
Preview in AdWords UI shows spacing in HTML table The AdWords UI preview has a known issue, that shows spacing in the HTML table. This issue is currently being resolved. Please refer to the external preview (also known as “Share link” or “View full size display ad” link) to see an accurate preview of your ad, if you encounter a preview that looks like this (with extra white space between the table slices). This issue only impacts the preview, and not how the ad is rendered when served live.
AdWords UI Preview with spacing issue
External preview (also known as “Share link”) or “View full size display ad” link after saving the ad
Preview in AdWords UI does not play videos in a lightbox The AdWords UI preview has a known issue, where a YouTube video link will not play with a lightbox effect (semitransparent black background with the video in an overlay). This issue is currently being investigated by engineering. This issue should only impact the preview, and not how the ad is rendered when served live.
Appendix A: GIMP workflow: detailed instructions for adding clickthrough and video URLs for GIMP sliced files GIMP does not provide a workflow to allow setting the clickthrough URLs from within the tool itself. See the Adding Video and Clickthrough URLs section for additional background. Instead, URLs must be added to the published HTML code that GIMP produces when the slices are exported. This requires a small bit of code editing. In order to make changes to the table layout, it is recommended to use a plain text editor (such as Sublime, Textmate, or Notepad) vs. an authoring tool (such as Adobe Edge or Google Web Designer) because the authoring tools may add additional code during save / export which will make your file incompatible with AdWords specs. Detailed steps:
1. Follow the Creating Slices & Publishing to HTML instructions to create your index .HTML file.
2. Open the index.HTML file in a text editor. You will see code that looks like this (it may also have some file comments at the top between <! >, they have been removed for the sake of brevity):
Example:
<table cellpadding="0" border="0" cellspacing="0"> <tr> <td><img alt=" " src="images/slice_0_0.png" style="width: 650px; height: 270px; borderwidth: 0px;"></td> </tr> <tr> <td><a href="#"><img alt=" " src="images/slice_1_0.png" style="width: 650px; height: 240px; borderwidth: 0px;"></a></td> </tr> <tr> <td><img alt=" " src="images/slice_2_0.png" style="width: 650px; height: 140px; borderwidth: 0px;"></td> </tr> </table>
3. Each piece of code inside the <td> and </td> HTML tags represents a slice. 4. Look for the <a href=”#”> code. This represents a clickthrough. The value inside the “”
after the href= is the clickthrough URL (by default GIMP sets this to “#”, which needs to be replaced with a real URL).
Example:
<table cellpadding="0" border="0" cellspacing="0"> <tr> <td><img alt=" " src="images/slice_0_0.png" style="width: 650px; height: 270px; borderwidth: 0px;"></td> </tr> <tr> <td><a href="#"><img alt=" " src="images/slice_1_0.png" style="width: 650px; height: 240px; borderwidth: 0px;"></a></td> </tr> <tr> <td><img alt=" " src="images/slice_2_0.png" style="width: 650px; height: 140px; borderwidth: 0px;"></td> </tr> </table>
5. If you would like this slice to go to a Video URL, replace the “#” with a Youtube URL such as http://www.youtube.com/watch?v=_I6iy1wmtQ (keep the surrounding “”):
Example:
<table cellpadding="0" border="0" cellspacing="0"> <tr> <td><img alt=" " src="images/slice_0_0.png" style="width: 650px; height: 270px; borderwidth: 0px;"></td> </tr> <tr> <td><a href="http://www.youtube.com/watch?v=_I6iy1wmtQ"><img alt=" " src="images/slice_1_0.png" style="width: 650px; height: 240px; borderwidth: 0px;"></a></td> </tr> <tr> <td><img alt=" " src="images/slice_2_0.png" style="width: 650px; height: 140px; borderwidth: 0px;"></td> </tr> </table>
6. If you would like this slice to go to a Clickthrough URL, replace the “#” with the landing page URL such as http://www.your.landingpage.com (keep the surrounding “”):
Example:
<table cellpadding="0" border="0" cellspacing="0"> <tr> <td><img alt=" " src="images/slice_0_0.png" style="width: 650px; height: 270px; borderwidth: 0px;"></td> </tr> <tr> <td><a href="http://www.your.landingpage.com"><img alt=" " src="images/slice_1_0.png" style="width: 650px; height: 240px; borderwidth: 0px;"></a></td> </tr> <tr> <td><img alt=" " src="images/slice_2_0.png" style="width: 650px; height: 140px; borderwidth: 0px;"></td> </tr> </table>
7. To add additional URLs to other slices, it will be necessary to add an <a href=”#”> before the <img> tag and and a closing </a> tag after it. This must be between the <td> and </td> tags (see below). This will make the slice a clickthrough.
Example:
<table cellpadding="0" border="0" cellspacing="0"> <tr> <td><a href="#"><img alt=" " src="images/slice_0_0.png" style="width: 650px; height: 270px; borderwidth: 0px;"></a></td> </tr> <tr> <td><a href="http://www.youtube.com/watch?v=_I6iy1wmtQ"><img alt=" " src="images/slice_1_0.png" style="width: 650px; height: 240px; borderwidth: 0px;"></a></td> </tr> <tr> <td><a href="#"><img alt=" " src="images/slice_2_0.png" style="width: 650px; height: 140px; borderwidth: 0px;"></a></td> </tr> </table>
8. Repeat steps 5 and 6 to add the Video or Clickthrough URLs for those slices. 9. If we add a click through for the 1st and 3rd slice and a video URL for the 2nd slice, we
should end up with this: Example:
<table cellpadding="0" border="0" cellspacing="0"> <tr> <td><a href="http://www.your.landingpage.com"><img alt=" " src="images/slice_0_0.png" style="width: 650px; height: 270px; borderwidth: 0px;"></a></td> </tr> <tr> <td><a href="http://www.youtube.com/watch?v=_I6iy1wmtQ"><img alt=" " src="images/slice_1_0.png" style="width: 650px; height: 240px; borderwidth: 0px;"></a></td> </tr> <tr> <td><a href="http://www.your.landingpage.com"><img alt=" " src="images/slice_2_0.png" style="width: 650px; height: 140px; borderwidth: 0px;"></a></td> </tr> </table>
10. You can validate that this is working as expected by saving the modified index.html file and loading it in a web browser. Clicking on the slices should drive to the corresponding landing pages or Youtube video.