HTML 이메일에서 라이브 동적 트위터 피드를 코딩하는 방법

게시 됨: 2015-05-26

2015년에 Litmus Live(이전의 이메일 디자인 컨퍼런스)를 위한 계획을 구체화하기 시작하면서 출시 이메일을 작년보다 더 크고 더 좋게 만드는 것에 대한 대화가 시작되었습니다. 이메일에서 HTML5 비디오 배경 기술을 어떻게 활용합니까? 동적 콘텐츠 사용: 라이브 Twitter 피드.

예, 이메일의 Twitter 피드 .

우리의 목표는 두 가지였습니다. 회의에 대한 관심을 불러일으키고 그렇게 하기 위해 이메일에 혁신적이고 영감을 주는 기술을 사용하는 것이었습니다. 많은 브레인스토밍 세션 후에 우리는 동적 콘텐츠의 일반적인 접근 방식을 사용하기로 결정했지만 약간의 차이가 있었습니다.

tedc15-이메일

브라우저에서 전체 이메일 보기 →

여기에서 전체 코드를 볼 수 있고 여기에서 Litmus 테스트 결과를 보고 40개 이상의 이메일 클라이언트에서 코드가 어떻게 표시되는지 확인할 수 있습니다.

이메일의 동적 콘텐츠

이메일의 동적 콘텐츠는 새로운 개념이 아닙니다. 실제로 개인화되고 대상이 지정된 이메일을 만드는 데 자주 사용됩니다. 역사적으로 동적 콘텐츠는 텍스트 또는 이미지를 사용하여 엄격하게 구현되었으며 ESP를 통해 병합 태그 또는 변수를 통해 가져왔습니다. 동적 이미지는 미리 정의된 개인화 매개변수를 기반으로 구독자의 특정 하위 집합에 대한 새 이미지를 표시하기 위해 동적으로 덮어쓰여지는 단일 소스 파일에 연결됩니다. 이 두 가지 방법을 모두 사용하면 구독자를 위한 고유하고 개인화된 이메일 환경을 만들 수 있습니다.

출시 이메일에 동적 이미지를 사용하여 여러 인기 이메일 클라이언트에서 라이브 동적 Twitter 피드가 작동하도록 했습니다. 그러나 우리는 동적 콘텐츠를 구현하기 위해 완전히 새로운 방법인 동적 CSS도 사용했습니다.

동적 CSS가 WebKit 클라이언트에서 작동하는 동안 우리는 WebKit이 아닌 클라이언트를 사용하는 구독자를 위해 동적 이미지를 사용하여 적절한 대체를 구현해야 했습니다. 즉, 라이브 Twitter 피드는 다음 받은 편지함에서 (어떤 식으로든!) 지원되었습니다.

  • AOL 메일
    동적 이미지
  • 애플 메일
    동적 CSS
  • iOS(기본 이메일 앱)
    동적 CSS
  • 전망(2000-2013)
    동적 이미지
  • Mac용 Outlook(2011 및 2016)
    동적 CSS
  • 아웃룩닷컴
    동적 이미지
  • 천둥새
    동적 이미지
  • 윈도우 폰
    동적 이미지
  • 윈도우 메일
    동적 이미지
  • 윈도우 라이브 메일
    동적 이미지
  • 야후! 우편
    동적 이미지

WebKit 이메일 클라이언트를 위한 동적 CSS 콘텐츠

모든 이메일 클라이언트에 동적 이미지를 사용할 수 있었지만 iPhone 및 iPad 기본 이메일 클라이언트와 같은 WebKit 이메일 클라이언트의 점진적인 향상을 위해 동적 CSS를 사용하여 Twitter 피드가 더 사실적으로 느껴지도록 했습니다.

그래서 우리는 그것을 어떻게 작동 시켰습니까? #TEDC15 해시태그가 포함된 가장 최근 트윗 15개를 사용하여 기본적으로 처음 5개 트윗을 표시한 다음 나머지 트윗을 1분 동안 하나씩 애니메이션으로 표시했습니다. 이를 통해 트윗 스트림을 실시간으로 느낄 수 있었고 사람들의 참여를 더 오래 유지할 수 있는 이점이 추가되었습니다.

