이메일에 대한 "캘린더에 추가" 링크를 만드는 방법

게시 됨: 2021-02-05

대면 또는 가상 이벤트는 다른 사람들을 알아가고 서로에게서 배우는 것을 중심으로 진행됩니다. 이메일은 개인 채널이기 때문에 이벤트에 대한 기대감을 높이고 알림을 보내기에 이상적인 매체입니다.

게스트가 실제로 표시되도록 하려면 이벤트 이메일에 "캘린더에 추가" 링크를 포함하는 것이 유용할 수 있습니다. 이를 통해 구독자는 자신의 캘린더에 이벤트를 추가할 수 있으므로 캘린더 충돌을 더 쉽게 피하고 자신의 미리 알림을 설정할 수 있습니다.

전통적으로 이것은 iCalendar라고도 하는 ICS 파일로 수행됩니다. 이것은 일반적으로 .ics 파일 확장자를 사용하는 일반적인 캘린더 형식이며 대부분의 캘린더에서 널리 사용됩니다. iCalendar 파일도 작동하지만 유사한 이름을 공유하는 Apple의 iCal과 혼동하지 마십시오. 명확성을 위해 이 블로그 게시물 전체에서 이를 ICS 또는 캘린더 파일이라고 합니다.

일부 캘린더는 웹 링크에서 이벤트를 추가할 수도 있습니다. 이를 캘린더 링크라고 합니다. 각 구독자의 특정 이메일 클라이언트와 일치하는 캘린더에 추가 링크를 동적으로 표시하기 위해 추가 시간을 들이면 이벤트에 더 쉽게 액세스할 수 있습니다. 즉, 구독자가 캘린더에 이벤트를 더 쉽고 빠르게 추가할 수 있습니다.

어떤 캘린더에 관심을 가져야 하는지, 실제 캘린더 파일과 링크를 만들고, 최상의 이메일 구독자 경험을 위해 이러한 파일과 링크를 이벤트 이메일에 코딩하는 방법을 안내해 드립니다.

1단계: 타겟팅할 캘린더 선택
2단계: 캘린더 링크 및 파일 만들기
1. ICS 캘린더 파일
2. 캘린더 링크
3단계: 캘린더에 추가 링크를 이메일로 코딩
1. 캘린더에 추가 버튼 표시 방법 결정
2. CTA 버튼 및 링크 만들기
3. 적절한 캘린더 링크로 적절한 잠재고객을 타겟팅하세요.
작동 중인 "캘린더에 추가" 링크 보기

1단계: 타겟팅할 캘린더 선택

사용할 수 있는 다양한 캘린더 응용 프로그램이 있습니다. 기본적으로 컴퓨터의 운영 체제를 통해 웹메일의 일부로 사용하거나 다운로드한 다른 캘린더 응용 프로그램을 통해 사용할 수 있습니다. 모든 캘린더 애플리케이션을 지원하는 것은 사실상 불가능합니다.

어떤 캘린더 도구에 집중해야 하는지 이해하는 데 도움이 되도록 이메일 분석 데이터를 살펴보십시오.

Litmus Email Analytics - 이메일 클라이언트 데이터 — Litmus Email Analytics의 이메일 클라이언트 데이터 예

모든 캘린더는 ICS 파일을 사용하여 새 이벤트를 추가할 수 있습니다. 그러나 사람들은 먼저 ICS 파일을 다운로드한 다음 캘린더에 업로드해야 합니다.

그러나 Gmail, Office 365 및 Outlook.com에서는 이벤트 세부 정보를 자동으로 포함하는 링크를 사용하여 이벤트를 추가할 수도 있습니다. 클릭 한 번이면 이벤트를 캘린더에 추가할 수 있으므로 구독자 경험이 향상됩니다.

다음 단계를 준비하는 데 도움이 되는 캘린더에 추가 방법을 허용하는 캘린더를 빠르게 요약한 편리한 차트가 있습니다.

캘린더에 의한 "캘린더에 추가" 방법

달력	ICS 캘린더 파일	캘린더 링크
구글 캘린더	✓	✓
아웃룩닷컴	✓	✓
AOL	✓	✘
야후	✓	✘
오피스 365	✓	✓
시야	✓	✘
애플 캘린더	✓	✘

대부분의 이메일 클라이언트에서 허용하기 때문에 ICS 캘린더 파일만 만드는 것이 더 쉽지만 구독자에게는 더 쉽지 않다는 점을 친절하게 알려드립니다 .

각 이메일 클라이언트에 대한 캘린더 링크를 개인화하면 클릭 한 번으로 구독자가 실제로 이벤트를 캘린더에 추가하고 참석하고 전환할 가능성이 높아집니다. 누군가가 자신의 캘린더에 ICS 파일을 추가하도록 하려면 더 많은 단계가 필요하며 그 과정에서 일부 사람들을 잃을 수 있습니다.

