amp-access-laterpay
Description
Позволяет издателям легко обеспечивать интеграцию с платформой для микроплатежей LaterPay
Required Scripts
<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js"></script>
<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
Примеры
Позволяет издателям легко обеспечивать интеграцию с платформой для микроплатежей LaterPay. Для работы с amp-access-laterpay
необходимо использовать amp-access.
Скрипты | Обратите внимание, что вам понадобятся скрипты для amp-access-laterpay, amp-access и amp-analytics. <script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"> <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"> <script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js"> |
Примеры | См. пример amp-access-laterpay на сайте AMP By Example. |
Действия
LaterPay – это платформа для микроплатежей, которая позволяет пользователям покупать онлайн-контент всего в два клика. При этом они сразу получают доступ к оплаченным данным – без предварительной регистрации и отправки личной или платежной информации. Оплата осуществляется только после того, как сумма покупки достигла 5 долл. США или евро на разных сайтах. Поставщики контента могут продавать отдельные элементы или повременный доступ к контенту (ограниченный или постоянный).
Если интеграция с LaterPay осуществлялась с помощью Connector Script, вы не сможете использовать ее на AMP-страницах. Решение amp-access-laterpay
аналогично Connector Script по функциональности, но предназначено специально для AMP-страниц.
Чтобы продавать контент через LaterPay, достаточно использовать amp-access-laterpay
в качестве единственного метода интеграции.
Компонент amp-access-laterpay
использует решение AMP Access, чтобы обеспечить аналогичное поведение при работе с сервисом LaterPay.
Если у вас есть собственный сервис платного доступа и вы хотите использовать его совместно с AMP Access и LaterPay на одной и той же странице, это можно настроить.
Компонент amp-access-laterpay
не требует авторизации или конфигурации автоматического уведомления, поскольку он уже настроен для работы с LaterPay. Также не требуется настраивать вручную ссылки для входа.
Разные варианты покупки можно настроить в издательском аккаунте LaterPay. Компонент будет запрашивать конфигурации и создавать список вариантов.
Ознакомьтесь с документацией по настройке LaterPay Connector, инструмента для интеграции с пользовательским интерфейсом.
Список, который создается компонентом, можно стилизовать, чтобы он выглядел так, как нужно издателю.
При работе компонента также применяется разметка контента для доступа. Она позволяет скрывать и показывать контент.
Конфигурация
Конфигурация похожа на ту, что используется для AMP Access, но не требует авторизации, автоматического уведомления и ссылок для входа.
<script id="amp-access" type="application/json"> { "vendor": "laterpay", "laterpay": { "property": value } } </script>
Значения, которые можно настроить в объекте конфигурации laterpay
, перечислены ниже.
Свойство | Значение | Описание |
---|---|---|
articleTitleSelector | Селектор CSS (обязательно) | Селектор CSS, который определяет элемент на странице, содержащий заголовок статьи. Это гарантирует, что на страница с предложением купить статью есть ее название и пользователь знает, что покупает. |
articleId | Список идентификаторов, разделенный запятыми | По умолчанию для сопоставления статьи с вариантом покупки используется ее URL. Однако вместо пути URL вы можете настроить идентификатор статьи в интерфейсе LaterPay Connector, а затем воспользоваться свойством articleId , чтобы выполнить сопоставление. Это необходимо в тех случаях, когда вам требуется более гибкое сопоставление варианта покупки с URL. Ознакомьтесь со статьей о конфигурации LaterPay Connector. Там приведены примеры и сценарии использования. |
jwt | Токен JWT для настройки динамического платежа | Этот параметр позволяет указать подписанный веб-токен JSON с конфигурацией для доступного платного контента. Таким образом вы можете предоставить внутристраничную конфигурацию, сгенерированную программно на ваших страницах, а не указывать ее вручную в интерфейсе LaterPay Connector. Это может быть особенно полезно при настройке отдельных покупок для множества разных статей. О том, как создать токен и какой контент можно в нем указывать, читайте в документации по JWT Paid Content API для скрипта Connector Script. |
locale | string | Определяет стиль форматирования цены, соответствующий региональным настройкам. |
localeMessages | object | Позволяет издателю настраивать или локализовать текст, присутствующий в сгенерированном списке вариантов покупки. Более подробные сведения приведены в разделе Локализация. |
scrollToTopAfterAuth | boolean | При значении true прокручивает страницу вверх, если авторизация прошла успешно. Это полезно, если диалог был показан в нижней части страницы и пользователь может запутаться с прокруткой после возврата на страницу. |
region | string | Регион для LaterPay: eu или us . |
sandbox | boolean | Требуется только в том случае, если вы используете тестовую среду для проверки конфигурации сервера. Вам также необходимо применить режим разработчика AMP. |
Разметка контента для доступа и список вариантов покупки
Разметка контента для доступа здесь используется так же, как и в случае с AMP Access.
Элемент с идентификатором amp-access-laterpay-dialog
обрабатывает список вариантов, если у пользователя нет доступа к статье. Этот список имеет несколько базовых стилей и его можно настроить так, чтобы он лучше смотрелся на странице издателя.
Если вас устраивает стиль по умолчанию, убедитесь, что вы применяете класс amp-access-laterpay
.
<section amp-access="NOT error AND NOT access" amp-access-hide=""> <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div> </section> <section class="error-section" amp-access="error" amp-access-hide=""> Произошла ошибка. </section> <div amp-access="access" amp-access-hide=""> <p>...Контент статьи...</p> </div>
Стилизация
К некоторым элементам сгенерированной разметки применяется несколько классов. На элементы без классов можно однозначно ссылаться через селекторы элементов CSS.
У нас есть базовые шаблоны CSS, но мы рекомендуем издателям стилизовать списки так, чтобы они естественно смотрелись на страницах.
Структура диалога выглядит так:
<div id="amp-access-laterpay-dialog" class="amp-access-laterpay"> <div class="amp-access-laterpay-container"> <p class="amp-access-laterpay-header"> Необязательно. Отображается, если в верхнем колонтитуле задано сообщение для локализации. </p> <ul> <li> <label> <input name="purchaseOption" type="radio"> <div class="amp-access-laterpay-metadata"> <span class="amp-access-laterpay-title">Название покупки</span> <p class="amp-access-laterpay-description">Описание покупки</p> </div> </label> <p class="amp-access-laterpay-price-container"> <span class="amp-access-laterpay-price">100</span> <sup class="amp-access-laterpay-currency">РУБ</sup> </p> </li> <!-- ...Список других вариантов... --> </ul> <button class="amp-access-laterpay-purchase-button">Купить</button> <p class="amp-access-laterpay-already-purchased-container"> <a href="…">Уже есть</a> </p> <p class="amp-access-laterpay-footer"> Необязательно. Отображается, если в нижнем колонтитуле задано сообщение для локализации. </p> </div> <p class="amp-access-laterpay-badge">Технологии <a href="https://laterpay.net" target="_blank">LaterPay</a></p> </div>
Локализация
Текст, который отображается в диалоговом окне с вариантами покупки, указывается издателем в интерфейсе LaterPay Connector.
Оставшийся текст является частью расширенного компонента. Его можно изменить и локализовать с помощью параметров конфигурации следующим образом:
<script id="amp-access" type="application/json"> { "vendor": "laterpay", "laterpay": { "localeMessages": { "messageKey": "message value" } } } </script>
Ниже перечислены ключи, которые можно перевести или настроить. Учитывайте, что текст в любом случае должен сохранять исходный смысл.
Ключ | Описание | Значение по умолчанию |
---|---|---|
payLaterButton | Текст кнопки для совершения покупки. Показывается для вариантов, когда можно заплатить позже. | 'Buy Now, Pay Later' |
payNowButton | Текст кнопки для совершения покупки. Показывается для вариантов с немедленной оплатой. | 'Buy Now' |
defaultButton | Текст кнопки, который отображается, пока ни один вариант не выбран. | 'Buy Now' |
alreadyPurchasedLink | Если пользователь ранее приобрел статью, но файлы cookie не сохранились или он вошел с другого устройства, эта ссылка пригодится для входа в LaterPay и доступа к оплаченному контенту. | 'I already bought this' |
header | Необязательный текст верхнего колонтитула. | |
footer | Необязательный текст нижнего колонтитула. |
Аналитика
Поскольку в основе amp-access-laterpay
лежит amp-access
, этот компонент поддерживает все события аналитики, которые отправляет amp-access
.
Подробные практические примеры можно найти на сайте https://ampexample.laterpay.net/. Все они настроены так, чтобы отправлять эти события.
Совместное использование AMP Access LaterPay и AMP Access
Если у вас есть собственная система подписки и вы собираетесь использовать LaterPay только для продажи отдельных статей, можно сочетать AMP Access LaterPay и AMP Access на одной странице.
Для начала ознакомьтесь с документацией по AMP Access и узнайте, как настроить этот компонент для работы с вашим платным доступом.
В разделе о нескольких поставщиках объясняется, как настроить несколько поставщиков, используя пространства имен.
В сочетании с LaterPay и существующей системой платного доступа конфигурация будет выглядеть примерно так:
<script id="amp-access" type="application/json"> [ { "vendor": "laterpay", "laterpay": { "region": "us" }, "namespace": "laterpay" }, { "authorization": "https://pub.com/amp-access?rid=READER_ID&url=SOURCE_URL", "pingback": "https://pub.com/amp-ping?rid=READER_ID&url=SOURCE_URL", "login": "https://pub.com/amp-login?rid=READER_ID&url=SOURCE_URL", "authorizationFallbackResponse": {"error": true}, "namespace": "publishername" } ] </script>
Разметка контента может выглядеть так:
<section amp-access="NOT error AND NOT laterpay.access AND NOT publishername.access" amp-access-hide> <p> <a on="tap:amp-access.login-publishername">Войдите, чтобы воспользоваться подпиской на PublisherName.</a> </p> <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div> </section> <section class="error-section" amp-access="error" amp-access-hide> Произошла ошибка. </section> <div amp-access="laterpay.access OR publishername.access" amp-access-hide> <p>...Контент статьи...</p> </div>
Более подробный пример можно найти по ссылке: https://ampexample.laterpay.net/dual-amp-access.html.
Статьи по теме
- AMP Access
- LaterPay
- LaterPay: как мы работаем с микроплатежами
- LaterPay Connector – решение, похожее на AMP Access LaterPay, но созданное для обычных страниц без AMP.
Проверка
О правилах для amp-access-laterpay читайте в спецификации валидатора AMP.
Вы читали этот документ десятки раз, но так и не нашли ответов на все свои вопросы? Возможно, другие люди столкнулись с такой же проблемой — обратитесь к ним на Stack Overflow.
Перейти на Stack Overflow Нашли ошибку или недостающую функцию?Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.
Перейти на GitHub