✕
필터
홈가이드
티켓 제출Branch 대시보드Branch UniversityLog In
티켓 제출Branch 대시보드Branch University

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. Add the Branch AMP SDK to your site. The AMP SDK consists of 2-3 snippets that you can insert into your AMP page. Add the following snippet between the AMP page’s <head></head> tags:
<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. From there, add the modified snippet between the <body></body> tags of your AMP page, preferably near or at the bottom.
  2. Lastly, if you do not already have the following AMP scripts on your page, add them between the AMP page's <head></head> tags:
<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:
1180
  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.
1834

오류 메시지 및 문제 해결

AMP Journeys를 위한 고급 설정

URL로 오디언스 타겟팅

With AMP, Google will serve your page from the Google AMP cache. This means that the URL that serves your AMP page will look something like https://www.google.com/amp/s/www.example.com/amp/doc.html. However, Branch passes through your original source URL, and this is what you should use for audience targeting. For the advanced audience filter Is viewing a page URL, you'll want to use the original URL where you host the AMP page. In this example, that would be 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, along with regular Journeys and the Quick Link Creator, automatically embeds $canonical_url in your link data based on meta tags on your web or AMP page. If you use this key to route to specific content in your app, you do not have to add anything extra for AMP.

AMP SDK에 쿼리 파라미터 추가

To deep link to specific content in your app, you can add query parameters to your Branch link within the amp-iframe. Here is what the amp-iframe looks like without any query parameters:

<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>

If your deep linking keys were productId and category, for example, you would add &productId=1234&category=shoes to your amp-iframe like this:

<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를 동시에 쿼리 파라미터로 생성하는 것이 좋습니다.

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

You can customize the appearance of a Journey dynamically using query parameters on your amp-iframe link. These are the fields currently supported for dynamic layout customization on 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라면 아래 화면과 같이 설정할 수 있습니다.

1626

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 인 다른 커스텀 배너가 포함됩니다.

Updated about 1 month ago