Accelerated Mobile Pages (AMP) 용 Journeys

Overview

Accelerated Mobile Pages (AMP) are a way to build pages that serve static content so that they load in Google search results much faster. Google uses AMP to quickly serve content on mobile devices without users having to click through to a website to view the content, and AMP pages often appear at the top of mobile search results.

AMP 페이지 사용 시 유저는 Google 검색으로 돌아가는 것을 제외하고는 다른 곳으로 이동하기 어렵고, 이에 따라 유저를 웹사이트 또는 앱으로 전환하기가 어렵습니다. AMP 호환 Journeys 솔루션을 사용하면 모바일 웹 트래픽을 Google 검색 결과에서 앱으로 전환하고 AMP 페이지를 통한 추가 트래픽을 활용할 수 있습니다. AMP 호환 웹사이트에 표시될 수 있는 Journeys 솔루션 템플릿을 선택하세요.

전제 조건

  • To host AMP Journeys and show in Google search as an AMP page, your webpage must be AMP-compatible.
  • Journeys uses your alternate domain for Universal Links. Make sure you include your xxxx-alternate.app.link domain in your Associated Domains.

Setup

  1. 사이트에 Branch AMP SDK를 추가합니다. AMP SDK는 AMP 페이지에 삽입할 수 있는 2-3 개의 스니펫으로 구성됩니다. AMP 페이지의 <head></head> 태그 사이에 다음 스니펫을 추가하세요.
<style amp-custom>#branch-amp-journey{bottom:0;left:0;width:100%;height:77px;position:fixed;}.hideme{width:100%;height:77px;left:24px;background-color:none;position:fixed;}.close{width:24px;height:100%;left:0;z-index:10000;background-color:none;position:fixed;}.branch-amp-journey-inner{position:relative;width:100%;height:100%;z-index:9999;}.donotdisplay{display:none;}</style>
  1. Modify the following snippet by replacing DOMAIN_HERE with your xxxx.app.link Branch link domain (do not use a custom subdomain), and BRANCH_KEY_HERE with your Branch API key - in both the amp-list tag and the amp-iframe tag. You can find these in Link Settings and Account Settings.
<amp-list tabindex=0 role="" on="tap:branch-amp-journey.hide" id="branch-amp-journey" src="https://DOMAIN-HERE/branch-amp-journeys-pre?branch_key=BRANCH_KEY_HERE&__aj_cid=CLIENT_ID(_s)&__amp_viewer=VIEWER&__aj_source_url=SOURCE_URL&__aj_canonical_url=CANONICAL_URL&__aj_v=1.0.0" layout=fixed-height height="77px"><template type="amp-mustache" id="journey-template"><a class="close" on="tap:branch-amp-journey.hide"></a><div class="hideme" ></div><amp-iframe class="branch-amp-journey-inner {{do_not_display}}" layout="fixed-height" height="77px" resizable src="https://DOMAIN-HERE/branch-amp-journeys?branch_key=BRANCH_KEY_HERE&__aj_cid={{__aj_cid}}&__aj_source_url={{__aj_source_url}}&__aj_canonical_url={{__aj_canonical_url}}&_audience_rule_id={{_audience_rule_id}}&_branch_view_id={{_branch_view_id}}&__aj_v=1.0.0" sandbox="allow-scripts allow-top-navigation allow-same-origin" frameborder="0"><div overflow></div></amp-iframe></template></amp-list>
  1. 여기에서 AMP 페이지의 <body></body> 태그 사이에 수정된 스니펫을 추가하세요.
  2. 마지막으로 페이지에 다음 AMP 스크립트가 아직 없는 경우 AMP 페이지의 <head></head> 태그 사이에 추가하세요.
<script async src="https://cdn.ampproject.org/v0/amp-list-0.1.js" custom-element="amp-list"></script><script async src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js" custom-template="amp-mustache"></script><script async src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" custom-element="amp-iframe"></script>

📘

SEO 및 딥링킹을 위한 canonical URL

Google recommends that on your AMP page, you include a reference to the canonical URL of the non-AMP page with the same content. For example, you should include a tag like this in the <head></head> section of your AMP page: <link rel="canonical" href="https://example.com/article.html">. This helps make your AMP page discoverable, and likely helps ensure that SEO information is shared between these two pages. Additionally, Branch automatically embeds the canonical URL in the Journey link data, leading to better identification of content and the ability to use this key for deep linking.

오디언스의 AMP 웹을 대상으로 하는 Journey 만들기