2단계: 캘린더 링크 및 파일 만들기

가입자가 이메일을 읽는 데 사용하는 이메일 클라이언트에 따라 ICS 캘린더 파일, 캘린더 링크 또는 둘 다를 만들도록 선택할 수 있습니다.

ICS 캘린더 파일

ICS 파일은 많은 캘린더 응용 프로그램에 대한 링크를 제공하기 때문에 항상 좋은 대안이 됩니다.

시작하려면 이 iCalendar Event Maker 도구를 사용하여 파일을 생성하는 것이 좋습니다. 위치, 설명 및 URL과 같이 구독자가 이벤트에 대해 알아야 할 정보를 추가할 수 있습니다. 이벤트를 반복하거나 게스트에 대한 알림을 추가하여 이벤트를 더욱 구체적으로 지정할 수 있습니다.

청중이 일정에 파일을 추가하면 이벤트의 목적을 명확히 하는 세부정보가 제공됩니다. 그리고 이벤트가 캘린더에 있는 이유를 알려주는 역할을 합니다.

캘린더 링크

웹메일 캘린더에 대한 캘린더에 추가 링크를 생성하려면 Amit Agarwal의 캘린더 링크 도구를 제안합니다. 각 개인의 캘린더에 대한 이메일에 포함해야 하는 전체 URL이 생성됩니다.

이 도구에는 단점이 있습니다. ICS 파일에서와 같이 되풀이 이벤트를 만들거나 알림을 포함할 수 없습니다. 이러한 세부정보를 캘린더 URL에 추가할 수 있지만 액세스 권한이 없을 수 있는 각 캘린더에서 생성해야 합니다.

이것이 캘린더 링크와 함께 ICS 캘린더 파일을 만드는 것이 좋은 이유입니다.

다시는 깨진 이메일을 보내지 마세요

Litmus Checklist를 통한 자동 QA 테스트를 통해 캘린더에 추가 링크가 깨지는 것과 같은 이메일 오류를 방지하십시오. 브랜드에 대한 오류 없는 이메일을 자신 있게 보내십시오(그리고 브랜드 평판을 보호하십시오).

무료 평가판 시작 →

3단계: 캘린더에 추가 링크를 이메일로 코딩

정말 재미있는 부분(코딩!)에 도달하기 전에 캘린더에 추가 링크를 표시할 방법을 결정해야 합니다.

캘린더에 추가 버튼 표시 방법 결정

앞서 언급했듯이 전통적으로 ICS 파일 버튼과 함께 캘린더에 추가 링크가 여러 개 있습니다. 동적 버튼을 캘린더에 추가 버튼으로 사용하는 경우 두 가지 옵션이 있습니다.

하나 표시 : 각 구독자의 이메일 클라이언트를 대상으로 하고 이메일 클라이언트와 일치하는 특정 링크를 동적으로 표시할 수 있습니다.
모두 표시 : 각 구독자의 이메일 클라이언트에 대해 기본 클릭 유도문안(CTA) 버튼이 개인화되고 대체 캘린더 링크를 계속 제공하는 하이브리드 모델을 사용할 수 있습니다.

모든 구독자에 대해 캘린더에 추가 링크를 개인화할 수 있는 경우 다른 캘린더 링크를 표시하는 것을 고려하려는 이유가 궁금할 것입니다.

링크를 하나만 표시하는 것은 저와 같은 사람들을 고려하지 않습니다. 저는 종종 업무용 이메일을 사용하여 이메일에 가입하여 Outlook에서 어떻게 보이는지 확인했습니다. 하지만 내 개인 Gmail 캘린더에 이벤트를 추가하고 싶습니다. 캘린더 링크가 하나만 제공되는 경우 이는 사람들에게 마찰이 될 수 있습니다.

여러 캘린더 링크를 표시하는 두 번째 옵션은 이 문제를 해결하는 좋은 방법입니다.

이메일 클라이언트 기본 설정에 따라 CTA 버튼을 숨기고 표시하는 것보다 조금 더 복잡하지만 받은 편지함에서 구독자를 만나면서도 그들이 가질 수 있는 모든 워크플로를 수용할 수 있기 때문에 제 생각에는 최고의 사용자 경험을 제공합니다.

CTA 버튼 및 링크 만들기

이제 재미있는 부분은 ICS 파일 버튼을 기본값으로 코딩하는 것입니다. 구독자가 읽는 이메일 클라이언트, 앱 또는 장치에 관계없이 모든 곳에서 작동하므로 이것부터 시작하세요.