10초마다 CSS 파일을 업데이트했지만 이메일의 실제 내용은 같은 방식으로 업데이트할 수 없었습니다. 작동하려면 문서를 완전히 새로 고쳐야 했습니다. 업데이트된 트윗을 보려면 사용자가 이메일을 다시 열거나 웹 버전을 새로 고쳐야 했습니다. 이상적이지는 않지만 실제로 매우 매력적인 것으로 판명되었습니다!

라이브 트위터 피드를 작동시키기 위해 WebKit 클라이언트에만 표시되는 HTML과 CSS를 사용했습니다. 이를 달성하기 위해 빈 <div> 및 <span>을 만들고 콘텐츠 CSS 속성을 사용하여 Twitter 사용자의 이름, 핸들, 타임스탬프 및 트윗 사본의 콘텐츠를 추가했습니다.

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>

CSS를 동적으로 덮어쓰기 위해 10초마다 업데이트되고 다음과 같이 이메일에 포함된 외부 스타일시트에 의존했습니다.

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

다음은 content 속성에 트윗 정보가 있는 해당 CSS입니다.

 #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"; }

트윗의 CSS는 WebKit 기반 이메일 클라이언트에서만 표시할 수 있는 미디어 쿼리로 래핑되었습니다.

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

기본 구조에 빈 <div>를 사용하여 WebKit이 아닌 이메일 클라이언트에 대해 콘텐츠가 표시되지 않았습니다. 그런 다음 WebKit이 아닌 구독자를 위한 동적 트위터 피드 이미지로 돌아갔습니다.

WebKit 타겟팅 및 콘텐츠 속성 사용의 유일한 단점은 Airmail 및 Outlook iOS 및 Android 앱과 같은 일부 이메일 클라이언트가 WebKit 대상 미디어 쿼리를 지원하지만 콘텐츠 속성은 지원하지 않아 트윗이 보이지 않게 한다는 것입니다. 그러나 이러한 이메일 클라이언트가 우리 청중의 아주 작은 부분(1% 미만)이라는 점을 감안할 때 이것은 가치 있는 희생이었습니다.

비 WebKit 이메일 클라이언트를 위한 동적 이미지

WebKit이 아닌 이메일 클라이언트의 경우 CSS 콘텐츠 속성이 WebKit 외부의 이메일 클라이언트에서 잘 지원되지 않기 때문에 동적 이미지를 표시하는 보다 전통적인 방법을 사용했습니다.

이메일에서 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!"/>
트윗 #TEDC15가 라이브 피드에 표시됩니다!

이메일의 동일한 HTML과 CSS를 사용하여 Twitter 피드만으로 간단한 웹 페이지를 만들었습니다. 우리는 단순히 명령줄 유틸리티 wkhtmltoimage를 통해 600×902의 동일한 크기에서 피드의 스크린샷을 찍고 동일한 이미지를 10초마다 동적으로 업데이트했습니다.

WebKit 보기에 HTML과 CSS를 사용하고 있었기 때문에 중복된 피드를 피하기 위해 WebKit에 이미지를 숨겼습니다.

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

이 기술을 사용하면 라이브 Twitter 피드가 가장 문제가 많은 클라이언트(ahem, Outlook)에서도 작동했으며 대부분의 구독자가 재미에 참여할 수 있었습니다!

이 동적 이미지 구현의 유일한 주요 단점은 Gmail이 이미지를 캐시한다는 것입니다. 결과적으로 Gmail 사용자는 실시간 Twitter 피드를 경험하지 못했습니다. 대신, 그들은 가장 최근의 트윗 8개와 완전한 효과를 위해 이메일의 웹 버전을 보기 위한 특별 메시지를 보았습니다.

gmail-twitter-feed

동적 Twitter 통합을 구축한 방법