1. 오디언스 선택

  1. AMP Journeys can be created as part of the normal Journeys creation flow. You can target users on AMP pages by checking the box AMP Web on the Select Audience step:
11801180
  1. Save & Continue을 클릭하여 Journeys 템플릿 및 보기를 설정합니다.

2. 화면 설정

  1. Configure Views 단계에서 Select Template을 클릭하면 standard bottom banner 보기 유형이 이미 선택되어 있어야 합니다. Google은 배너가 AMP 페이지의 상위 75%에 표시되지 않도록 요구하기 때문에 현재 AMP에서 서포트 되는 유일한 템플릿입니다.
  2. 템플릿 위로 마우스를 가져가 Create를 클릭합니다.
  3. 템플릿을 커스터마이징 하고 완료되면 Save & Continue을 클릭합니다.

3. 검증 및 테스트

  1. On the Validate & Test phase, you will see AMP-specific messages if you have targeted AMP Web users on the Select Audience step.
18341834

오류 메시지 및 문제 해결

AMP Journeys를 위한 고급 설정

URL로 오디언스 타겟팅

AMP를 사용하면 Google은 Google AMP 캐시에서 페이지를 제공합니다. 즉, AMP 페이지를 제공하는 URL은 https://www.google.com/amp/s/www.example.com/amp/doc.html과 같이 표시됩니다. 그러나 Branch는 기존의 소스 URL을 패스하여 오디언스 타겟팅에 사용합니다. 고급 오디언스 필터 Is viewing a page URL의 경우 AMP 페이지를 호스팅하는 원래 URL을 사용하는 것이 좋습니다. 이 예시에서는 https://www.example.com/amp/doc.html입니다.

AMP와의 딥링킹(Deep Linking)

다음 두 가지 방법으로 AMP에서 딥링크(Deep Link) 데이터를 포함한 링크를 설정할 수 있습니다.

  1. AMP SDK의 Branch 링크에 쿼리 파라미터 추가
  2. 대시보드에서 Journey에 딥링크(Deep Link) 데이터 추가

📘

딥링킹 용으로 $canonical_url 사용

AMP Journeys 솔루션은 일반 Journeys 솔루션 및 Quick Link Creator와 함께 웹 또는 AMP 페이지의 메타 태그를 기반으로 링크 데이터에 $canonical_url을 자동으로 삽입합니다. 이 키를 사용하여 앱의 특정 콘텐츠로 라우팅하는 경우 AMP에 대해 부가적인 기능을 추가할 필요가 없습니다.

AMP SDK에 쿼리 파라미터 추가

앱의 특정 콘텐츠에 대한 딥링크(Deep Link)를 위해 amp-iframe 내 Branch 링크에 쿼리 파라미터를 추가할 수 있습니다. 다음은 쿼리 파라미터가 없는 amp-iframe의 모습입니다.

<amp-iframe class="branch-amp-journey-inner {{do_not_display}}" layout="fixed-height" height="77px" resizable src="https://DOMAIN-HERE/branch-amp-journeys?branch_key=BRANCH_KEY_HERE&__aj_cid={{__aj_cid}}&__aj_source_url={{__aj_source_url}}&__aj_canonical_url={{__aj_canonical_url}}&_audience_rule_id={{_audience_rule_id}}&_branch_view_id={{_branch_view_id}}&__aj_v=1.0.0" sandbox="allow-scripts allow-top-navigation allow-same-origin" frameborder="0"><div overflow></div></amp-iframe>

예를 들어 딥링킹 key가 productIdcategory인 경우 다음과 같이 amp-iframe&productId=1234&category=shoes에 추가합니다.

<amp-iframe class="branch-amp-journey-inner {{do_not_display}}" layout="fixed-height" height="77px" resizable src="https://DOMAIN-HERE/branch-amp-journeys?branch_key=BRANCH_KEY_HERE&__aj_cid={{__aj_cid}}&__aj_source_url={{__aj_source_url}}&__aj_canonical_url={{__aj_canonical_url}}&_audience_rule_id={{_audience_rule_id}}&_branch_view_id={{_branch_view_id}}&__aj_v=1.0.0&productId=1234&category=shoes" sandbox="allow-scripts allow-top-navigation allow-same-origin" frameborder="0"><div overflow></div></amp-iframe>

프로그래밍 방식으로 AMP 페이지를 생성하는 경우 이러한 key를 동시에 쿼리 파라미터로 생성하는 것이 좋습니다.

동적 레이아웃 커스터마이징

