amp-access-laterpay

0.2 0.1

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

Consente ai publisher una facile integrazione con la piattaforma di micropagamenti LaterPay. amp-access-laterpay richiede l'Accesso AMP e si basa su di esso.

Comportamento

LaterPay è una piattaforma di micropagamento che consente agli utenti di acquistare contenuti online in pochi clic e di accedervi immediatamente, senza doversi registrare, inserire dati personali o effettuare pagamenti. Gli utenti pagano solo quando i loro acquisti hanno raggiunto un totale di $ 5 o di € 5 su vari siti web. I fornitori di contenuti possono vendere singoli articoli o abbonamenti a tempo che consentono un accesso con tariffa flat o un accesso temporaneo ai contenuti.

Se stai integrando LaterPay tramite l'integrazione di Connector Script, non potrai utilizzare tale integrazione nelle pagine AMP. amp-access-laterpay è analogo a Connector Script, che fornisce un set di funzioni simile, ma sviluppato per le pagine AMP.

È anche possibile vendere contenuti tramite LaterPay semplicemente utilizzando amp-access-laterpay come unico metodo di integrazione.

Il componente amp-access-laterpay utilizza internamente l'Accesso AMP per offrire un comportamento simile a quest'ultimo, ma creato su misura per l'utilizzo con il servizio LaterPay.

Se disponi di un servizio paywall personalizzato che vuoi utilizzare con Accesso AMP e LaterPay nella stessa pagina, puoi farlo.

Il componente amp-access-laterpay non richiede autorizzazione né configurazione di pingback perché è preconfigurato per funzionare con il servizio LaterPay. Inoltre, non richiede la configurazione manuale dei link di accesso.

Le diverse opzioni di acquisto possono essere configurate nell'account LaterPay del publisher; il componente recupererà la configurazione e creerà un elenco delle opzioni di acquisto disponibili.

Per scoprire come configurare le opzioni di acquisto, puoi consultare la documentazione sulla configurazione di LaterPay Connector, l'integrazione front-end esistente di LaterPay.

Lo stile dell'elenco generato può essere modificato e presentato in base alle preferenze del publisher.

Questo componente si basa anche sul Markup dei contenuti di accesso per mostrare e nascondere i contenuti.

Configurazione

La configurazione è simile ad Accesso AMP, ma non sono necessari autorizzazione né link di pingback e di accesso.

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

Nell'oggetto di configurazione laterpay possono essere impostati i seguenti valori:

Utilizzo del Markup dei contenuti di accesso e visualizzazione elenco acquisti

Il Markup dei contenuti di accesso deve essere utilizzato come Accesso AMP.

L'elemento con l'id amp-access-laterpay-dialog visualizzerà un elenco di opzioni di acquisto quando l'utente non ha accesso all'articolo. Questo elenco ha uno stile molto semplice e può essere personalizzato per essere più simile alla pagina del publisher.

Assicurati di aggiungere la classe amp-access-laterpay se vuoi utilizzare lo stile predefinito.

<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="">
  Spiacenti. Qualcosa non ha funzionato.
</section>

<div amp-access="access" amp-access-hide="">
  <p>...contenuti dell'articolo...</p>
</div>

Stili

Più classi vengono applicate ad alcuni elementi del markup generato. Gli elementi senza classi possono essere indirizzati in modo univoco tramite selettori di elementi CSS.

Alcuni layout CSS di base esistono già, ma è consigliabile che i publisher li abbinino in base all'aspetto delle loro pagine.

La struttura creata per la finestra di dialogo ha il seguente aspetto:

<div id="amp-access-laterpay-dialog" class="amp-access-laterpay">
  <div class="amp-access-laterpay-container">
    <p class="amp-access-laterpay-header">
      Facoltativo, viene visualizzato se viene definito il messaggio di intestazione.
    </p>
    <ul>
      <li>
        <label>
          <input name="purchaseOption" type="radio">
            <div class="amp-access-laterpay-metadata">
              <span class="amp-access-laterpay-title">Titolo opzione di acquisto</span>
              <p class="amp-access-laterpay-description">Descrizione delle opzioni di acquisto</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>
        <!-- ... altre voci di elenco per altre opzioni di acquisto ... -->
      </ul>
      <button class="amp-access-laterpay-purchase-button">Acquista ora</button>
      <p class="amp-access-laterpay-already-purchased-container">
        <a href="…">Già acquistato</a>
      </p>
      <p class="amp-access-laterpay-footer">
        Facoltativo, viene visualizzato se viene definito il messaggio del piè di pagina.
      </p>
    </div>
    <p class="amp-access-laterpay-badge">Powered by <a href="https://laterpay.net" target="_blank">LaterPay</a></p>
  </div>

Localizzazione

Il testo visualizzato nella finestra di dialogo per le opzioni di acquisto verrà definito dal publisher nell'interfaccia utente di LaterPay Connector.

Il testo rimanente fa parte del componente esteso e può essere modificato e localizzato tramite le opzioni di configurazione nel seguente modo:

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

I seguenti messaggi possono essere tradotti o personalizzati, ma devono conservare significato e intenzione originali.

Analisi

Dato che amp-access-laterpay è basato su amp-access, supporta tutti gli eventi di analisi inviati da amp-access.

Tutti gli esempi di https://ampexample.laterpay.net/ sono configurati per l'invio degli eventi di analisi se vuoi visualizzare un esempio più preciso di come potrebbe apparire in pratica.

Utilizzo dell'Accesso AMP LaterPay in combinazione con l'Accesso AMP

Se hai un sistema di abbonamento esistente e vuoi utilizzare LaterPay solo per vendere singoli articoli, è possibile combinare entrambi i metodi di vendita nella stessa pagina, utilizzando sia Accesso AMP che Accesso AMP LaterPay.

Prima di tutto, consulta la documentazione relativa all'Accesso AMP per ulteriori informazioni su come configurare l'accesso AMP con il paywall esistente.

La sezione relativa a più provider illustra come configurare più provider con spazi dei nomi.

Quando lo utilizzi con LaterPay e un'integrazione paywall esistente, la configurazione necessaria può avere un aspetto simile al seguente:

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

Dove il markup dell'accesso ai contenuti potrebbe risultare simile al seguente:

<section amp-access="NOT error AND NOT laterpay.access AND NOT publishername.access" amp-access-hide>
  <p>
    <a on="tap:amp-access.login-publishername">Esegui qui l'accesso per l'abbonamento a 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>
  Spiacenti. Qualcosa non ha funzionato.
</section>

<div amp-access="laterpay.access OR publishername.access" amp-access-hide>
  <p>...contenuti dell'articolo...</p>
</div>

Puoi trovare un esempio più completo su https://ampexample.laterpay.net/dual-amp-access.html

Documentazione correlata

• Accesso AMP
• LaterPay
• LaterPay: modalità di esecuzione dei MicroPayments
• LaterPay Connector - Simile ad Accesso AMP LaterPay ma non per pagine AMP.

Convalida

Consulta le regole relative ad amp-access-laterpay nella specifica dello strumento di convalida AMP.