Era necessário então ser muito preciso nos dados do Google Analytics gerados pela Fanpage. Algo praticamente impossível dentro do Facebook. Mas os Cabanudos estão aí pra isso, né não?

O fluxo era o seguinte:

1 – Peças publicitárias foram espalhadas pela web: links patrocinados, banners em portais, etc, etc.

2 – Essas peças apontavam para a Fanpage no Facebook.

3 – A Fanpage apresentava links para a página final de conversão, dentro do site da FGV, onde estudantes poderiam se inscrever no vestibular.

Necessidade: Descobrir a fonte do clique que caiu na Fanpage e saber quais usuários fizeram o ciclo completo, do primeiro clique até a inscrição no site da FGV.

Primeiro desafio: descobrir a fonte do clique que caiu na Fanpage.

Depois da implementação dos iframes pelo Facebook (FB), ficou muito mais fácil trackear páginas com Google Analytics (GA), mas um ponto é totalmente obscuro: em suas estatísticas, toda fanpage do FB sempre terá os links referentes como o próprio FB. Ou seja, impossível saber de qual campanha os usuários vieram para a página. Não importa se o clique veio do Terra, Globo.com ou Links patrocinados, no GA sempre aparecerá “statik.facebook.com” ou algo parecido.

Solução: apontar todas as peças para o endereço real da Fanpage (que, como toda fanpage, fica fora do Facebook) e, dentro desta fanpage, iniciar uma sessão do GA e redirecionar o usuário.

Procurando artigos na web, achamos nossa fonte de inspiração: http://www.savio.no/blogg/a/104/how-to-track-facebook-iframes-with-google-analytics . Neste link você encontra explicações mais precisas sobre nosso procedimento.

Mas isto não era suficiente, precisávamos ter certeza de que o usuário só iria pra fanpage depois de ter sido trackeado. Chegamos a este script, inserido no header.php de nosso WordPress (sim, a fanpage era toda controlada via WordPress):

<script type="text/javascript">// <![CDATA[
  //url para sua fanpage, esta é a do Vestibular FGV 2012
  var FacebookURL = 'http://www.facebook.com/vestibularfgv?sk=app_210568128988274';

  var _gaq = _gaq || [];

	//substitua o XXXX pelo seu id do GA
  	_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);

	//estas variáveis são meio obscuras.
	//mas podemos informar que assim simplesmente funciona
	_gaq.push(['_setDomainName', 'none']);
  	_gaq.push(['_addIgnoredRef', 'static.ak.facebook.com']);
  	_gaq.push(['_setAllowAnchor', true]);
	_gaq.push(['_setAllowHash', false]);
	_gaq.push(['_setAllowLinker', true]);

	// esta é uma função que vai rodar em looping até temos certeza
	// que a sessão no GA foi iniciada
	function checkIfAnalyticsLoaded() {
		//se já temos as variáveis do GA e não estamos dentro do iframe do FB
		// iniciamos a sessão do GA e colocamos a página em seu devido lugar,
		// dentro do iframe do FB
	  if (window._gat && window._gat._getTracker && self.location == top.location) {

		_gaq.push(['_trackPageview', '/nomeDaSuaPaginaAqui/']);
		setTimeout(top.location.href = FacebookURL, 200);

		//se já estamos dentro do Facebook, apenas faço o trackeamento normal
	  } else if (self.location != top.location) {
		 _gaq.push(['_trackPageview', '/nomeDaSuaPaginaAqui/']);

	 // se ainda não temos as variáveis do GA, rode esta função de novo em meio segundo
	  } else {
		setTimeout('checkIfAnalyticsLoaded()', 500);
	  }
    };

	checkIfAnalyticsLoaded();

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// ]]></script> 

Além disso, precisamos do hack mais bizarro da história, para fazer isso funcionar no Internet Explorer (sempre ele):

<!--?php header('P3P: CP="IE is often a NIGHTMARE"'); ?-->

Insira esta bizarrice na parte mais top de seu código, na primeira linha de sua página.

Pronto, depois de zilhões de testes e muitos fios de cabelo a menos, resolvida a primeira parte. Agora vamos à segunda parte, que não foi tão difícil, mas precisou de mais mufa queimada.

Ora, se sabemos de onde o usuário veio, podemos modificar as variáveis dos links para página final e adicionar tags que identificarão o ciclo.

Os links normais na Fanpage eram assim (se você não sabe o que utm_source, etc, precisa se atualizar):

