Página inicial dos anúncios de gadget
Visão geralDesenvolvimento do anúncioAjuda dos anúncios de gadget |
Como construir anúncios de gadget do GoogleEste documento foi preparado para as pessoas que desejam construir um anúncio de gadget do Google. Vamos abordar dicas sobre como iniciar e destacar algumas das principais diferenças entre os Gadgets do Google e os anúncios de gadget do Google. Existem outras funções de implementação que você deve usar ao construir o seu anúncio. Elas estão documentadas aqui e devem ser usadas como principal referência. Conteúdo
IntroduçãoOs anúncios de gadget do Google são construídos usando a mesma tecnologia dos Gadgets do Google para o iGoogle. Do ponto de vista técnico, os gadgets são apenas arquivos XML que são hospedados externamente em um servidor público. O conteúdo do gadget é composto de HTML padrão, JavaScript e CSS. Os gadgets são como páginas da web em miniatura. Você pode fazer em um gadget tudo o que você pode fazer em uma página da web. A compreensão das noções básicas dos gadgets é o primeiro passo obrigatório para a criação de seus próprios anúncios de gadget do Google. Antes de seguir em frente, visite o Guia do desenvolvedor do Google Gadgets API e leia todas as seções de Primeiros passos e Como criar os seus próprios gadgets. Sugerimos que pelo menos siga os exemplos para construir um gadget para iniciantes. Sua capacidade de criar gadgets de boa qualidade, capazes de atingir milhões de usuários, está diretamente ligada à sua compreensão do que são os gadgets, de como eles funcionam e de quais recursos estão disponíveis. Quando tiver uma noção básica do que são os gadgets e do XML, o próximo passo é entender as diferenças entre os anúncios de gadget do Google e os Gadgets do Google no iGoogle. Adequação às políticas do IAB e de publicidade em mídia avançada do GoogleEmbora os anúncios de gadget sejam um formato exclusivo para o Google, consideramos de extrema importância que esses anúncios estejam em conformidade com os padrões da indústria e com as políticas aceitas pelo Google sobre mídia avançada e publicidade dinâmica. É muito importante que você esteja em conformidade tanto com o IAB (Internet Advertising Board) quanto com as políticas corporativas do Google em relação às formas de publicidade aceitáveis. Além das diretrizes de sempre manter a transparência com os usuários, há algumas considerações especiais que podem não ser tão claras à primeira vista. Por exemplo, as páginas podem ter vários anúncios nelas — o que significa que seu anúncio não pode tocar um áudio no carregamento ou poderá entrar em conflito com outros anúncios. O Google desenvolveu um conjunto inicial de diretrizes editoriais que devem ser seguidas. Essas diretrizes podem ser encontradas no link abaixo: http://adwords.google.com/support/bin/answer.py?answer=66136&hl=pt_BR Desempenho e uso de banda largaEm muitas partes do mundo, usuários e empresas pagam muito para ter banda larga. Assim, é importante respeitar suas necessidades e manter os anúncios pequenos. Além disso, se os anúncios diminuíssem muito a velocidade das páginas, a web ficaria lenta e todos nós sofreríamos. O Google tem percebido que a latência tem um impacto direto e óbvio no desempenho dos anúncios. O IAB limita os tamanhos dos anúncios de mídia avançada com base nas dimensões do anúncio, mas nenhum anúncio pode ter mais de 40k no carregamento. A preferência do Google é de que os anunciantes estejam sempre em conformidade com os padrões do IAB. Para visualizar os padrões de mídia avançada do IAB, visite o documento abaixo: http://www.iab.net/standards/richmedia/pdf/RichMediaGuidelines3.pdf Como os anúncios de gadget têm um formato novo e exclusivo, o Google configurou um máximo de 50KB (kilobytes) permitidos "no carregamento" de um anúncio durante o período beta. A definição de "no carregamento" é complicada, mas deve ser considerada como o tamanho do anúncio quando ele é carregado na página e antes de um consumidor interagir com ele. Se o usuário tiver "interagido" com o anúncio de gadget, então não vai haver problemas em usar mais de 50KB. Tanto pelo limite de 50KB quanto pela regra de sem áudio, mencionada acima, normalmente não é possível mostrar o vídeo "no carregamento”, mas pequenas seqüências de animação funcionam. Cliques irrelevantes e cliques de destino induzidosÉ comum os anunciantes tentarem induzir um clique com um anúncio de gadget mas recomendamos que você não faça isso. Esquecendo as ameaças, saiba que os cliques irrelevantes não têm o menor sentido em anúncios de gadget— anunciantes com base em cliques ganham quando os usuários escolhem livremente clicar para saber mais sobre produtos ou serviços. Cliques irrelevantes em anúncios de gadget aumentam a taxa de cliques, à custa da conversão. Assim, levar o usuário a clicar em um anúncio com artimanhas para atrair cliques é auto-destrutivo. O problema mais sutil são as baixas taxas de cliques. Por exemplo, se os cliques através de URLs não forem posicionados adequadamente, o gadget vai "funcionar", mas não vai ser executado caso ele use a publicidade baseada em CPC (custo por clique). Ainda mais sutil, sua ajuda no design da interface do usuário pode ajudar os anunciantes a compreenderem as implicações da publicidade baseada em CPM (pagamento por impressões, não por cliques) vs. CPC vs. CPA (pagamento por conversões). Cliques de destino (cliques que levam os usuários a outro site) devem ser identificados visualmente como causadores de cliques vs. interações internas no gadget. O Google sugere que isto seja feito com todos oscliques de destinosublinhados e com a fonte em cor azul. Anúncios animadosA animação deve ter duração máxima de 15 segundos (com uma taxa de 15 a 20 frames por segundo). Não são permitidas repetições infinitas. Os anúncios podem realizar repetições por um número infinito de vezes por, no máximo, 15 segundos. Privacidade e cookiesO Google requer que os anúncios sejam totalmente anônimos. O anúncio de gadget do Google não pode criar ou ler cookies, nem usar mecanismos semelhantes a cookies, como o armazenamento local do flash. Visualizamos isto como um aspecto crucial do respeito à privacidade do usuário. Esta é uma regra muito importante — não erre. Anúncios com downloads e malwareOs anúncios de gadget não podem fazer o download (ou tentar fazer download) de qualquer software para o computador do usuário. No momento, o IAB e o Google não permitem links de download internos aos gadgets — estamos investigando modos de alterar essas diretrizes de modo a permitir links para downloads internos aos anúncios de gadget— enquanto isso os anunciantes devem colocar todos os links para downloads na “página de destino” (a página de destino dos cliques). Janelas pop-upNão use “alert()”, “confirm()” ou outras caixas de diálogo "modais" de modo algum. Também não permitimos links para páginas que geram pop-ups quando os usuários entram ou saem da página de destino. Consideramos pop-up qualquer janela que se abra além da janela original, independentemente do conteúdo. Anúncios de gadget do Google vs. Gadgets do Google no iGooglePara os gadgets no iGoogle, não existem restrições e requisitos relacionados a como o gadget é implementado. O conteúdo do gadget é composto de HTML padrão, o que significa que você pode incorporar todo tipo de conteúdo como imagens, Flash, vídeos, etc., como o faria em uma página da web normal. Você também tem acesso completo a nossas diversas funções API sem quaisquer restrições relacionadas a como elas são usadas. Por outro lado, os anúncios de gadget devem estar em conformidade com um conjunto de requisitos a serem cumpridos para que eles sejam aprovados. Há dois tipos de requisitos para os anúncios de gadget:
São esses requisitos que diferenciam os anúncios de gadget do Google dos Gadgets do Google no iGoogle. Requisitos XMLOs gadgets regulares no iGoogle podem conter o mínimo absoluto do XML. Segue um exemplo: <?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="My Gadget"/>
<Content type="html"><![CDATA[
Hello world!
]]></Content>
</Module>
Para os anúncios de gadget do Google, você deve definir alguns elementos e atributos extras no XML que, de outra forma, não seriam necessários. Este é um Snippet de um código XML do Anúncio em gadget, no qual os elementos e atributos obrigatórios estão em negrito: <?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>
Os anúncios de gadget estão disponíveis nos mesmos formatos dos anúncios gráficos. Os atributos
Requisitos de implementaçãoComo requisitos de implementação, siga as instruções contidas neste documento sobre como implementar as diversas peças com base nas necessidades do seu gadget. Veja uma lista dos requisitos com os respectivos links para as instruções de implementação:
As diversas seções deste documento abordam os detalhes de implementação relacionados a como cumprir cada um desses requisitos. Primeiros passosAgora que você já tem um melhor conhecimento dos requisitos dos anúncios de gadget, comece a construí-los. Para ajudar você a dar o primeiro passo, fornecemos uma lista de anúncios de gadgetde exemplo que você pode usar para iniciar rapidamente. Os exemplos estão todos parcialmente concluídos e incluem todos os elementos e atributos XML obrigatórios. Cada arquivo pode conter conjuntos de Snippets de código que cumprem diversos requisitos de implementação. Dependendo do arquivo escolhido, o conjunto de Snippets vai ser diferente. Você pode usar os Snippets e ampliar o código a partir deles ou simplesmente inserir algumas informações próprias para fazer um gadget completo. O uso dos exemplos abaixo como ponto de partida permite que você economize tempo e trabalho. Como os Snippets já foram pré-gravados para serem aprovados, isso pode acelerar o processo de aprovação quando você enviar o seu anúncio. Para iniciar rapidamente, escolha um exemplo de anúncio de gadget apropriado na lista abaixo com base no tipo de gadget que você deseja construir. Após fazer o download e hospedar o XML, examine-o e faça as alterações necessárias no conteúdo.
Uso do Editor de anúncios de gadget do GoogleUm dos modos mais rápidos e mais fáceis de começar a criar gadgets é usar o Editor de anúncios de gadget do Google também conhecido pela abreviação GGAE (de Google Gadgets Ads Editor). O GGAE é uma ferramenta de desenvolvimento de gadgets que permite que você construa, teste e valide o seu gadget antes de enviá-lo para exame. Ele contém um editor rich text no qual você pode criar os seus gadgets além de permitir que você salve o seu gadget e o hospede por meio do GGAE. Você também pode carregar arquivos através do GGAE, que se serve dos servidores do Google. A vantagem de usar o GGAE para hospedar seus ativos é que você não precisa se preocupar com a largura da banda. Contudo, todos os ativos ainda precisam ser armazenados em cache, mesmo os arquivos hospedados no GGAE. Ao enviar um anúncio de gadget para exame, é obrigatório usar o GGAE para validar o anúncio de gadget antes do envio. A ferramenta de validação incorporada verifica automaticamente os diversos requisitos do Anúncio em gadget como os requisitos de XML mencionados acima além de diversos requisitos de implementação. Para diminuir o tempo necessário para a aprovação de seu anúncio, lembre-se de executar a ferramenta de validação em seu gadget e verifique se todas as verificações foram aprovadas. Use o Editor de anúncios de gadget do Google para construir seus gadgets. Acompanhamento de cliquesTodos os anúncios de gadget devem ter ao menos um link de saída, no qual os usuários vão poder clicar para serem redirecionados a algum destino remoto, geralmente uma página de destino de algum tipo. Para determinar as taxas de clique do seu anúncio de gadget, é necessário acompanhar todos os cliques em todos os links de saída designados. Isso requer uma pequena alteração de implementação no modo como você define seus links.
O modo tradicional de criação de um link de saída no HTML é a criação de uma tag âncora e a configuração do URL de destino no atributo <a target="_top" href="http://mytargetdomain.com">Target Link</a> Para ativar o acompanhamento de cliques neste link, use a função JavaScript a seguir para iniciar o redirecionamento:
Este é o mesmo link de cima, exceto pelo fato de que agora o acompanhamento de cliques está ativado: <a href="javascript:_ADS_ClickDestinationUrl('http://targetdestination.com');">Target Link</a>
Você pode chamar esta função de qualquer lugar para simular um clique. Segue um exemplo de como criar um clique usando um botão de entrada: <input onclick="javascript:_ADS_ClickDestinationUrl('http://targetdestination.com');" type="button" value="Target Link"/>
Cliques no Flash
Para criar cliques no Flash, basta chamar a função JavaScript usando o ActionScript. Faça isso usando getURL(javascript:_ADS_ClickDestinationUrl('http://targetdestination.com');)
Ativação do modo de depuração
Para verificar se os cliques estão configurados e funcionando corretamente, ative o modo de depuração definindo o <UserPref name="clickurl" datatype="hidden" default_value="DEBUG"/>
No modo de depuração,
Observação: o modo de depuração é desativado automaticamente quando o anúncio de gadget é publicado na rede de conteúdo. Não é preciso limpar o valor "DEBUG" antes de enviar o anúncio. Acompanhamento das interações do usuárioO acompanhamento das interações do usuário é muito importante nos anúncios de gadget. Ao contrário dos anúncios de exibição tradicional, os anúncios de gadget devem ter um conteúdo atraente e altamente interativo. Um anúncio de gadget de sucesso normalmente faz com que os usuários interajam com o conteúdo. Se todas as interações de usuário forem relatadas, você pode analisar os dados e medir o sucesso do seu anúncio de gadget. Para obter estes dados importantes, é preciso acompanhar todas as interações de usuário possíveis. Para relatar interações, configure os manipuladores de eventos JavaScript em seu anúncio de gadget para serem disparados pelas interações de usuário que você quer acompanhar. Faça com que cada retorno do manipulador de eventos execute uma das funções JavaScript abaixo. Cada chamada envia um acesso ao nosso servidor de acompanhamento e relata a interação:
Observação: se o parâmetro Aqui está um exemplo de um gadget que relata interações na primeira colocação do mouse sobre o anúncio e quando há o clique em qualquer um dos quatro links de item: (Visualização) <?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>
<script>
var mouseover_detected = false;
document.body.onmouseover = function() {
if (!mouseover_detected) {
_ADS_ReportInteraction('mouse_over');
mouseover_detected = true;
}
};
</script>
]]></Content>
</Module>
Interações no Flash
Para acompanhar interações em seus aplicativos Flash, chame getURL("javascript:_ADS_ReportInteraction('mouse_over', 1);");
Ativação do modo de depuraçãoÉ muito importante implementar de modo correto o acompanhamento de interações. Se ele não for implementado corretamente, você corre o risco de receber uma quantidade significativamente menor de dados em seus relatórios. Sem os relatórios, não há como determinar o sucesso do seu anúncio de gadget. Ative o modo de depuração para verificar facilmente se os acessos de interação estão sendo relatados corretamente.
Para ativar o modo de depuração configure o <UserPref name="aiturl" datatype="string" default_value="DEBUG"/> Isso ativa o modo de depuração para o acompanhamento de interações, o que vai criar um pequeno buffer de depuração no canto superior esquerdo do seu gadget. Inicialmente, uma barra de título com o link "DEBUG" vai aparecer com um contador de mensagens para o número de itens que estão no buffer no momento. Clique no link para expandir o recipiente onde estão as mensagens. O recipiente do buffer foi projetado para cobrir todo conteúdo HTML como texto, imagens, Flash e iframes para garantir que ele continue visível. Segue uma visualização de um Exemplo de anúncio de gadget que relata diversas interações. Clique no gadget para verificar se os acessos de interação estão sendo enviados para o buffer.
Sempre que uma interação é relatada via Observação: o modo de depuração é desativado automaticamente quando o anúncio de gadget é publicado na rede de conteúdo. Não é preciso limpar o valor "DEBUG" antes de enviar o anúncio. Extração de conteúdo remotoUm excelente recurso dos gadgets é a capacidade de extrair conteúdo remoto de sites de terceiros e exibi-lo dentro do seu gadget. Atualmente, a API oferece três funções diferentes para fazer isso, dependendo do tipo de conteúdo a ser recuperado:
Exemplo: Como extrair de um feed Atom/RSSAqui está um exemplo no qual a primeira entrada do feed é extraída do feed Atom do Google Notícias e retornada como um objeto JSON. A função de retorno recebe a resposta e produz um HTML gerado a partir do título, link e resumo da entrada. <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>
Visite o guia do desenvolvedor para obter uma documentação mais detalhada. Incorporação de imagensUm dos requisitos dos anúncios de gadget é que você tenha todas as imagens incorporadas armazenadas em cache por meio dos servidores do Google. É esperado que os anúncios de gadget recebam uma enorme quantidade de tráfego todos os dias. Se o armazenamento em cache não for ativado, os provedores de hospedagem de imagens vão ficar sobrecarregados com o grande número de solicitações recebidas. O Google fornece duas funções JavaScript que permitem armazenar todas as imagens em cache de modo eficiente. Entretanto, há um passo extra a ser implementado para conseguir isto.
O modo tradicional de incorporar uma imagem em HTML é pelo uso de tags <img src="http://www.google.com/intl/en_ALL/images/logo.gif"/> Para armazenar suas imagens em cache, você deve usar uma das duas funções abaixo para obter o elemento de imagem armazenado em cache ou o URL de origem no JavaScript e adicioná-lo ao seu gadget. É aqui que entra o passo extra.
Há diversos modos de usar as duas funções acima para incorporar imagens armazenadas em cache ao seu gadget, dependendo da função que você usar. Aqui está um exemplo que demonstra um meio de armazenar a imagem: <img id="logoImg" src=""/>
<script>
_gel("logoImg").src = _IG_GetImageUrl("http://www.google.com/intl/en_ALL/images/logo.gif");
</script>
Este é um modo alternativo ao uso da outra função: <div id="logoContainer"></div>
<script>
_gel("logoContainer").appendChild(_IG_GetImage("http://www.google.com/intl/en_ALL/images/logo.gif"));
</script>
Imagens no plano de fundo
Existem outros modos de inserir imagens sem seus gadgets além do uso das tags <div id="panel">This content has a background image</div>
<script>
_IG_RegisterOnloadHandler(function() {
_gel("panel").style.background = "transparent url(" + _IG_GetImageUrl("http://www.google.com/intl/en_ALL/images/logo.gif") + ") 0px 0px no-repeat";
});
</script>
Incorporação do conteúdo FlashCaso o seu anúncio de gadget incorpore o Flash dentro do gadget, use a biblioteca Flash para fazê-lo. Além de garantir a incorporação correta em diversos navegadores, a biblioteca Flash também permite que você armazene em cache, de modo fácil, o conteúdo Flash. O armazenamento em cache do conteúdo Flash é obrigatório e ajuda a aprimorar o desempenho do gadget além de evitar que os servidores de hospedagem fiquem sobrecarregados.
Comece adicionando <ModulePrefs title="Gadget Ad" ... > <Require feature="ads"/> <Require feature="flash"/> </ModulePrefs>
Isso permite que você use a biblioteca Flash, que expõe a função JavaScript
Segue um exemplo que demonstra como usar a função para incorporar um objeto Flash armazenado em cache: <div id="container"></div>
<script>
_IG_EmbedCachedFlash('http://www.mysite.com/flash.swf', 'container', {
swf_version: 6,
width: 300,
height: 250
});
</script>
Armazenamento em cache de recursos-filhos no FlashOs objetos Flash podem ser incorporados em outros recursos filhos como imagens e outros objetos Flash. Contudo, os anúncios de gadget devem manter armazenados em cache todos os recursos incorporados para evitar que os servidores de hospedagem sejam sobrecarregados com solicitações. Cada recurso incorporado pertence a uma de duas categorias:
Dependendo da categoria aplicada, o armazenamento em cache do recurso é um pouco diferente. Mesmo domínio
Os recursos da primeira categoria estão hospedados no mesmo domínio do objeto Flash que os acessa. Esses recursos podem ser chamados pelo uso de um caminho relativo. Todos os arquivos Flash que são extraídos usando a função Domínio de terceiros
Os recursos da segunda categoria estão hospedados no domínio de terceiros. Esses recursos só podem ser chamados pelo uso de um caminho absoluto para a origem, o que significa que eles não vão ser armazenados em cache automaticamente. Para ativar o armazenamento em cache, é preciso usar o escape para o URL do recurso e anexá-lo a /ig/proxy?url=<ESCAPED_RESOURCE_URL> Este Snippet mostra como os URLs dos recursos devem ser construídos no Flash usando o ActionScript: "/ig/proxy?url=" + escape("http://thirdpartydomain.com/child_flash.swf")
Como usar o FlashVars para passar variáveis para o FlashO FlashVars permite que você passe variáveis para o arquivo Flash. Usando o ActionScript, você pode acessar cada variável e usá-la dentro de seu aplicativo Flash.
O objeto Flash deve ser incorporado com a função
A string var1=value1&var2=value2&var3=value3&var4=value
Observação: ao criar a string Segue um exemplo que mostra como deve ser a aparência da implementação: _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')
});
Incorporação do conteúdo de vídeoPara anúncios de gadget, recomendamos veementemente que você hospede o seu vídeo no YouTube. Visualize as instruções sobre como carregar vídeos se não estiver familiarizado com esse processo. A hospedagem dos vídeos no YouTube garante que o seu servidor de hospedagem de vídeos vai ser capaz de lidar com o tráfego e o com a carga proveniente do seu anúncio de gadget. Depois que o seu vídeo for hospedado, você pode utilizar o player avançado do YouTube para reproduzir vídeos no seu gadget, ou pode fornecer o vídeo para o seu próprio Flash player personalizado. Como usar o player do YouTube para reproduzir vídeoSe quiser usar o player do YouTube, é muito fácil fazê-lo. Ele é apenas um aplicativo Flash que pode ser incorporado em qualquer lugar de seu gadget. Aqui está o que você precisa fazer.
Como usar o seu próprio Flash Player com os vídeos do YouTubeVocê também pode usar o seu próprio Flash player, sem marca, para reproduzir os vídeos hospedados no YouTube. Tudo o que você precisa é de um URL que aponte para o vídeo FLV hospedado nos servidores do YouTube. Com o URL do FLV, é possível usá-lo para reproduzir o vídeo de dentro do próprio Flash player. Isso é excelente porque, assim, a carga não precisa hospedar o próprio vídeo de origem. A reprodução também ajuda a manter o tamanho de arquivo baixo porque não é armazenado localmente. Construindo o URL do FLV
O que você precisa primeiro é o URL do FLV. Isso só pode ser criado internamente no gadget, o que é passado depois para o aplicativo Flash, por meio do http://www.youtube.com/get_video?video_id=YOUTUBE_VIDEO_ID&ts=TIMESTAMP&t=YOUTUBE_SIGNATURE&gad=1
Usando o URL do FLV
Agora que você tem o URL do FLV, passe-o para o seu Flash player. Incorpore o Flash player usando a função var flvUrl = "http://www.youtube.com/get_video?video_id=C5rTJkfBhbQ&ts=__ENV_time_secs_since_epoch__&t=__YOUTUBE_VIDEO_TEST(C5rTJkfBhbQ)__&gad=1";
_IG_EmbedCachedFlash("http://examplesite.com/myplayer.swf", "vid", {
swf_version: 8,
width: 300,
height: 250,
flashvars: 'flvURL=' + _esc(flvUrl)
});
Reproduzindo o FLV com o ActionScript
ExemploAqui está um gadget de exemplo que reproduz vídeos do YouTube usando o seu próprio player. Estudo de caso: Anúncio de gadget simplificado no GmailO anúncio de gadget do Gmail é um gadget de muito sucesso, que recebe em média 1,4 milhão de visualizações de página por semana. Ele pode ser adicionado facilmente à sua página inicial ou incorporado em outras páginas da web. O melhor modo de aprender a escrever anúncios de gadget de sucesso é construindo um sozinho. Assim, vamos construir uma versão simplificada do anúncio de gadget do Gmail. Não vamos replicar todos os recursos do gadget original. Entretanto, no final, você vai ter um gadget que inclui um vídeo do Gmail, o logotipo da marca, e um link clicável que permite aos usuários criarem uma conta do Gmail. Coleta de recursosAo construir inicialmente um gadget, é extremamente útil saber quais os recursos necessários para construir o gadget. Os recursos podem ser qualquer conteúdo no gadget, como imagens, URLs, objetos Flash etc. Normalmente, você seria responsável por localizar e/ou criar os recursos necessários para o seu gadget. Neste exemplo, vamos supor que você tenha criado a lista de recursos abaixo:
Partindo do zero
Começamos com um modelo de gadget vazio. A imagem de segundo plano tem 300 x 250 pixels. Vamos configurar a largura e a altura do gadget como sendo 300 x 250 por meio da configuração dos atributos <?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>
Crie o layout do conteúdoA imagem de segundo plano determina como e onde o conteúdo do gadget vai ser disposto. Queremos que o anúncio de vídeo do Gmail seja o destaque desse gadget. Assim, vamos fazê-lo ocupar a área central. A imagem de segundo plano deixa espaço para isso. No topo da imagem, há dois ícones para “Vídeos” e “Dicas secretas”. Nós não vamos usa-los neste exemplo, mas temos algum espaço livre à direita deles. Vamos colocar um link ali que redirecione os usuários para a página de inscrição do Gmail. No HTML, podemos usar tabelas para organizar e sobrepor o conteúdo em áreas específicas da imagem de segundo plano.
Agora, o seu gadget deve estar com a seguinte aparência: <?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>
Adicione o vídeo do anúncio do GmailNa linha de conteúdo principal da tabela, incorpore o anúncio em vídeo do Gmail. Essa linha tem as dimensões de 300 x 220 pixels. Lembre-se de configurar a largura e a altura do vídeo incorporado para que ele se encaixe nestas dimensões. Sinta-se à vontade para mexer nas dimensões do vídeo aqui para criar um preenchimento de espaço em branco maior ou menor.
<?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_GetImageUrl("http://www.labpixies.com/gadgads/gmail/images/background.png") + ")";
// Embed the Gmail video from YouTube
_IG_EmbedCachedFlash("http://www.youtube.com/v/_YUugB4IUl4", _gel("video"), {
width: 300,
height: 210
});
});
</script>
]]></Content>
</Module>
Insira o link de inscrição para o Gmail
No canto superior direito não utilizado, vamos criar um link para a inscrição no Gmail que redirecione os usuários a uma página da web, na qual eles podem inscrever-se para obter uma conta do Gmail. Queremos que o anúncio de gadget acompanhe os cliques neste link. Assim, vamos precisar usar o Neste exemplo, os ícones “Vídeos” e “Dicas secretas” não são usados. Para posicionar o link à direita desses ícones, podemos simplesmente adicionar algum preenchimento à esquerda na célula da tabela, o que vai empurrar o link para a direita passando pelos ícones. Faça alguns testes para determinar a quantidade correta de preenchimento necessário. Como a tabela tem 300 pixels de largura, um bom ponto de partida seria em torno de 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>
// Cache the background image of the table
_gel("main").style.background = "transparent url(" + _IG_GetImageUrl("http://www.labpixies.com/gadgads/gmail/images/background.png") + ")";
// Embed the Gmail video from YouTube
_IG_EmbedCachedFlash("http://www.youtube.com/v/_YUugB4IUl4", _gel("video"), {
width: 250,
height: 210
});
});
</script>
]]></Content>
</Module>
Ative o acompanhamento de interações
Finalmente, vamos enviar um acesso de interação quando o usuário inicialmente passar o mouse sobre o anúncio. Para tanto, é preciso vincular um manipulador de evento <?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>
// Track initial mouseover the ad
var mouseover_hit = false;
_IG_AddDOMEventHandler(document.body, 'mouseover', function() {
if (!mouseover_hit) {
_ADS_ReportInteraction('mouse_over');
mouseover_hit = true;
}
});
// Cache the background image of the table
_gel("main").style.background = "transparent url(" + _IG_GetImageUrl("http://www.labpixies.com/gadgads/gmail/images/background.png") + ")";
// Embed the Gmail video from YouTube
_IG_EmbedCachedFlash("http://www.youtube.com/v/_YUugB4IUl4", _gel("video"), {
width: 250,
height: 210
});
</script>
]]></Content>
</Module>
O resultado finalParabéns! Você acabou de criar o seu primeiro anúncio de gadget. Esta é uma instância publicada mostrando como deve ser a aparência do gadget final (adicionar agora): Recursos
ReferênciaBiblioteca JavaScriptEsta seção descreve as funções JavaScript que têm suporte da API de Gadgets do Google e que são especificamente relevantes para os anúncios de gadget do Google.
Lista de interações
|
 |
Anúncios de gadget |
