Como codificar um feed dinâmico ao vivo do Twitter em um e-mail HTML

Publicados: 2015-05-26

Quando começamos a definir a logística da Litmus Live (anteriormente Email Design Conference) em 2015, as conversas sobre como tornar nosso e-mail de lançamento maior e melhor do que no ano passado começaram. Como superamos a técnica de plano de fundo de vídeo HTML5 no e-mail? Usando conteúdo dinâmico: um feed do Twitter ao vivo.

Sim, um feed do Twitter em um e-mail .

Nossos objetivos eram duplos: gerar interesse na conferência e usar uma técnica inovadora - e inspiradora - no e-mail para fazer isso. Depois de muitas sessões de brainstorming, decidimos usar a abordagem comum de conteúdo dinâmico, mas com uma diferença.

tedc15-email

Veja o e-mail completo no navegador →

Você também pode ver o código completo aqui e os resultados do teste Litmus aqui para ver como ele é exibido em mais de 40 clientes de e-mail.

Conteúdo Dinâmico em Email

O conteúdo dinâmico em e-mail não é um conceito novo. Na verdade, é freqüentemente usado para criar e-mails direcionados e personalizados. Historicamente, o conteúdo dinâmico foi implementado estritamente por meio do uso de texto ou imagens e obtido por meio de tags de mesclagem ou variáveis ​​por meio de um ESP. As imagens dinâmicas são vinculadas a um único arquivo de origem, que é sobrescrito dinamicamente para exibir uma nova imagem para um determinado subconjunto de assinantes com base em parâmetros de personalização predefinidos. Ambos os métodos permitem que você crie uma experiência de e-mail única e personalizada para seus assinantes.

Usamos imagens dinâmicas em nosso e-mail de lançamento para fazer o feed dinâmico do Twitter funcionar em vários clientes de e-mail populares. No entanto, também usamos um método totalmente novo para implementar conteúdo dinâmico: CSS dinâmico.

Enquanto o CSS dinâmico funcionava para clientes WebKit, precisávamos implementar um fallback adequado usando imagens dinâmicas para nossos assinantes que usam clientes não WebKit. Dito isso, o feed do Twitter ao vivo era compatível (de uma forma ou de outra!) Nas seguintes caixas de entrada:

  • AOL Mail
    Imagem Dinâmica
  • Apple Mail
    CSS Dinâmico
  • iOS (aplicativo de e-mail nativo)
    CSS Dinâmico
  • Outlook (2000-2013)
    Imagem Dinâmica
  • Outlook para Mac (2011 e 2016)
    CSS Dinâmico
  • Outlook.com
    Imagem Dinâmica
  • Thunderbird
    Imagem Dinâmica
  • telefone do Windows
    Imagem Dinâmica
  • Windows Mail
    Imagem Dinâmica
  • Windows Live Mail
    Imagem Dinâmica
  • Yahoo! Correspondência
    Imagem Dinâmica

Conteúdo CSS Dinâmico para Clientes de Email WebKit

Embora pudéssemos ter usado imagens dinâmicas para todos os clientes de e-mail, optamos por usar CSS dinâmico para aprimoramento progressivo em clientes de e-mail WebKit, como os clientes de e-mail nativos do iPhone e iPad, para tornar o feed do Twitter mais realista.

Então, como fizemos isso funcionar? Usando os quinze tweets mais recentes que incluíam a hashtag # TEDC15, exibimos os primeiros 5 tweets por padrão e, em seguida, animamos os tweets restantes um a um durante um período de um minuto. Isso nos permitiu fazer o fluxo do tweet parecer em tempo real e teve o benefício adicional de manter as pessoas engajadas por mais tempo.

Embora atualizemos o arquivo CSS a cada 10 segundos, o conteúdo real do e-mail não pode ser atualizado da mesma forma - ele precisa de uma atualização completa do documento para funcionar. Os usuários precisavam reabrir o e-mail ou atualizar a versão da web para ver os tweets atualizados. Embora não fosse ideal, na verdade provou ser altamente envolvente!

Para fazer o feed do Twitter funcionar ao vivo, usamos HTML e CSS que só seriam exibidos em clientes WebKit. Para conseguir isso, criamos <div>'s e <span>'s vazios e usamos a propriedade CSS de conteúdo para adicionar o conteúdo dos nomes, identificadores, carimbos de data / hora e cópia do tweet dos usuários do Twitter.

Aqui está o HTML:

 <div class="tweet"> <div class="tweet-avatar-wrapper"> <div class="avatar"></div> </div> <div class="tweet-wrapper"> <span class="name"></span> <span class="handle"></span> <span class="timestamp"></span> <span class="copy"></span> </div> </div>

Para sobrescrever o CSS dinamicamente, contamos com uma folha de estilo externa que era atualizada a cada 10 segundos e incluída em nosso e-mail da seguinte forma:

 <link href="http://assets.insights.litmus.com/campaigns/tedc-2015/assets/tweets.css" type="text/css" rel="stylesheet" />