amp-iframe 링크에서 쿼리 파라미터를 사용하여 Journey의 형태를 동적으로 커스터마이징 할 수 있습니다. AMP에서 동적 레이아웃 커스터마이징을 위해 현재 서포트 되는 필드는 다음과 같습니다.

Link Data Key예시
$journeys_button_get_has_app앱이 현재 설치된 경우 액션 호출 버튼$journeys_button_get_has_app=Download
$journeys_button_get_no_app앱이 현재 설치되지 않은 경우 액션 호출 버튼$journeys_button_get_no_app=Read
$journeys_description프레임의 설명 또는 부제목$journeys_description=Continue+reading+in+the+app.

Journeys 대시보드에서 딥링크(Deep Link) 데이터 추가

대시보드에서 Journey에 딥링크(Deep Link) 데이터를 추가할 수도 있습니다. Customize Template 화면에서 버튼을 클릭하고 Deep Link Data 필드에 key:value 페어를 추가하세요. 예를 들어 딥링킹 key가 productId라면 아래 화면과 같이 설정할 수 있습니다.

16261626

AMP Journey 제한

자바스크립트는 AMP에서 제한되고 쿠키는 AMP와 iOS 모두에서 제한되기 때문에 AMP Journeys 솔루션은 모든 표준 Journeys 솔루션 기능을 서포트하지 않습니다. 다음 Journeys 솔루션 기능이 영향을 받습니다.

  • Event-based audience rules work within AMP only or after a Branch link click on an AMP page. Read more.
  • Only templates on the bottom of the page and equal to 76px in height show on AMP. Read more.
  • Dismiss period is not supported - after dismiss, Journeys will show again during the next AMP session.
  • Client-side javascript controls are not supported.
  • open_app: true로 앱 자동 열기는 서포트 되지 않습니다.
  • Deep linking with setBranchViewData is not supported. Learn how you can deep link to content from AMP pages.
  • Branch hosted deep link data will not be scraped. This also means that the Is viewing a page with metadata key filter will not be supported.
  • 사이트에서 리퀴드 태그(예: {{ yourObject }})를 찾아서 대체하는 Jinja와 같은 템플릿 엔진을 사용하는 경우, 렌더에서 Branch 태그를 제거하지 않도록 확실히 해야 합니다. 구체적으로 Jinja의 경우 로우 태그를 사용하여 AMP 페이지에서 Branch 코드를 랩핑해야 합니다.
{% raw %}
<amp-list tabindex=0 role="" on="tap:branch-amp-journey.hide" id="branch-amp-journey" src="https://DOMAIN-HERE/branch-amp-journeys-pre?branch_key=BRANCH_KEY_HERE&_aj_cid=CLIENT_ID(_s)&amp_viewer=VIEWER&aj_source_url=SOURCE_URL&aj_canonical_url=CANONICAL_URL&aj_v=1.0.0" layout=fixed-height height="77px"><template type="amp-mustache" id="journey-template"><a class="close" on="tap:branch-amp-journey.hide"></a><div class="hideme" ></div><amp-iframe class="branch-amp-journey-inner do_not_display" layout="fixed-height" height="77px" resizable src="https://DOMAIN-HERE/branch-amp-journeys?branch_key=BRANCH_KEY_HERE&aj_cid=aj_cid&aj_source_url=aj_source_url&aj_canonical_url=aj_canonical_url&_audience_rule_id=_audience_rule_id&_branch_view_id=_branch_view_id&_aj_v=1.0.0" sandbox="allow-scripts allow-top-navigation allow-same-origin" frameborder="0"><div overflow></div></amp-iframe></template></amp-list>
{% endraw %}

타겟팅 제한

쿠키는 AMP와 iOS 모두에서 제한되기 때문에 AMP Journeys 솔루션의 이벤트 기반 오디언스 규칙에는 쿠키를 사용할 수 없습니다. 실제로 이는 타겟팅이 다음 규칙에 대해 AMP 내에서만 작동함을 의미합니다.

  • Has completed event
  • Has visited web
  • Has visited the app
  • Has the app installed

유저가 AMP 외부의 Branch 링크를 클릭하면 이벤트 기반 오디언스 규칙이 해당 유저의 일반 웹 쿠키를 사용할 것이며 AMP 및 비 AMP 웹에서 모두 동작하게 됩니다.

배너 제한

당분간 고정 높이 및 배치(페이지 하단)의 배너만 AMP와 호환됩니다. 여기에는 Branch Banner Bottom 또는 페이지 하단에 페이지가 배치되고 높이가 76px 인 다른 커스텀 배너가 포함됩니다.


이 페이지가 도움이 되었습니까?