우리의 마케팅 개발자인 Kevin Thompson은 실제 Twitter 통합의 주역이었습니다. 그는 Sinatra 프레임워크에 구축되고 Heroku에서 호스팅되는 매우 간단한 애플리케이션을 만들었습니다. Github의 지침에 따라 코드를 확인하고 직접 사용해 볼 수 있습니다. 이 초기 테스트는 CSS에서 트윗을 생성하고, 소수의 이메일 클라이언트에 외부 스타일시트를 로드하며, 해당 클라이언트가 이메일을 열 때마다 최신 CSS를 가져올 수 있음을 입증했습니다.

거기서부터 응용 프로그램이 약간 더 복잡해지기 시작했습니다. Twitter는 API에 대한 요청 수를 제한하기 때문에 검색 쿼리에 할당된 15분당 150개 요청 제한을 초과하지 않도록 해야 했습니다. 이 문제를 해결하기 위해 Heroku 애플리케이션에 두 번째 프로세스를 추가했습니다. 이 프로세스는 백그라운드에서 실행되어 10초마다 트윗을 가져와 캐시에 저장합니다. 그러면 기본 애플리케이션 프로세스는 Twitter를 통해 직접 검색하는 대신 캐시에서 트윗을 로드합니다.

Kevin은 또한 확장성과 속도를 고려해야 했습니다. Twitter의 API 제한 내에서 유지하기 위한 솔루션이 있었지만 단일 서버는 200,000명 이상의 이메일 수신자로부터 예상되는 요청 수를 처리하지 못할 수 있습니다. 이 문제를 해결하기 위해 Amazon CloudFront CDN을 구현하여 자산에 대한 훨씬 더 많은 요청을 지원하고 전 세계에 배포하여 전체 청중을 위해 파일이 빠르게 로드되도록 했습니다. Sinatra 애플리케이션에서 Kevin은 10초 후에 자산을 만료하도록 CloudFront에 지시하는 Cache-Control 헤더도 추가했습니다. 이로 인해 애플리케이션에서 새 콘텐츠를 더 자주 요청해야 했습니다.

Twitter API의 속도 제한을 초과하지 않고 가능한 한 최신 결과를 유지하기 위해 Twitter 검색 결과와 함께 동적 CSS 및 이미지 파일을 10초마다 렌더링 및 캐시했습니다.

트윗의 내용을 관리하기 위해 트위터 검색어와 차단된 내용/사용자를 모두 환경 변수를 사용하여 제어했습니다. Heroku에서 환경 변수를 변경하면 애플리케이션을 다시 시작해야 하지만 자산이 CDN을 통해 배포되고 애플리케이션이 매우 간단하기 때문에 다시 시작하는 데 몇 초 밖에 걸리지 않고 완전히 눈에 띄지 않을 것입니다. 또한 Heroku는 환경 변수 편집을 위한 사용자 인터페이스를 제공하기 때문에 마케팅 팀은 필요에 따라 검색어를 변경하고 콘텐츠를 차단할 수 있었습니다.

이러한 방법이 너무 복잡하거나 시간이 많이 소요되는 것처럼 보인다면 이메일용 동적 콘텐츠를 전문으로 하는 Movable Ink, LiveClicker, PowerInbox 및 Avari와 같은 타사 회사가 있습니다.

나쁜 트윗 필터링

라이브 다이내믹 트위터 피드를 통합하는 동안 우리가 크게 우려한 것은 이메일 콘텐츠에 대한 제어를 포기하는 것이었습니다. 그 결과 스트림에 일부 "나쁜 트윗"이 표시되었습니다. 트위터의 몇몇 사람들은 이것을 지적했습니다.

동시에 "와우" 요소를 유지하기 위해 가능한 한 필터링되지 않은 원시 트윗 피드를 제공하고 싶었습니다. 우리의 가설은 나쁜 트윗이 극단적인 시나리오가 될 것이며 지속적인 활동을 통해 피드에서 지워질 것이라는 것이었습니다. 그래서 우리는 처음에 Twitter의 검색 필터에 의존하여 이상적이지 않은 콘텐츠를 걸러냈습니다.

