AMP

amp-access-laterpay

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.

Script obbligatoriTieni presente che hai bisogno di script per "amp-access-laterpay", "amp-access" e "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">
EsempiVedi l'esempio con annotazioni di amp-access-laterpay di AMP By Example.

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:

ProprietàValoriDescrizione
articleTitleSelectorSelettore CSS richiestoSelettore CSS che determina l'elemento nella pagina che contiene il titolo dell'articolo. La pagina presentata per l'acquisto dell'articolo conterrà questo titolo in modo che l'utente sia consapevole di cosa sta acquistando.
articleIdElenco di identificatori separato da virgolePer impostazione predefinita, l'URL di un articolo viene utilizzato per abbinarlo a un'opzione di acquisto, ma invece di specificare un percorso URL per un'opzione di acquisto è possibile impostare un ID articolo nell'interfaccia di LaterPay Connector, quindi utilizzare la proprietà articleId in modo che corrisponda all'articolo con l'opzione di acquisto.
Ciò è necessario nei casi in cui la corrispondenza di un'opzione di acquisto tramite l'URL di un articolo non è sufficientemente flessibile. Consulta la pagina di configurazione di LaterPay Connector() per informazioni su alcuni scenari di esempio in cui potrebbe essere utile.
jwtToken JWT per la configurazione dinamica dei pagamentiQuesta opzione consente di specificare un token web JSON firmato con una configurazione dei contenuti a pagamento disponibili. Ciò significa che puoi fornire una configurazione in-page generata in modo programmatico nelle tue pagine, anziché specificarla manualmente nell'interfaccia amministratore di LaterPay Connector. Questo potrebbe essere particolarmente utile per la configurazione di acquisti singoli per molti articoli diversi.
Se vuoi ulteriori informazioni su come creare questo token e quali contenuti possono essere specificati al suo interno, consulta la documentazione dell'API dei contenuti a pagamento JWT di LaterPay per l'integrazione di Connector Script.
localestringaDefinisce lo stile di formattazione del prezzo corretto per la località.
localeMessagesoggettoConsente al publisher di personalizzare o localizzare il testo presente nell'elenco delle opzioni di acquisto generato. Consulta la sezione Localizzazione per ulteriori informazioni.
scrollToTopAfterAuthbooleanoSe vero, fa scorrere la pagina in alto dopo che il processo di autorizzazione ha avuto esito positivo. Ciò può essere utile se il punto in cui viene visualizzata la finestra di dialogo è più giù nella pagina e l'utente potrebbe essere confuso dalla posizione corrente dello scorrimento dopo il ritorno alla pagina.
regionstringaSpecifica in quale regione LaterPay ti trovi: eu o us.
sandboxbooleanoServe solo se si utilizza la modalità sandbox per testare la configurazione del server. Devi anche utilizzare la modalità sviluppatore di AMP.

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.

ChiaveDescrizioneValore predefinito
payLaterButtonTesto visualizzato nel pulsante di acquisto per le opzioni per cui è possibile pagare in seguito."Acquista ora, paga dopo"
payNowButtonTesto visualizzato nel pulsante di acquisto per le opzioni che devono essere pagate al momento dell'acquisto."Acquista ora"
defaultButtonTesto predefinito visualizzato nel pulsante di acquisto prima di selezionare un'opzione."Acquista ora"
alreadyPurchasedLinkSe l'utente ha acquistato l'articolo in passato ma ha perso i cookie (o si trova in un dispositivo diverso) può utilizzare questo link per accedere a LaterPay e recuperare i propri acquisti."Già acquistato"
headerIntestazione facoltativa.
footerPiè di pagina facoltativo.

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

Convalida

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

Serve ancora aiuto?

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