http://vestibular.fgv.br/curso/administracao
?utm_source=facebookFanPage
&utm_medium=linkSaibaMais
&utm_content=paginaCursos
&utm_campaign=vestibular_2012_1_promo

O que nós fizemos foi alterar estas tags dinamicamente, via php, caso detectássemos tags de acesso nos cookies do browser. Por exemplo, se o cara aterrissou na fanpage clicando em um link patrocinado no Youtube, ficaria assim:

http://vestibular.fgv.br/curso/administracao
?utm_source=facebookFanPage___youTube
&utm_medium=linkSaibaMais___linkPatrocinado
&utm_content=paginaCursos
&utm_campaign=vestibular_2012_1_promo

Então, no GA da página do vestibular, o marketing da FGV pôde saber exatamente quantos usuários completaram o ciclo. E além disso, nós guardamos no GA da própria fanpage os cliques através da nova ferramenta de eventos do GA.

Pronto. Deu tudo certo no final das contas. Tentei ser o mais breve possível e com certeza muita coisa está mal explicada, mas dava pra escrever um livro sobre isso. Estou às ordens se você publicar dúvidas bacanas nos comentários. Depois dessa e da ação para a Yogoberry, estamos craques em explorar os limites do Facebook (que por sinal mudam o tempo todo).

Pablo Cabana

Portamos o site da Cabana para aplicativos iPad e tablets Android. Ficou bacana. É isso, atualizando o portfolio de serviços, agora a gente desenvolve aplicativos também. Aproveitamos para dar uma boa atualizada no nosso portfolio. Dá uma conferida.

Clique aqui para baixar o aplicativo da Cabana na Apple Store.

Clique aqui para baixar o aplicativo da Cabana no Android Market.

Nota: A Ilha do Urso é um usuário “plus” no Vimeo, portanto, ela pode controlar qual é a aparência de seus vídeos. É por isso que os vídeos abaixo tem os botões em branco, a logo do Vimeo não aparece, etc, etc. Tudo isso é controlado pelo Vimeo e NÃO através do Flash.

Algumas etapas antes de começar:

1 – Você precisa gerar um chave no Vimeo para fazer sua aplicação. É fácil e gratuito clicando aqui. Você vai substituir sua chave no código onde você encontra “public var VIMEO_KEY:String = “SUA_CHAVE_AQUI”;”

2 – A classe com.vimeo.api.VimeoPlayer é a classe fornecida pelo Vimeo com pequenas melhorias minhas. Uma delas é a utilização de um evento simples para saber quando os botões do player desaparecem, para controlar o botão “Fechar”.

3 – Outra melhoria na classe é a possibilidade de colocar o botão FullScreen no player. Lembrando que você precisará controlar o tamanho do player manualmente, pois o fullscreen é para todo o objeto flash e não só o player. Fique tranquilo que no exemplo já está tudo mastigado para você. Outra observação importante quanto ao fullscreen é que você precisa colocar “allowfullscreen: “true”" nas flash vars do seu html.

4 – A principal dor de cabeça de utilizar a Vimeo API é o problema do cross-domain. Não vou entrar em detalhes, mas você só precisa saber que tudo funcionará perfeitamente com o script que você baixa aqui. :)

5 – Para retirar o vídeo, há o método “destroy”, que também mastiguei para você. Então não precisa se preocupar com problemas de consumo de memória!

6 – Utilizo neste exemplo as incríveis bibliotecas TweenMax e AS3Signals.

7 – Não é meu objetivo construir uma “biblioteca”, um “projeto open source” ou algo do gênero. Só estou compartilhando minha experiência. Vou responder às dúvidas nos comentários na medida do possível.

8  - IMPORTANTE: Não estou interessado em escrever “códigos elegantes”, mas sim em fazer a bagaça funcionar. Portanto, não espere classes otimizadas até o último fio de cabelo. Eu coloquei todas as variáveis para “public” e fui me divertir. Tenho mais o que fazer!

Baixe os arquivos fonte aqui.

Siga-me no Twitter.

Pablo Cabana

I think it will interest a lot of foreign people. So, scroll down to english translation!

É tudo verdade. Os boatos sobre a possibilidade de exportar projetos Flash para aplicações nativas para iOS e Android são todos reais. Acabo de instalar uma versão trial do Flash CS 5.5 e em questão de minutos coloquei um sistema de certificação que construímos em parceria com a Moleque de Idéias para rodar nas três tablets que temos aqui: iPad2, Motorola Xoom e Samsung Galaxy Tab. Na imagem aí de cima você pode conferir. O mesmo código, os mesmos movieclips, tudo rodando redondinho nas 3 tablets, no browser e numa aplicação desktop Adobe Air.

