AMP

amp-access-laterpay

このコンポーネントにより、サイト運営者は LaterPay マイクロペイメント プラットフォームと簡単に統合できます。amp-access-laterpayamp-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-laterpayamp-access をベースとしているため、amp-access から送信されたアナリティクス イベントをすべてサポートします。

実際のページの詳細な例については、https://ampexample.laterpay.net/ をご覧ください。この例は、アナリティクス イベントを送信するように設定されています。

amp-access-laterpay と amp-access を同時に使用する

既存のサブスクリプション システムがあり、LaterPay を個々の記事の販売用にのみ使用する予定の場合は、amp-access と 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">Login here to access your PublisherName subscription.</a>
  </p>

  <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="laterpay.access OR publishername.access" amp-access-hide>
  <p>...article content...</p>
</div>

詳細な例については、https://ampexample.laterpay.net/dual-amp-access.html をご覧ください。

関連ドキュメント

検証

AMP 検証ツールの仕様で amp-access-laterpay のルールをご確認ください。

ご不明な点がある場合

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub