nov/11 24

Já está no ar faz um tempinho, mas ainda não havíamos publicado aqui no blog:

A Thor Granitos é, nada mais, nada menos, a maior empresa exportadora de granitos beneficiados da America Latina. Atuando de forma expressiva no mercado externo, para onde é destinado aproximadamente 90% da sua produção, o Grupo Thor Granitos está presente em 46 países.

Portanto, foi uma honra para nós desenvolver o novo material gráfico e online da empresa: Folder Institucional, Catálogo de Produtos e um moderno website.

Clique para ver o website.

nov/11 21

Como vocês já devem saber, fomos os responsáveis pela implementação da Fanpage no Facebook do Vestibular 2012 da FGV. E como vocês também já devem saber, a FGV é extremamente precisa com números, seja nos panoramas econômicos, seja em suas ações de publicidade.

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

out/11 21

Ação para Yogoberry que ajudamos a construir junto com a agência Staff levou Bronze na categoria digital no Festival Brasileiro de Publicidade da ABP. O video-case dispensa mais palavras por aqui.

set/11 29

Está no ar a Fanpage FGV Vestibular 2012. Desenvolvida pela Cabana Criação para a Agência3, a página desafia os vestibulandos a darem suas idéias para cases propostos por grandes empresas.

“A FGV e algumas das maiores empresas do Brasil criaram desafios exclusivos para você. Aqui, você conhece um pouco do que os profissionais enfrentam e tem a chance de solucionar desafios propostos por eles. Além disso, você pode ganhar prêmios.”

A página já conta com quase 14.000 fans, um excelente resultado institucional que vai perdurar para os próximos vestibulares da FGV.

Visite: http://www.facebook.com/vestibularfgv

set/11 29

Galera, tá rolando por ai o nosso trabalho mais recente: o site da promoção e do concurso cultural Restart, feitos pelo Jornal Extra. Foi desenvolvido em parceria com a Agência 3 e tá bombando. Toda semana o boneco de um integrante diferente. Quem curte entra no site pra conferir e ganhar o seu.
UPDATE: A ação já saiu do ar mas você pode conferir aqui: http://www.cabanacriacao.com/portfolio/restart/

jun/11 20


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.

jun/11 20

Acabamos de colocar no ar o site da Ilha do Urso, uma produtora de vídeos e filmes para TV, WEB e Cinema.

A ideia era dar uma bossa na navegação, um charme próprio, para ressaltar o portfolio da empresa, que fala por si próprio.

O mais bacana deste site é que todo o conteúdo dos vídeos é administrado e entregue através do Vimeo.

Dá uma olhada na página do Vimeo da Ilha do Urso. O site puxa tudo de lá, com a qualidade incomparável que o Vimeo entrega e toda a praticidade de administrar o conteúdo do site por lá.

jun/11 20

O site mais recente que colocamos no ar, a Ilha do Urso, tem como base de todo o seu conteúdo o Vimeo. Esta foi a primeira vez que utilizamos a API do Vimeo em um projeto cabanudo. Encontramos algumas dificuldades no início, principalmente por ser uma API relativamente nova, mas depois de algumas dores de cabeça conseguimos colocar tudo nos eixos. No final deste post, você pode fazer o download do exemplo abaixo, que puxa os filmes do álbum “Home” da Ilha do Urso, com arquivos fonte suficientes para desenvolver seus próprios projetos (sem a dor de cabeça que passamos aqui! :).

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

mai/11 30

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

twitterSigamMeosBons

mar/11 24

A Agência 3+ convocou os Cabanudos para implementar a campanha de divulgação do apoio da Rossi Residencial à “Hora do Planeta“.
No dia 26 de março, das 20h30 às 21h30, todos apagando as luzes por um mundo sem aquecimento global.
Para divulgar a Hora do Planeta, a Rossi idealizou um “treinamento”, onde pessoas podem entrar no hotsite, apagar uma luz e deixar seu nome registrado.
A Agência 3+, que tem a conta da Rossi, se uniu à Cabana para implementar a ideia. Ficamos responsáveis por dar vida ao layout: programação pesada e muita interatividade!
Faça uma visita e veja que, enquanto você apaga a sua luz, outras pessoas também participam e você pode ver as luzes sendo apagadas.

Detalhe 1: tudo foi feito em incríveis 10 dias. Acredite se quiser.

Detalhe 2: Tem muita coisa bacana acontecendo aqui na Cabana. Em breve vou arrumar tempo para atualizar as coisas por aqui.

UPDATE: A ação já saiu do ar, mas vocês podem conferir a dinâmica aqui.