E veja que não se trata de apenas uma aplicação bobinha. É um verdadeiro sistema de certificação que realiza diversas tarefas complexas como:

- Download de arquivos compactados .zip
- Descompressão destes arquivos .zip
- Análise de XML
- Comunicação com serviços JAVA via URL com método POST para login, respostas, timer, etc.

É óbvio que algumas otimizações podem ser feitas, mas eu fiquei mesmo surpreso com a qualidade da performance e com a facilidade do processo.
Eu já havia feito testes com as versões anteriores do exportador (que eram horríveis), mas esta última, a 2.6, é realmente um salto quântico frente às anteriores.
Enfim. Um horizonte de possibilidades acaba de se abrir! :)

______________

It is all true. The gossip about the possibility of exporting Flash projects to native apps for iOS and Android are all real. I just installed a Flash CS 5.5 trial version  and in a couple of minutes I’ve put a certification system we did in partnership with Moleque de Idéias to run in the three tablets we have here: iPad2, Motorola Xoom e Samsung Galaxy Tab. On the image above you can see it. Same code, same assets, everything running flawlessly in the 3 tablets, in the browser and in a Adobe Air desktop app.

Pay attention that it is not a simple app. It is a real certification system that does complex tasks like:

- Download zip files
- Unzip those files
- XML parsing
- Comunication with JAVA services through URL with POST methods to login, answers, timer, etc.

It is obvious that some optimizations can be done, but I am really surprised by the performance and how easy the process was.
I’ve already have done some tests with previous versions of the exporter (all horrible), but this last one, 2.6, is really a quantum leap in front of the previous ones.
Anyway. A horizon of possibilities has just opened up!

Pablo Cabana

Esta página também está replicada aqui: http://www.cabanacriacao.com/ra/
_____________________________________

Brookfield Place

___________________________________________________________________________________________

Brookfield i-Office

___________________________________________________________________________________________

Mae Terra para Bruno Latini

___________________________________________________________________________________________

Sanofi Aventis

___________________________________________________________________________________________

Diacm

___________________________________________________________________________________________

Moonwalker

___________________________________________________________________________________________

A campanha, idealizada pela empresa e denominada Champions of Sales, tem como objetivo incentivar a equipe de mais de 1.500 pessoas no Brasil inteiro a bater a meta e ganhar uma viagem com acompanhante para a capital da França, sede da empresa.

Para isso a Cabana Criação desenvolveu uma realidade aumentada com 3  ícones da cidade luz: A Torre Eiffel, o Arco do Triunfo e o Museu do Louvre.

A ação aconteceu na web, em um hotsite aonde as pessoas poderiam brincar com a realidade aumentada e na apresentação da campanha para os funcionários. Confira o vídeo de algumas das apresentações. Vá também a página na web, ligue sua câmera, aumente o som e faça uma visitinha a Paris.

César Menezes.

Saiu no O Globo de hoje uma ação de grande porte da Brookfield Incorporações utilizando diversas tecnologias para transmitir o posicionamento da empresa.

Segundo Caetano Sani, diretor de incorporações da empresa, a idéia nasceu no marketing e teve a colaboração das agências Publicis e EuroRSCG Contemporânea.

“A peça representa o momento que estamos vivendo. Estamos crescendo e diversificando e queriamos falar isso em um anúncio institucional. O momento coincidiu com o lançamento Brookfield Place, por isso unimos tudo em uma única peça, de maneira surpreendente”, disse Sani.

fonte: Propmark

A Sync Mobile convocou os Cabanudos para implementar a parte da Realidade Aumentada do empreendimento Brookfield Place com o modelo 3D construído pela Domus Arquitetura.

Esta ação de publicidade mostra como as empresas estão em busca de novas formas de interatividade para dialogar com seu público. Além da Realidade Aumentada, o anúncio traz um óculos 3D para visualização de imagens que “saltam” do papel e QRCodes para que anúncios dos empreendimentos possam ser visitados diretamente do celular.

Nós da Cabana estamos orgulhosos de fazer parte disso, mesmo que apenas colaborando para um pequeno pedaço da ação. Parabéns à Brookfield pela ousadia.

Para ver o aplicativo de realidade aumentada da Brookfield Place, clique aqui. Ao chegar na página, clique em “No seu computador”, na aba superior.