먼저 iCalendar Event Maker 도구를 사용하여 2단계에서 만든 ICS 파일을 가져옵니다. 그런 다음 회사 서버, 콘텐츠 관리 시스템(CMS) 또는 이메일 공급자의 미디어 라이브러리에 업로드합니다.

이제 버튼 제작 시간입니다. 버튼을 만드는 방법에는 여러 가지가 있습니다. 그 중 몇 가지에 대해서는 방탄 버튼에 대한 궁극적인 가이드를 확인할 수 있습니다. 요즘 우리는 Mark Robbins의 액세스 가능 버튼의 팬이므로 다음은 사용할 수 있는 예입니다.

<a href="https://campaigns.litmus.com/_email/test/newnewyork.ics" class="cta btn-yellow" style="background-color: #F4D66C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-decoration: none; padding: 14px 20px; color: #1D2025; border-radius: 5px; display:inline-block; mso-padding-alt:0; box-shadow:0 3px 6px rgba(0,0,0,.2);"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt"> </i><![endif]--><span style="mso-text-raise:15pt;">Add to your Calendar</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a>

그런 다음 사용하려는 다른 이메일 클라이언트의 캘린더 링크에 대한 URL을 만들고 방금 만든 버튼 아래에 두십시오.

<p style="font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;">
     <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Outlook.com</a> |
                       	 
     <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Office 365</a> |
                   	 
     <a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220112T180000Z%2F20220112T200000Z&details=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&location=New%20Earth&text=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Google</a>
</p>

마지막으로 모든 것을 <div> 태그로 감싸서 개인화 대상으로 지정할 수 있습니다.

<div class="default">
     <a href="https://campaigns.litmus.com/_email/test/newnewyork.ics" class="cta btn-yellow" style="background-color: #F4D66C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-decoration: none; padding: 14px 20px; color: #1D2025; border-radius: 5px; display:inline-block; mso-padding-alt:0; box-shadow:0 3px 6px rgba(0,0,0,.2);"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt"> </i><![endif]--><span style="mso-text-raise:15pt;">Add to your Calendar</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]--></a>
     <p style="font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;">
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Outlook.com</a> |
                       	 
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Office 365</a> |
                       	 
          <a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220112T180000Z%2F20220112T200000Z&details=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&location=New%20Earth&text=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Google</a>
     </p>
</div>

적절한 캘린더 링크로 적절한 잠재고객을 타겟팅하세요.

대상으로 지정하려는 각 전자 메일 클라이언트에 대해 위에서 만든 <div> 콘텐츠 블록의 새 버전을 만들어야 하지만 대상 전자 메일 클라이언트의 적절한 일정 링크를 일정에 추가 CTA 버튼으로 사용한 다음 아래에 추가 캘린더 링크가 있습니다.

마지막으로 CSS를 사용하여 특정 이메일 클라이언트를 대상으로 하고 기본 콘텐츠를 숨기면서 클라이언트별 콘텐츠를 표시합니다. 전문가 팁: 기본 스타일 블록에 추가하면 대상 지정을 엉망으로 만드는 것으로 알려져 있으므로 각 대상 CSS를 고유한 스타일 블록에 넣습니다.

그렇다면 어떤 이메일 클라이언트를 타겟팅할 수 있습니까?

지메일
오피스 365
아웃룩닷컴
야후*
AOL*

Outlook용 데스크톱 클라이언트를 대상으로 지정할 수도 있지만 기본 단추를 사용하므로 한 번만 대상으로 지정할 필요 가 없습니다. (와후!)

이제 각 이메일 클라이언트를 대상으로 지정하는 방법에 대한 핵심 정보로 이동합니다(Yahoo 및 AOL에 대한 업데이트된 참고 사항 참조).

지메일

Gmail에 표시할 콘텐츠 블록에는 Google 캘린더 URL이 기본 버튼으로 있습니다. 버튼 아래의 다른 링크를 순환하여 ICS 파일을 포함합니다. 또한 전체 블록을 다른 모든 사람에게 숨겨야 하므로 값이 없음인 display 속성을 <div> 태그에 추가하고 Outlook에서 숨기기 위해 전체를 조건부 코드로 래핑합니다.

결과는 다음과 같습니다.