Aqui está o CSS correspondente, com as informações do tweet na propriedade content:

 #tweet-1 .name::before { content: "Kevin Mandeville"; } #tweet-1 .handle::after { content: "@KevinMandeville"; } #tweet-1 .copy::before { content: "I'm excited for #TEDC15! Who's going?"; } #tweet-1 .timestamp::after { content: "1m"; }

O CSS para os tweets foi envolvido em uma consulta de mídia que nos permitiu exibi-lo apenas em clientes de e-mail baseados em WebKit:

 @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert CSS here */ }

Usando <div> vazios para a estrutura padrão, o conteúdo não apareceu para clientes de e-mail não WebKit. Em seguida, recorremos a uma imagem do feed dinâmico do Twitter para não assinantes do WebKit.

A única desvantagem de usar o direcionamento do WebKit e a propriedade do conteúdo é que alguns clientes de e-mail, como o Airmail e o Outlook iOS e Android app, suportariam a consulta de mídia direcionada do WebKit, mas não a propriedade do conteúdo, tornando os tweets invisíveis. Mas, dado que esses clientes de e-mail são uma parte muito pequena do nosso público (menos de 1%), esse foi um sacrifício que valeu a pena.

Imagens dinâmicas para clientes de e-mail não WebKit

Para clientes de email não WebKit, usamos o método mais tradicional de exibição de imagem dinâmica, uma vez que a propriedade de conteúdo CSS não é bem suportada em clientes de email fora do WebKit.

No e-mail, mencionamos uma imagem dinâmica do feed do Twitter:

 <img src="/uploads/article/137983/1JLxfeWJnz4EGtoE.jpg" width="600" height="902" border="0" class="webkit-hide" alt="tweet #TEDC15 to show up in the live feed!"/>
tweet # TEDC15 para aparecer no feed ao vivo!

Criamos uma página da web simples apenas com o feed do Twitter usando o mesmo HTML e CSS do e-mail. Simplesmente tiramos uma captura de tela do feed nas mesmas dimensões de 600 × 902 por meio do utilitário de linha de comando wkhtmltoimage e atualizamos dinamicamente a mesma imagem a cada 10 segundos.

Como estávamos usando HTML e CSS para a visualização do WebKit, ocultamos a imagem no WebKit para evitar feeds duplicados:

 @media screen and (-webkit-min-device-pixel-ratio: 0) { .webkit-hide { display: none; } }

Com essa técnica, o feed do Twitter ao vivo funcionou até mesmo nos clientes mais problemáticos (ahem, Outlook) e permitiu que a maioria dos nossos assinantes participassem da diversão!

A única grande desvantagem dessa implementação de imagem dinâmica é que o Gmail armazena suas imagens em cache. Como resultado, os usuários do Gmail não experimentaram o feed do Twitter ao vivo. Em vez disso, eles viram oito dos tweets mais recentes e uma mensagem especial para ver a versão da web do e-mail para o efeito completo:

gmail-twitter-feed

Como construímos a integração dinâmica com o Twitter

Kevin Thompson, nosso desenvolvedor de marketing, foi o cérebro por trás da integração real com o Twitter. Ele criou um aplicativo muito simples construído no framework Sinatra e hospedado no Heroku. Você pode verificar o código e experimentá-lo seguindo as instruções no Github. Esse teste inicial provou que era possível gerar os tweets em CSS, carregar a folha de estilo externa em alguns clientes de e-mail e que esses clientes podiam buscar o CSS mais recente cada vez que o e-mail fosse aberto.

A partir daí, o aplicativo começou a ficar um pouco mais complexo. Como o Twitter impõe limites ao número de solicitações feitas à API, precisávamos ter certeza de que não excederíamos o limite de 150 solicitações por 15 minutos alocados para consultas de pesquisa. Para resolver esse problema, adicionamos um segundo processo ao nosso aplicativo Heroku. Esse processo era executado em segundo plano, obtendo tweets a cada 10 segundos e armazenando-os em um cache. O processo principal do aplicativo carregaria os tweets do cache em vez de procurá-los diretamente no Twitter.

Kevin também teve que levar em consideração a escalabilidade e a velocidade. Embora tivéssemos uma solução para permanecer dentro dos limites da API do Twitter, nosso único servidor provavelmente não seria capaz de processar o número esperado de solicitações de mais de 200.000 destinatários de nosso e-mail. Para resolver isso, implementamos o Amazon CloudFront CDN, permitindo-nos oferecer suporte a muito mais solicitações de nossos ativos e também distribuí-los globalmente para garantir que os arquivos sejam carregados rapidamente para todo o nosso público. Em nosso aplicativo Sinatra, Kevin também adicionou cabeçalhos Cache-Control, que instruíram o CloudFront a expirar os ativos após 10 segundos. Isso o forçou a solicitar novos conteúdos de nosso aplicativo com mais frequência.

Para manter os resultados o mais atualizados possível sem exceder os limites de taxa da API do Twitter, renderizamos e armazenamos em cache os arquivos de imagem e CSS dinâmicos a cada 10 segundos com os resultados de nossa pesquisa no Twitter.