Pablo Cabana

Quando contei a ele que era o único a ter respondido meus emails ele me respondeu: “É porque nossa cultura é de colaboração.” Excelente resposta, era mesmo o que eu esperava ouvir. O pensamento em rede, onde as conexões são mais fortes do que o conteúdo que trafega por elas, é a forma de pensamento que está tomando conta do mercado e fazendo empresas se revolucionarem. A internet chegou e não há mais volta. Agir como se a informação fosse mais importante do que as conexões é estar com os dias contados. “Information wants to be free”, já disseram por aí… Mas este não é um post sobre redes. Você pode aprender mais sobre isso na Escola de Redes.

Josh me apresentou a empresa e contou um pouco sobre sua metodologia. Para cada projeto, monta-se uma equipe de desenvolvedores, designers e plenejadores que sentam todos próximos uns aos outros. Antes havia a “ala dos desenvolvedores”, a “ala dos designers”, mas misturar todo mundo mostrou-se ser muito mais produtivo (redes! conexões!).

Joshua apresentando a Big Spaceship

Com o porte que tem, a Big Spaceship recebe dezenas de pedidos de orçamento por dia, mas, como eles mesmos se intitulam, a BS é uma “boutique” especializada em projetos inovadores e de alto impacto. Como selecionar quais clientes atender?

Os fatores FFF. Fame, fortune and fun. Vai render visibilidade e prêmios? Vão pagar bem? Vai ser divertido? Excelentes critérios, não? Entrar em um projeto com prazer e aquela vontade de “arrasar” é o melhor método para criar soluções realmente geniais.

Também conversamos sobre como o mercado publicitário está mudando. Há cinco anos, as grandes agências de publicidade tratavam as agências interativas como meros “executadores” das diretrizes criadas por elas. O que se vê hoje, é que há o início do processo reverso. O pensamento interativo, onde internet é a malha que conecta todas as mídias e permite novas interações, está começando a ditar o que as mídias offline devem fazer. Tudo fica mais integrado e eficiente (redes! conexões!).

Aqui na Cabana já ocorreram diversas vezes de clientes que chegaram apenas para realizar a parte online e, ao entender a forma cabanuda de pensar as mídias, tiraram seus trabalhos offline de outras agências e colocaram em nossas mãos. A tendência é essa. Quem não mudar sua forma de pensar ficará pra trás.

Outro ponto interessante é que toda sexta-feira eles investem em projetos próprios. Qualquer funcionário pode dar idéias do que realizar e eles caem dentro. Foi assim que surgiu o famoso showcase de preloaders Pretty Loaded, e o recente The Most Awesomest Thing Ever, uma divertida batalha para eleger “a coisa mais fodassa de todos os tempos”.

Finalizei a conversa com a pergunta: “e sobre esse gigantesco buzz sobre Apple x Adobe, o que você acha?”.

“Nós não temos desenvolvedores Flash por aqui, nós temos desenvolvedores. Eu não sei se Flash estará aqui daqui a 5 anos, não há como prever, mas se alguém for especializado apenas em Flash, esse alguém não estará mais aqui nos próximos 5 anos.” Não precisa nem comentar, né?

Dei uma passada também na famosa Apple Store do Central Park e presenciei a febre do iPad. “Sold out!”, o vendedor me disse.

Pablo Cabana

Muito tem se discutido sobre a eficiência de websites feitos em Flash, e um dos  (falsos) argumentos contra é que “sites em Flash não aparecem nas buscas”. Taí então a contra-prova cabal. Conseguimos colocar o site de nosso cliente, Luciane Denys, feito em Flash, na primeira página quando se busca por “flores niterói“. Não entregamos um centavo ao Google, tudo feito através de um bom trabalho de SEO e óbvio, um bom empurrão do nosso Toque Dourado.

Clique e veja com os próprios olhos.

Pablo Cabana

Está no ar a ação que preparamos para o artista Bruno Latini neste Dia das Mães. A idéia era homenagear a maior de todas as mães, a Mãe Terra, e utilizar um pouquinho de tecnologia para dar um surpreendida nos clientes.

1500 folders foram enviados para o mailing do Bruno Latini com uma mensagem sobre o dia das mãe, as instruções para acessar o aplicativo e a marca de detecção. Em breve, publico os resultados da ação.

Acima, você vê o vídeo de como funciona e clicando aqui você acessa a página com a Realidade Aumentada.

Pablo Cabana