<!--Gmail Button-->
<!--[if (gte mso 9)|(IE)]><!-->
<div class="gmail" style="display: none;">
     <a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220112T180000Z%2F20220112T200000Z&details=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&location=New%20Earth&text=Welcome%20to%20the%20Motorway" class="cta btn-yellow" style="background-color: #F4D66C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-decoration: none; padding: 14px 20px; color: #1D2025; border-radius: 5px; display:inline-block; mso-padding-alt:0; box-shadow:0 3px 6px rgba(0,0,0,.2);"><span style="mso-text-raise:15pt;">Add to your Google Calendar</span></a>
                       	 
     <p style="font-family: Helvetica, Arial, sans-serif; color: #fdfdfd; font-size: 18px; line-height: 24px; margin: 20px 0 0 0;">
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Outlook.com</a> |
                       	 
          <a href="https://outlook.office.com/calendar/0/deeplink/compose?body=Learn%20all%20about%20the%20rules%20of%20the%20Motorway%20and%20how%20to%20access%20the%20fast%20lane.%0A%0Ahttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGridlock_%28Doctor_Who%29&enddt=2022-01-12T20%3A00%3A00%2B00%3A00&location=New%20Earth&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-01-12T18%3A00%3A00%2B00%3A00&subject=Welcome%20to%20the%20Motorway" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Office 365</a> |
                       	 
          <a href="https://campaigns.litmus.com/_email/test/newnewyork.ics" target="_blank" style="color: #fdfdfd; text-decoration: underline;">Apple Mail/Outlook Desktop</a>
     </p>
</div>                   	 
<!--<![endif]-->

Gmail은 자동으로 문서 유형을 <u></u>로 변경합니다. 이것은 <body> 태그에서 클래스와 ID를 상속하는 <div> 요소에 인접하게 배치됩니다. 따라서 다음을 사용하여 Gmail의 콘텐츠를 대상으로 지정하세요.

u + .body .foo {}

기본값을 숨기고 Gmail 버튼을 표시하는 스타일 블록은 다음과 같습니다.

<!--gmail styles-->
<style>
     u + .body .gmail { display: block !important; }
     u + .body .default { display: none !important; }
</style>

Outlook.com 및 Office 365

Outlook.com(Outlook Web App 또는 OWA) 및 Office 365에 대한 블록은 새 대상 클라이언트를 설명하기 위한 단추 및 링크 URL의 클래스 및 순환과 같이 약간 수정된 Gmail 블록과 동일하게 보입니다.

Office 365에는 데스크톱과 웹 메일 클라이언트가 모두 있으므로 혼동이 있을 수 있습니다. 그러나 대상 지정은 데스크톱 클라이언트의 기본 버튼이 ICS 파일에 연결되도록 하는 Outlook 웹메일 클라이언트에만 적용되는 반면 웹메일 클라이언트에서는 캘린더 링크에 대한 URL입니다.

Outlook.com과 Office 365 웹 메일 모두 클래스 이름에 x_ 접두사를 붙이지만 특성 선택기에서는 이 작업을 수행하지 않습니다. 따라서 <div> 블록은 다음을 사용하여 타겟팅할 수 있습니다.

[class="x_foo"] {}

... Outlook 웹메일 클라이언트에만 적용됩니다. 따라서 Outlook 웹 메일 클라이언트의 스타일 블록은 다음과 같습니다.

<!--owa styles-->
<style>
     [class~="x_outlook"] { display: block !important; }
     [class~="x_default"] { display: none !important; }
</style>

야후와 AOL

야후에는 캘린더 링크가 있었지만 마지막 테스트에서 링크는 이벤트를 추가할 수 있는 캘린더 페이지로 연결되지만 더 이상 이벤트 세부정보가 이어지지 않습니다.

이것은 Yahoo의 변경으로 인한 것일 수 있습니다. AOL과 야후는 모두 Verizon이 소유하고 있기 때문에 이메일 클라이언트를 간소화하여 서로에게 더 많은 인라인을 제공할 수 있습니다.

Yahoo 및 AOL을 구체적으로 대상으로 지정할 수 있지만 이제 ICS 파일만 지원합니다. 따라서 시간을 절약하고 추후 공지가 있을 때까지 이 블로그 게시물의 3단계 시작 부분에서 공유되는 기본 캘린더에 추가 코드를 사용하십시오.

작동 중인 "캘린더에 추가" 링크 보기

따라서 위의 코드는 아름답지만 실제 이메일에서 구현하면 어떻게 보이는지 궁금할 것입니다. 운 좋게도 Litmus Builder로 코딩하여 캘린더에 추가 버튼과 링크가 어떻게 보이는지, 그리고 다른 이메일 클라이언트와 장치에서 어떻게 렌더링되는지 확인할 수 있습니다.

이제 이벤트 참석자에게 이 특별한 이메일 서비스를 제공하십시오!

이벤트 이메일이 올바른지 확인하세요.

깨진 이메일은 사람들이 캘린더에 이벤트를 추가하는 것과 같이 전환이 더 적다는 것을 의미합니다. 그렇군요. Litmus Email Preview 등으로 이메일 오류를 방지하고 브랜드 평판을 보호하십시오.

무료 평가판 시작 →

이 블로그 게시물은 원래 Jaina Mistry가 2019년 5월 8일에 게시했습니다. 명확성과 새로운 정보를 위해 2021년 2월 5일에 업데이트되었습니다.