Gadget Ads Home
OverviewDeveloping Your AdGadget Ads HelpGoogle Gadgets |
How to Build Google Gadget AdsThis document is intended for people who want to build a Google Gadget Ad. We'll cover tips on how to get started and highlight some of the key differences between Google Gadgets and Google Gadget Ads. There are additional implementation functions that you're required to use when building your ad, which are documented here and should frequently be used as your primary reference. Contents
IntroductionGoogle Gadget Ads are built using the same technology as Google Gadgets for iGoogle. From a technical perspective, gadgets are simply XML files that are externally hosted on a public server. Gadget content is made up of standard HTML, JavaScript, and CSS. Gadgets are like mini-webpages. Whatever you can do inside a webpage, you can do inside a gadget. Understanding the fundamentals of gadgets is a required first step in creating your own Google Gadget Ads. Before moving forward, visit the Google Gadgets API Developer Guide and read through the Getting Started and Writing Your Own Gadgets sections. At the very least, follow the examples to build a hello world gadget. Understanding what gadgets are, how they work, and what features are available can significantly increase your ability to create high-quality gadget ads that are capable of reaching millions of users. Once you have a basic understanding of gadgets and the XML, the next step is to understand the differences between Google Gadget Ads and Google Gadgets on iGoogle. Conforming to IAB and Google Rich Media Advertising PoliciesWhile gadget ads are a format unique to Google, we consider it imperative that these ads conform to industry standards and Google's accepted policies around rich media and dynamic advertising. It is very important that you conform to both IAB (Internet Advertising Board) and Google corporate policies around acceptable forms of advertising. Beyond "obvious" guidelines about not misleading users, there are some special considerations that may not be obvious at first. For example, pages can have multiple ads on them — so you cannot play audio on load, or the ads will conflict. Google has developed an initial set of editorial guidelines that must be adhered to. You can see these guidelines at the link below: http://adwords.google.com/support/bin/answer.py?answer=66136 Performance and Bandwidth UseIn many parts of the world, users and companies pay a lot of money for bandwidth and so it is important to respect their needs to keep ads small. Moreover, if ads slowed down webpages too much, then the web would seem slow and we would all suffer. Google has consistently seen that latency has a direct and obvious impact on the performance of ads. The IAB limits rich media ad sizes based on the dimensions of the creative, but no ads are allowed to be over 40k on load. Google's preference is always that advertisers should comply with the IAB's standards. To view the IAB's standards on rich media, visit the document below: http://www.iab.net/media/file/standards_richmedia_pdf_RichMediaGuidelines3.pdf File Size LimitAs gadget ads are a new and unique format Google has set a maximum of 50 KB (kilobytes) allowed "on load" for an ad during our beta period. The definition of "on load" is tricky, but should be taken to mean the size of the ad when it is loaded with the page and prior to a consumer interacting with it. If the user has "interacted" with the gadget ad, then it is OK to use more than 50KB. Both for the 50KB limit and the no-audio rule mentioned above, "on load" video is generally not possible, but small animation sequences work. Bad Clicks and Misleading Click TargetsIt is trivial to simulate a click with a gadget ad — obviously, don't do this. Beyond threats, click fraud makes no sense for gadget ads — clickthrough-based advertisers ultimately make money when users willingly choose to click to learn more about products or services. Fraudulent gadget ad clicks increase clickthrough rate, at the expense of conversion. Similarly, "tricking" the user into clicking with bad click targets is self-defeating. The more subtle issue is low clickthrough rates. For example, if the clickthrough URLs are not properly placed, then the gadget will "work" but fail to run if it uses CPC (cost-per-click) advertising. More subtly, your help in user interface design can help advertisers understand the implications of CPM (paying for impressions, not clicks) vs. CPC vs. CPA (paying for conversions) advertising. Click targets (clicks that lead users to another website) must be visually identified as causing. clickthrough vs. in-gadget interactions. Google suggests doing this by having all click targets underlined and in a blue font color. Animated AdsAnimation is restricted to a maximum of 15 seconds (at a 15-20 fps frame rate). Endless loops are not allowed. Ads can loop an infinite number of times for a maximum of 15 seconds. Privacy and CookiesGoogle requires that ads are completely anonymous. Google Gadget Ads may not create or read cookies, or use other cookie-like mechanisms, e.g. flash local storage. We view this as a crucial aspect of respecting our users' privacy. This is a very important rule — do not make mistakes. Downloads and Malware AdsGadget Ads cannot download (or attempt to download) any software to the user's computer. Currently, IAB/Google does not permit download links from inside gadgets — we are investigating ways of changing these guidelines to allow download links from inside gadget ads — but today, advertisers must place all download links on the 'landing page' (destination page from clickthroughs). Popup WindowsDon't use alert(), confirm() or other "modal" dialog boxes for any reason. We also do not allow links to landing pages that generate pop-ups when users enter or leave your landing page. We consider a pop-up to be any window, regardless of content, that opens in addition to the original window. Google Gadget Ads vs. Google Gadgets on iGoogleWith gadgets on iGoogle, there are no restrictions and requirements on how the gadget is implemented. Gadget content is made up of standard HTML, meaning you can embed all types of content such as images, Flash, videos, etc. as you would on a normal webpage. You also have complete access to our various API functions with no restrictions on how they're used. On the other hand, gadget ads must adhere to a set of requirements that must be fulfilled in order for them to be approved. There are two types of requirements for gadget ads:
These requirements differentiate Google Gadget Ads from Google Gadgets on iGoogle. XML RequirementsRegular gadgets on iGoogle can contain the bare minimum XML. Here's an example: <?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="My Gadget"/>
<Content type="html"><![CDATA[
Hello world!
]]></Content>
</Module>
For Google Gadget Ads, you're required to define some extra elements and attributes in your XML that were otherwise not required. Here's a snippet of a gadget ad XML where the required elements and attributes are bolded: <?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="My Gadget Ad" width="300" height="250" thumbnail="">
<Require feature="ads"/>
</ModulePrefs>
<UserPref name="clickurl" datatype="hidden" default_value=""/>
<UserPref name="aiturl" datatype="hidden" default_value=""/>
<Content type="html"><![CDATA[
Hello content network!
]]></Content>
</Module>
Gadget ads are available in the same formats as image ads.
The
Implementation RequirementsFor gadget ad implementation requirements, you must follow the instructions contained in this document on how to implement the various pieces based on what your gadget needs. Here's a list of the requirements along with corresponding links to implementation instructions:
The various sections in this document cover the implementation details on how to fulfill each requirement. Getting StartedNow that you have a better understanding of gadget ad requirements, you can start building one. To help get you started, we've provided a list of example gadget ads that you can use to quickly get started. The examples are all partially completed and include all required XML elements and attributes. Each file may contain sets of code snippets that fulfill various implementation requirements. Depending on which file you choose, a different set of snippets will exist. You can take the snippets and expand on them, or simply swap in a few pieces of information on your own to make a complete gadget. By using the examples below as a starting point, you save time and work for yourself. Since the snippets are already pre-written to be approved, it can potentially speed up the approvals process when you submit your ad. To quickly get started, choose an appropriate gadget ad example below based on the type of gadget you want to build. After downloading and hosting the XML, go through and make necessary changes to the content.
Use the Google Gadget Ads EditorOne of the quickest and easiest ways to start writing gadgets is to use the Google Gadget Ads Editor also known as GGAE for short. GGAE is a gadget development tool that lets you build, test, and validate your gadget ads prior to being submitted for review. It contains a rich text editor where you can write your gadgets as well as the ability to save your gadget and host it through GGAE. You can also upload files through GGAE which gets served off of Google servers. The benefit of using GGAE to host your assets is that you don't to worry about server bandwidth. However, all assets are still required to be cached, even files that are hosted on GGAE. When submitting your gadget ad for review, it's required that you use GGAE to validate your gadget ad before submission. The built-in validation tool automatically checks for various gadget ad requirements such as the XML requirements mentioned above as well as various implementation requirements. In order to decrease the time involved to approve your ad, make sure to run the validation tool against your gadget and verify that all checks have passed. Use Google Gadget Ads Editor to build your gadgets. Tracking ClickthroughsAll gadget ads should have at least one exit link defined where users can click on the link and be redirected to some remote destination, usually a landing page of some kind. In order to determine clickthrough rates for your gadget ad, you need to track all clickthroughs on all your designated exit links. This requires a slight implementation change in the way you define your links. Note: This section applies to gadget ads delivered by AdWords. If you want to run ads on YouTube, read this section first and then read How to Run Gadget Ads on YouTube.
The traditional way you'd create an exit link in HTML is by creating an anchor tag
and setting the destination URL to the <a target="_top" href="http://mytargetdomain.com">Target Link</a> In order to enable clickthrough tracking on this link, you must use the following JavaScript function to initiate the redirect:
Here's the same link from above, except that clickthrough tracking is now enabled: <a href="javascript:_ADS_ClickDestinationUrl('http://targetdestination.com');">Target Link</a>
You can call this function from anywhere to simulate a clickthrough. Here's an example of creating a clickthrough using an input button: <input onclick="javascript:_ADS_ClickDestinationUrl('http://targetdestination.com');" type="button" value="Target Link"/>
Clickthroughs in Flash
To create clickthroughs in Flash, you need to simply call the JavaScript function
using ActionScript. You can do this by using getURL("javascript:_ADS_ClickDestinationUrl('http://targetdestination.com');", _root._ADS_GadgetContainer);
Enabling Debug Mode
In order to verify that your clickthroughs are set up and working correctly, you can enable
debug mode by setting the <UserPref name="clickurl" datatype="hidden" default_value="DEBUG"/>
In debug mode,
Note: Debug mode is automatically disabled when the gadget ad goes live on the content network. You do not need to clear the "DEBUG" value before submitting your ad. Tracking User Interactions*** No interactions must be recorded on initial load *** Tracking user interactions is very important to gadget ads. Unlike traditional display ads, gadget ads are encouraged to contain compelling and highly interactive content. A successful gadget ad often engages users to interact with the content. If all user interactions are reported, you can analyze the data and measure the success of your gadget ad. In order to get this important data, you need to track as many user interactions as possible. Note: This section applies to gadget ads delivered by AdWords only. If you want to run ads on YouTube using DoubleClick delivery, you'll need to use Google Analytics or a third-party solution to track user interactions. See the section on Tracking Interactions Using Google Analytics. To report interactions for gadget ads delivered by AdWords, set up JavaScript event handlers in your gadget ad to be triggered by user interactions that you wish to track. Have each event handler callback execute one of the JavaScript functions below. Each call will send a hit to our tracking server and report the interaction:
Note: If the Here's an example of a gadget that reports interactions when clicking on any of four item links: (live preview) <?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="My Items" width="300" height="250" thumbnail="">
<Require feature="ads"/>
</ModulePrefs>
<UserPref datatype="hidden" name="clickurl" default_value=""/>
<UserPref datatype="hidden" name="aiturl" default_value=""/>
<Content type="html"><![CDATA[
<a href="javascript:_ADS_ReportInteraction('item_1');" >Item 1</a>
<br>
<a href="javascript:_ADS_ReportInteraction('item_2');" >Item 2</a>
<br>
<a href="javascript:_ADS_ReportInteraction('item_3');" >Item 3</a>
<br>
<a href="javascript:_ADS_ReportInteraction('item_4');" >Item 4</a>
]]></Content>
</Module>
Default "mouseover" InteractionAll gadget ads delivered by AdWords automatically track mouseover interactions in a reliable way. An interaction labeled 'mouseover' will be reported the first time a user mouses over the ad and stays over the ad for 1 second. If the user mouses over and mouses out before 1 second passes by, then no interaction is reported. Because this interaction is being reported automatically for all gadget ads, expect to see an interaction labeled as 'mouseover' within your AdWords interaction reports. The one second delay significantly helps measure more accurately the number of users that have actually moused over and interacted with the ad. Without the delay, many accidental mouseover interactions will be reported and skew the metrics in the reports. Interactions in Flash
To track interactions in your Flash applications, call getURL("javascript:_ADS_ReportInteraction('play', 1);", _root._ADS_GadgetContainer);
Enabling Debug ModeInteraction tracking is very important to implement correctly. If it's not setup properly, you run the risk of receiving significantly less data in your reports. Without the reports, you have no way of determining the success of your gadget ad. You can easily verify whether interaction hits are being reported correctly by enabling debug mode.
To enable debug mode, set the <UserPref name="aiturl" datatype="string" default_value="DEBUG"/> This enables debug mode for interaction tracking, which creates a small debug buffer at the top left corner of your gadget. Initially, a title bar with the "DEBUG" link is shown along with a message counter for number of items currently in the buffer. Clicking on the link expands the container where you can then see the messages contained. The buffer container is designed to overlay on top of all HTML content such as text, images, Flash, and iframes to ensure that it remains visible. Here's a live preview of an example gadget ad that reports various interactions. Click around the gadget and confirm that interaction hits are being sent to the buffer.
Whenever an interaction is reported via Note: Debug mode is automatically disabled when the gadget ad goes live on the content network. You do not need to clear the "DEBUG" value before submitting your ad. Tracking Both Interaction & Clickthrough
The two sections above describe how to report either an interaction or a clickthrough. However
there may be many instances where you'll want to execute a clickthrough and also report an
interaction before the page redirects to the destination URL. Calling the two individual
methods, To report an interaction and execute a clickthrough reliably, call the following JavaScript function.
We have interaction labels to specifically track user clicks for any given destination URL. Here's a typical example on how this function can be used. <a href="javascript:_ADS_ReportInteractionClick('http://targetdestination.com', 'destination_url_1');">Target Link</a>
Interaction & Clickthrough in Flash
In Flash, use ActionScript to call the same JavaScript function,
getURL("javascript:_ADS_ReportInteractionClick('http://targetdestination.com', 'destination_url_1');", _root._ADS_GadgetContainer);
Fetching Remote ContentOne great feature of gadgets is the ability to fetch remote content from third-party websites and display it within your gadget. The API currently offers three different functions to do this, depending on the type of content being retrieved:
Example: Fetching from an Atom/RSS FeedHere's an example where the first feed entry is fetched from the Google News Atom feed and returned as a JSON object. The callback function takes the response and outputs HTML generated from the entry title, link, and summary. <div id="out"></div>
<script>
function callback(response) {
// Retrieve first entry from the response
var firstEntry = response.Entry[0];
// Generate HTML using the entry's title, link, and summary
_gel("out").innerHTML = [
'<a href="' + firstEntry.Link + '">' + firstEntry.Title + '</a>',
firstEntry.Summary,
].join("<br>");
}
// Fetch 1 entry from Google News Atom feed and include summaries
_IG_FetchFeedAsJSON("http://news.google.com/?output=atom", callback, 1, true);
</script>
Visit the developer guide for more detailed documentation. Embedding Images, Stylesheets, and JavaScriptOne of the requirements in gadget ads is that you cache all embedded images, stylesheets, and JavaScript files through Google servers. Gadget ads are expected to receive huge amounts of traffic per day. Without caching enabled, hosting providers will instantly become overloaded with the high number of requests coming in. Google provides you with two JavaScript functions that let you effectively cache all images, stylesheets, and JavaScript files. However, there is an extra step that you must implement in order to accomplish this. The traditional way you'd embed images, stylesheets, and JavaScript files in HTML is typically done by one of the following examples below: <img src="http://www.google.com/intl/en_ALL/images/logo.gif"/>
<script src="http://www.myresourcesite.com/mylibrary.js"></script>
<style> @import url("http://www.myresourcesite.com/mystylesheet.css"); </style>
To cache your resources, you must use one of the two functions below. One of them is used particularly for caching images while the other is more generally applied to caching all other types of resources. This is where the extra step comes in.
To cache your images, use Images<span id="imgContainer"><span/>
<script>
_gel("imgContainer").appendChild(_IG_GetImage("http://www.google.com/intl/en_ALL/images/logo.gif"));
</script>
Background Images<div id="panel">This content has a background image</div>
<script>
_gel("panel").style.background = "transparent url(" + _IG_GetCachedUrl("http://www.google.com/intl/en_ALL/images/logo.gif") + ") 0px 0px no-repeat";
</script>
External JavaScript
You can import external JavaScript files by using <script>
document.write('<scr' + 'ipt src="' + _IG_GetCachedUrl('http://www.myresourcesite.com/mylibrary.js') + '"></scr' + 'ipt>');
...
_IG_RegisterOnloadHandler(function() {
// Start writing JavaScript here
});
</script>
External CSS Stylesheet<script>
document.write('<style>@import url("' + _IG_GetCachedUrl('http://www.myresourcesite.com/mystylesheet.css') + '");</style>');
</script>
Embedding Flash ContentIf your gadget ad embeds Flash within your gadget, it's required that you use our Flash library to do it. In addition to verifying that it embeds correctly across multiple browsers, the Flash library also lets you easily cache your Flash content. Caching Flash content is required and helps improve gadget performance and prevent hosting servers from getting overloaded.
Start by adding a <ModulePrefs title="Gadget Ad" ... > <Require feature="ads"/> <Require feature="flash"/> </ModulePrefs>
This enables use of the Flash library,
which exposes the JavaScript function
Here's an example that demonstrates how to use the function to embed a cached Flash object: <div id="container"></div>
<script>
_IG_EmbedCachedFlash('http://www.mysite.com/flash.swf', 'container', {
swf_version: 6,
width: 300,
height: 250
});
</script>
Controlling the Cache
By default, all Flash files embedded using
Add the _IG_EmbedCachedFlash(swfUrl, swfContainer, {
width: 300,
height: 250,
refreshInterval: 1
});
If you choose to override the default caching behavior using
Important: Never leave the cache completely disabled. Before your gadget ad goes
live, make sure you remove the Caching Child Resources Within FlashFlash objects can embed other child resources such as images and other Flash objects. However gadget ads are required to cache all embedded resources in order to prevent hosting servers from being overloaded with requests. Each embedded resource falls under two categories:
Depending on which category applies, caching the resource is slightly different. Same Domain
Resources that fall under the first category are hosted on the same domain as the Flash object
that's accessing it. These resources can be referenced by using a relative path.
All Flash files that are fetched using Third-Party Domain
Resources that fall under the second category are hosted on a third-party domain.
These resources can only be referenced by using an absolute path to the source,
which means they won't be automatically cached. To enable caching, append
the resource URL to this relative path: /ig/proxy//<ABSOLUTE_RESOURCE_URL> Here's an example of what the full URL should look like when embedding a child resource that's hosted on another domain: /ig/proxy//http://thirdpartydomain.com/child_flash.swf Using FlashVars To Pass Variables Into FlashFlashVars allow you to pass in variables to your Flash file. Using ActionScript, you'll be able to access each variable and use it within your Flash application.
Your Flash object should be embedded using
The var1=value1&var2=value2&var3=value3&var4=value
Note: When creating the Here's an example that shows what the implementation might look like: _IG_EmbedCachedFlash('http://www.mysite.com/flash.swf', 'container', {
width: 300,
height: 250,
flashvars: 'var1=' + _esc('value1') + '&var2=' + _esc('value2') + '&var3=' + _esc('value3') + '&var4=' + _esc('value')
});
Embedding Video ContentFor gadget ads, we highly recommend hosting your video on YouTube. View the instructions on how to upload videos if you're unfamiliar with the process. Hosting videos on YouTube ensures that your video hosting server will be able to handle the traffic and load coming from your gadget ad. Once your video is hosted, you can utilize the advanced YouTube player for video playback in your gadget, or you can stream the video into your own custom Flash player. Using the YouTube Branded Player For Video PlaybackIf you want to use the YouTube branded player, that's very easy to do. The YouTube player is simply a Flash application that you can embed anywhere in your gadget. Here's what you need to do.
Unlike other Flash objects, the YouTube Flash branded player must not be
cached. In other words, you must use the traditional var swfUrl = "http://www.youtube.com/v/C5rTJkfBhbQ";
_IG_EmbedFlash(swfUrl, swfContainer, {
width: 300,
height: 250
});
Using Your Own Flash Player With YouTube VideosIf you want to use your own non-branded Flash player to playback videos hosted on YouTube, you can! All you need is the URL pointing to the FLV video hosted on YouTube servers. With the FLV URL, you can use it to stream the video from within your own Flash player. This is convenient because it removes the burden of having to host the source video yourself. Streaming also helps to keep your file size down because it's not stored locally. Getting the FLV URL
To stream from a YouTube hosted video, the first thing you need is the FLV URL
that points to the source of the video. This can only be created
from inside the gadget which must later be passed into the Flash application
via __YOUTUBE_VIDEO_URL(video_id)__
Simply replace You may want to store this value into your own variable which you will use later to pass the FLV URL into your Flash player. For example: var flvUrl = "__YOUTUBE_VIDEO_URL(C5rTJkfBhbQ)__"; Using the FLV URL
Now that you know have the FLV URL, you have to pass it to your Flash player.
Embed your Flash player using *** Make sure to escape all FlashVars values. *** var flvUrl = "__YOUTUBE_VIDEO_URL(C5rTJkfBhbQ)__";
_IG_EmbedCachedFlash("http://examplesite.com/myplayer.swf", swfContainer, {
swf_version: 8,
width: 300,
height: 250,
flashvars: 'flvUrl=' + _esc(flvUrl)
});
There's no limit to how many FLV URLs you can generate and pass into your Flash. If you need to stream from multiple videos on YouTube, simply create additional FLV URLs and pass them in. Here's an example:
var flvUrl0 = "__YOUTUBE_VIDEO_URL(ce9f0JP6eks)__";
var flvUrl1 = "__YOUTUBE_VIDEO_URL(vd6BPhJjYL4)__";
var flvUrl2 = "__YOUTUBE_VIDEO_URL(dNRE5x-V-sQ)__";
_IG_EmbedCachedFlash("http://examplesite.com/myplayer.swf", swfContainer, {
swf_version: 8,
width: 300,
height: 250,
flashvars: 'flvUrl0=' + _esc(flvUrl0) + '&flvUrl1=' + _esc(flvUrl1)+ '&flvUrl2=' + _esc(flvUrl2)
});
Playing the FLV using ActionScript
ExampleHere's an example gadget which plays videos from YouTube using its own player. Case Study: Simplified Gmail Gadget AdThe Gmail gadget ad is an extremely successful gadget, receiving an average of 1.4 million pageviews per week. It can easily be added to your homepage or embedded on other webpages. The best way to learn to write successful gadget ads is by building one yourself. So let's build a simplified version of the Gmail gadget ad. We won't replicate all the functionality in the original gadget. However, by the end, you'll have created a gadget that includes a Gmail video, the branded logo, and a clickable link that allows users to sign up for a Gmail account. (This tutorial assumes we're delivering this gadget ad using AdWords.) Collecting ResourcesWhen initially building a gadget, it's extremely helpful to know what resources are required to build your gadget. Resources can be any content in your gadget, like images, URLs, Flash objects, etc. Normally, you'd be responsible for finding and/or creating the resources required by your gadget. For this example, let's assume you created the resources listed here:
Starting from Scratch
We start with an empty gadget template. The background image is 300 x 250 pixels.
Let's set the width and height of the gadget to 300 x 250 by setting the <?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Simple Gmail Gadget Ad" width="300" height="250" thumbnail="">
<Require feature="ads"/>
</ModulePrefs>
<UserPref name="clickurl" datatype="hidden" default_value="DEBUG"/>
<UserPref name="aiturl" datatype="hidden" default_value="DEBUG"/>
<Content type="html"><![CDATA[
]]></Content>
</Module>
Create the Content LayoutThe background image determines how and where gadget content will be laid out.. We want the Gmail video ad to be the highlight of this gadget. So let's make it occupy the main center area. The background image makes room for this. At the top of the image, there are two icons for 'Videos' and 'Secret Tips'. We won't be using them in this example, but we have some free space to the right of it. Let's place a link there that redirects users to the Gmail sign-up page. In HTML, we can use tables to help us organize and overlay content above specific areas in the background image.
Your gadget should now look something like this: <?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Simple Gmail Gadget Ad" width="300" height="250" thumbnail="">
<Require feature="ads"/>
</ModulePrefs>
<UserPref name="clickurl" datatype="hidden" default_value="DEBUG"/>
<UserPref name="aiturl" datatype="hidden" default_value="DEBUG"/>
<Content type="html"><![CDATA[
<table width="300" id="main" border=1 cellspacing=0 cellpadding=0>
<tr height="30">
<td></td>
</tr>
<tr height="220">
<td></td>
</tr>
</table>
<script>
_IG_RegisterOnloadHandler(function() {
// Cache the background image of the table
_gel("main").style.background = "transparent url(" + _IG_GetImageUrl("http://www.labpixies.com/gadgads/gmail/images/background.png") + ")";
});
</script>
]]></Content>
</Module>
Add the Gmail Ad VideoIn the main content row of the table, let's embed the Gmail video ad. This row has dimensions of 300 x 220 pixels. Make sure you set the width and height of the embedded video to fit inside these dimensions. Feel free to play around with video dimensions here to create more or less whitespace padding.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Simple Gmail Gadget Ad" width="300" height="250" thumbnail="">
<Require feature="ads"/>
<Require feature="flash"/>
</ModulePrefs>
<UserPref name="clickurl" datatype="hidden" default_value="DEBUG"/>
<UserPref name="aiturl" datatype="hidden" default_value="DEBUG"/>
<Content type="html"><![CDATA[
<table width="300" id="main" border=0 cellspacing=0 cellpadding=0>
<tr height="30">
<td></td>
</tr>
<tr height="220">
<td valign=top>
<div id="video"></div>
</td>
</tr>
</table>
<script>
_IG_RegisterOnloadHandler(function() {
// Cache the background image of the table
_gel("main").style.background = "transparent url(" + _IG_GetCachedUrl("http://www.labpixies.com/gadgads/gmail/images/background.png") + ")";
// Embed the Gmail video from YouTube
_IG_EmbedFlash("http://www.youtube.com/v/_YUugB4IUl4", _gel("video"), {
width: 300,
height: 210
});
});
</script>
]]></Content>
</Module>
Insert the Gmail Sign-up Link
In the unused top-right corner, let's create a Gmail sign-up link that redirects
users to a webpage where they can sign up for a Gmail account. We want the
gadget ad to track clickthroughs on this link. So we'll
need to use In this example, the 'Videos' and 'Secret Tips' icons aren't used. To position the link to the right of these icons, we could simply add some left padding to the table cell which pushes the link towards the right past the icons. Experiment a bit to determine the right amount of padding needed. Since the table is 300 pixels wide, a good starting pointing would be around 200 pixels.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Simple Gmail Gadget Ad" width="300" height="250" thumbnail="">
<Require feature="ads"/>
<Require feature="flash"/>
</ModulePrefs>
<UserPref name="clickurl" datatype="hidden" default_value="DEBUG"/>
<UserPref name="aiturl" datatype="hidden" default_value="DEBUG"/>
<Content type="html"><![CDATA[
<table width="300" id="main" border=0 cellspacing=0 cellpadding=0>
<tr height="30">
<td style="padding-left: 190px; font-size: 12px;">
<a href="javascript:_ADS_ClickDestinationUrl('http://mail.google.com/mail/help/open.html#utm_campaign=en&utm_source=en-ha-na-us-gadget&utm_medium=ha')">Sign up for Gmail</a>
</td>
</tr>
<tr height="220">
<td align=center valign=top>
<div id="video"></div>
</td>
</tr>
</table>
<script>
_IG_RegisterOnloadHandler(function() {
// Cache the background image of the table
_gel("main").style.background = "transparent url(" + _IG_GetCachedUrl("http://www.labpixies.com/gadgads/gmail/images/background.png") + ")";
// Embed the Gmail video from YouTube
_IG_EmbedFlash("http://www.youtube.com/v/_YUugB4IUl4", _gel("video"), {
width: 250,
height: 210
});
});
</script>
]]></Content>
</Module>
The Final OutcomeCongratulations! You've just made your first gadget ad. Here's a live running instance showing what the final gadget should look like (add it now): Resources
ReferenceJavaScript LibraryThis section describes the JavaScript functions supported by the Google Gadgets API that are specifically relevant to Google Gadget Ads.
List of Interactions
|
 |
Gadget Ads |
