動作
設定
アクセスコンテンツマークアップを使用して購入リストを表示する
スタイル設定
ローカライズ
アナリティクス
amp-access-laterpay と amp-access を同時に使用する
関連ドキュメント
検証

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-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.1.js"></script>

実例

amp-access-laterpay

このコンポーネントにより、サイト運営者は LaterPay マイクロペイメントプラットフォームと簡単に統合できます。amp-access-laterpay は amp-access をベースとしているため、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 By Example のアノテーション付きの amp-access-laterpay の例をご覧ください。

動作

LaterPay は、ユーザーが 2 回クリックするだけでオンラインコンテンツを購入できるマイクロペイメントプラットフォームです。購入したコンテンツにはすぐにアクセスできます。しかも、登録、個人データの入力、支払いを事前に行う必要はありません。ウェブサイトでの合計購入額が 5 ドルまたは 5 ユーロに達したときに初めて支払い義務が生じます。コンテンツプロバイダは、個々の商品アイテムや、コンテンツへの定額アクセスや時間制限付きのアクセスを提供する時間パスを販売できます。

Connector Script との統合を通じて LaterPay を統合する場合、AMP ページでの統合は使用できません。amp-access-laterpay は Connector Script に似ており、同じような機能セットを備えていますが、AMP ページ用に作成されたものではありません。

また、amp-access-laterpay を単独の統合方法として使用するだけで、LaterPay でコンテンツを販売することができます。

amp-access-laterpay コンポーネントは、amp-access を内部で使用することで、amp-access と同じように動作できます。しかも、LaterPay サービスと組み合わせて使用できるように調整することができます。

amp-access と組み合わせて使用したい独自のペイウォールサービスを、同じページ上で LaterPay と同時に使用することも可能です。

amp-access-laterpay コンポーネントは LaterPay サービスと連携できるようにあらかじめ設定されているため、承認や Pingback の設定は不要です。ログインリンクを手動で設定する必要もありません。

サイト運営者の LaterPay アカウントで各種購入オプションを設定できます。また、コンポーネントで設定を取得して、使用可能な購入オプションのリストを作成することができます。

LaterPay Connector の設定方法と LaterPay の既存のフロントエンド統合に関するドキュメントを参照して、購入オプションの設定方法をご確認ください。

作成したリストは、サイト運営者の好みに合わせてスタイルを設定し、表示することができます。

また、このコンポーネントでアクセスコンテンツマークアップを使用して、コンテンツの表示と非表示を切り替えることができます。

設定

設定は amp-access に似ていますが、承認、Pingback、ログインリンクは必要ありません。

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "property": value
      }
    }
</script>

laterpay 設定オブジェクトでは以下の値を設定できます。

プロパティ	値	説明
`articleTitleSelector`	CSS セレクタ（必須）	ページ内の要素（記事のタイトルを含む）を決定する CSS セレクタ。このプロパティにより、記事の購入ページにタイトルが表示され、ユーザーが購入内容を把握することができます。
`articleId`	識別子のカンマ区切りのリスト	デフォルトでは、購入オプションとのマッチングに記事の URL が使用されますが、購入オプションの URL パスを指定する代わりに、LaterPay Connector の UI で記事 ID を設定し、`articleId` プロパティを使用することで、記事と購入オプションをマッチングさせることができます。このプロパティは、記事の URL による購入オプションのマッチングでは柔軟性が不十分な場合に必要になります。LaterPay Connector() の設定ページで、このプロパティが役に立つシナリオの例をご確認ください。
`jwt`	動的な支払い設定用の JWT トークン	このオプションを使用すると、利用可能な有料コンテンツの設定を含む署名済みの JSON ウェブトークンを指定できます。つまり、ページはめ込みの設定は、LaterPay のコネクタ管理インターフェースで手動で指定するのではなく、ページ内でプログラムによって生成したものを提供することができます。これは、多くの記事の一括購入を設定する場合に特に役立ちます。このトークンの作成方法や、トークンで指定できるコンテンツについて詳しくは、LaterPay の JWT 有料コンテンツ API のドキュメントで Connector Script との統合についてご確認ください。
`locale`	文字列	ロケールに適した価格形式のスタイルを定義します。
`localeMessages`	オブジェクト	サイト運営者はこのプロパティを使用することで、生成した購入オプションのリスト内のテキストをカスタマイズまたはローカライズできます。詳しくは、ローカライズをご覧ください。
`scrollToTopAfterAuth`	ブール値	true の場合、承認プロセスが成功すると、ページが最上部までスクロールされます。このプロパティは、ダイアログの表示位置がページ内のかなり下にあり、ページに戻った後に現在のスクロール位置のせいでユーザーが混乱する可能性がある場合に便利です。
`region`	文字列	LaterPay の地域（`eu` または `us`）を指定します。
`sandbox`	ブール値	サンドボックスモードを使用してサーバー設定をテストする場合にのみ指定する必要があります。また、AMP の開発モードを使用する必要もあります。

アクセスコンテンツマークアップを使用して購入リストを表示する

アクセスコンテンツマークアップは amp-access と同じように使用する必要があります。

ID が 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="">
  Oops... Something broke.
</section>

<div amp-access="access" amp-access-hide="">
  <p>...article content...</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">
      Optional, appears if header locale message is defined.
    </p>
    <ul>
      <li>
        <label>
          <input name="purchaseOption" type="radio">
            <div class="amp-access-laterpay-metadata">
              <span class="amp-access-laterpay-title">Purchase option title</span>
              <p class="amp-access-laterpay-description">Purchase option description</p>
            </div>
          </label>
          <p class="amp-access-laterpay-price-container">
            <span class="amp-access-laterpay-price">0.15</span>
            <sup class="amp-access-laterpay-currency">USD</sup>
          </p>
        </li>
        <!-- ... more list items for other purchase options ... -->
      </ul>
      <button class="amp-access-laterpay-purchase-button">Buy Now</button>
      <p class="amp-access-laterpay-already-purchased-container">
        <a href="…">I already bought this</a>
      </p>
      <p class="amp-access-laterpay-footer">
        Optional, appears if footer locale message is defined.
      </p>
    </div>
    <p class="amp-access-laterpay-badge">Powered by <a href="https://laterpay.net" target="_blank">LaterPay</a></p>
  </div>

ローカライズ

購入オプションのダイアログに表示されるテキストは、LaterPay Connector の UI でサイト運営者が定義します。

その他のテキストは拡張コンポーネントの一部であり、設定オプションを使用して次のように変更およびローカライズできます。

<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/ をご覧ください。この例は、アナリティクスイベントを送信するように設定されています。