Para gerenciar o conteúdo dos tweets, tanto os termos de pesquisa do Twitter quanto o conteúdo / usuários bloqueados foram controlados por meio de variáveis ​​de ambiente. Embora alterar as variáveis ​​de ambiente no Heroku significasse que nosso aplicativo precisaria ser reiniciado, porque os ativos foram distribuídos por meio do CDN e o aplicativo era tão simples, uma reinicialização demorou apenas alguns segundos e seria completamente imperceptível. Além disso, como o Heroku fornece uma interface de usuário para editar variáveis ​​de ambiente, nossa equipe de marketing foi capaz de fazer alterações nos termos de pesquisa e bloquear o conteúdo conforme necessário.

Se esses métodos parecerem muito complicados ou demorados para você, existem empresas terceirizadas, como Movable Ink, LiveClicker, PowerInbox e Avari, que são especializadas em conteúdo dinâmico para e-mail.

Filtrando tweets ruins

Uma grande preocupação para nós enquanto incorporávamos um feed dinâmico ao vivo do Twitter era abrir mão do controle do conteúdo do nosso e-mail - resultando em alguns “tweets ruins” aparecendo no stream. Algumas pessoas no Twitter apontaram isso:

Ao mesmo tempo, queríamos fornecer o mais próximo possível de um feed de tweets bruto e não filtrado para manter o fator “uau”. Nossa hipótese era que tweets ruins seriam um cenário de caso extremo e seriam eliminados do feed por meio de atividade constante. Portanto, inicialmente contamos com os filtros de pesquisa do Twitter para eliminar menos do que o conteúdo ideal.

Mas, queríamos ter filtros extras no lugar, então também nos demos a capacidade de bloquear nomes de usuário e strings de texto específicos após buscar os resultados do Twitter. No final das contas, decidimos não permitir que fotos tweetassem no stream, já que isso poderia ter se tornado indisciplinado e mais prejudicial do que apenas texto. Além disso, é impossível injetar links dinamicamente por meio da propriedade CSS de conteúdo, portanto, nenhum link em nenhum tweet funcionou - eles eram simplesmente exibidos como texto. Todos os tweets foram vinculados diretamente ao fluxo de tweets do # TEDC15.

Como último recurso à prova de falhas, tivemos a opção de desabilitar totalmente os resultados de pesquisa do Twitter em tempo real, voltando para uma lista filtrada de tweets favoritos de nossa conta do Twitter @emaildesignconf. No final, havia apenas alguns tweets ruins que precisavam ser removidos. E, até o momento, não tivemos que usar a proteção contra falhas final de mudar para os tuítes favoritos também - mais cinco #emailgeeks!

A chave? Certificando-nos de que testamos tudo de cima a baixo. Garanta que seus designs tenham uma ótima aparência nas caixas de entrada que seus assinantes usam com o Litmus.

Teste tudo de cima para baixo

Visualize e-mails no 50 + e respire um suspiro de alívio ao tentar até mesmo os feitos de e-mail mais loucos, como um feed de Twitter ao vivo.

Experimente Litmus grátis →

Uma reação extremamente positiva

Nosso público definitivamente amou essa implementação divertida e única em e-mail. Na verdade, fez do e-mail uma experiência interativa e comunitária da qual todos pudessem participar. As reações do Twitter foram inestimáveis ​​e até seguiram alguns temas semelhantes.

Algumas pessoas questionaram se era realmente real:

Muitos apenas olharam para ele:

https://twitter.com/hannahsmeznik/status/601464682180816896

Um grupo disse oi para os outros:

https://twitter.com/WebDevRich/status/601669735483363328

Houve várias menções a magia, bruxaria e Harry Potter:

https://twitter.com/oompt/status/601495402962116611

Uma série de tolices e travessuras também se seguiram:

https://twitter.com/MrMoon123/status/601658129349214209

https://twitter.com/capitocapito/status/601458692161019904

Para piorar, muitas pessoas ficaram impressionadas:

https://twitter.com/adamrandazzo/status/601450740964466688

https://twitter.com/MattRoxo/status/601782360460251137

Uma olhada no desempenho

Ficamos maravilhados com os resultados dessa campanha! Mais de 53% de nossas aberturas vieram em um cliente de e-mail WebKit, portanto, muitos de nossos usuários viram a versão progressivamente aprimorada. No total, houve mais de 750 tweets sobre # TEDC15 nas primeiras 24 horas após o envio do e-mail. Além disso, o e-mail ajudou a atrair mais de 4.000 novos visitantes ao nosso site e gerou mais de 1.000 novos clientes potenciais no mesmo período! Sem mencionar que este e-mail mostrou o melhor envolvimento que já vimos em qualquer e-mail que já enviamos - quase 60% dos usuários viram o e-mail por mais de 18 segundos!

Captura de tela 26/05/2015 às 3:48.42 PM

Se você tiver alguma dúvida, não hesite em perguntar nos comentários abaixo, participe do tópico da Comunidade Litmus sobre o assunto ou envie um tweet para @KevinMandeville e @KevinThompson!

Receba e-mails incríveis

Não perca nosso próximo e-mail alucinante - inscreva-se para receber notícias e informações sobre tudo o que está acontecendo no Litmus.