AMP
IT
English Deutsch Français العربية Español Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-access-laterpay

Description

Consente ai publisher una facile integrazione con la piattaforma di micropagamenti 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>

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 obbligatori Tieni 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">
Esempi Vedi 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à Valori Descrizione
articleTitleSelector Selettore CSS richiesto Selettore 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.
articleId Elenco di identificatori separato da virgole Per 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.
jwt Token JWT per la configurazione dinamica dei pagamenti Questa 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.
locale stringa Definisce lo stile di formattazione del prezzo corretto per la località.
localeMessages oggetto Consente al publisher di personalizzare o localizzare il testo presente nell'elenco delle opzioni di acquisto generato. Consulta la sezione Localizzazione per ulteriori informazioni.
scrollToTopAfterAuth booleano Se 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.
region stringa Specifica in quale regione LaterPay ti trovi: eu o us.
sandbox booleano Serve 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.

Chiave Descrizione Valore predefinito
payLaterButton Testo visualizzato nel pulsante di acquisto per le opzioni per cui è possibile pagare in seguito. "Acquista ora, paga dopo"
payNowButton Testo visualizzato nel pulsante di acquisto per le opzioni che devono essere pagate al momento dell'acquisto. "Acquista ora"
defaultButton Testo predefinito visualizzato nel pulsante di acquisto prima di selezionare un'opzione. "Acquista ora"
alreadyPurchasedLink Se 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"
header Intestazione facoltativa.
footer Piè 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.

Ti servono altre informazioni?

Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.

Vai a Stack Overflow
Hai trovato un bug o una funzione mancante?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Vai a GitHub