그러나 우리는 추가 필터를 원했기 때문에 Twitter에서 결과를 가져온 후 특정 사용자 이름과 텍스트 문자열을 차단할 수 있는 기능도 제공했습니다. 우리는 궁극적으로 트윗 사진을 스트림에 전혀 허용하지 않기로 결정했습니다. 이는 텍스트보다 제멋대로이고 더 해로울 수 있기 때문입니다. 또한 콘텐츠 CSS 속성을 통해 링크를 동적으로 삽입하는 것은 불가능하므로 트윗의 링크도 작동하지 않았습니다. 단순히 텍스트로 표시되었습니다. 모든 트윗은 #TEDC15 트윗 스트림에 직접 연결되었습니다.

마지막 안전 장치로 실시간 Twitter 검색 결과를 완전히 비활성화하고 @emaildesignconf Twitter 계정에서 필터링된 즐겨찾기 트윗 목록으로 대체하는 옵션이 있었습니다. 결국 제거해야 할 나쁜 트윗은 몇 개뿐이었습니다. 그리고 아직까지는 즐겨찾는 트윗으로 전환하는 최종 안전 장치를 사용할 필요가 없었습니다. #emailgeeks 하이 파이브입니다!

열쇠? 위에서 아래로 모든 것을 테스트했는지 확인합니다. 구독자가 Litmus와 함께 사용하는 받은 편지함에서 디자인이 멋지게 보이도록 하십시오.

모든 것을 위에서 아래로 테스트

50+에서 이메일을 미리 보고 라이브 Twitter 피드와 같은 가장 미친 이메일 기능을 시도할 때 안도의 한숨을 쉬십시오.

리트머스 무료 체험 →

압도적으로 긍정적인 반응

우리 청중은 이메일에서 이 재미있고 독특한 구현을 확실히 좋아했습니다. 실제로 이메일을 모든 사람이 참여할 수 있는 대화형 및 공동 경험으로 만들었습니다. Twitter의 반응은 값을 매길 수 없었고 심지어 유사한 주제를 따랐습니다.

어떤 사람들은 그것이 실제로 사실인지 의문을 제기했습니다.

많은 사람들이 그저 바라보기만 했습니다.

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

무리는 다른 사람들에게 다음과 같이 인사했습니다.

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

마법, 마법, 해리 포터에 대한 몇 가지 언급이 있었습니다.

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

수많은 말괄량이와 속임수가 뒤따랐습니다.

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

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

무엇보다도 많은 사람들의 마음이 흔들렸습니다.

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

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

성능 살펴보기

우리는 이 캠페인의 결과에 놀랐습니다! 오픈의 53% 이상이 WebKit 이메일 클라이언트에서 이루어졌기 때문에 많은 사용자가 점진적으로 개선된 버전을 보았습니다. 이메일을 보낸 후 처음 24시간 동안 총 750개 이상의 #TEDC15 트윗이 있었습니다. 또한 이메일은 4,000명 이상의 새로운 방문자를 당사 웹사이트로 유도하고 같은 시간에 1,000명 이상의 새로운 잠재 고객을 생성하는 데 도움이 되었습니다! 말할 것도 없이, 이 이메일은 우리가 보낸 이메일 중 최고의 참여를 보였습니다. 거의 60%의 사용자가 18초 이상 이메일을 보았습니다!

스크린샷 2015-05-26 at 3.48.42 PM

질문이 있는 경우 주저하지 말고 아래 댓글에 질문하거나 해당 주제에 대한 Litmus 커뮤니티 스레드에 가입하거나 @KevinMandeville 및 @KevinThompson을 트윗하십시오!

멋진 이메일 받기

감동적인 다음 이메일을 놓치지 마세요. Litmus에서 일어나는 모든 일에 대한 뉴스와 정보를 받으려면 등록하십시오.