Come personalizzare le pagine di consenso

Tempo di lettura stimato 5 minuti

Ultimo aggiornamento: 5 ago 2025, 00:00 EST

Imparerai

Scopra come attivare e utilizzare la funzione delle pagine ospitate di Klaviyo, che le permette di personalizzare le pagine delle preferenze, le pagine di iscrizione e le pagine di cancellazione.

Questo articolo è per gli sviluppatori; attualmente Klaviyo non offre servizi per aiutare a creare codice personalizzato, né forniamo supporto per la risoluzione dei problemi del codice personalizzato. Per conoscere le nostre pagine di consenso integrate nelle app, consulti il nostro articolo su come iniziare con le pagine di consenso.

Prima di iniziare

Prima di configurare una pagina ospitata, attivi questa funzione:

Vada su Impostazioni > Altro.
Scelga le pagine di consenso dal menu a tendina.
Alla voce Pagine ospitate personalizzate, seleziona l'interruttore su Usa un dominio dedicato personalizzato per le pagine ospitate.

Si noti che solo gli account con un piano a pagamento che hanno superato la verifica dell'account hanno accesso a questa impostazione.

Creare una pagina di consenso personalizzata

Vada su Impostazioni > Altro.
Clicchi su Pagine ospitate.
Accanto a Pagine, clicchi sul simbolo + per aggiungere una nuova pagina.
Dare un nome a questa pagina (ad esempio, unsubscribe.tmpl); potrà utilizzarlo per qualsiasi pagina di consenso, ma può creare più di una pagina, se lo desidera.

I nomi delle pagine ospitate non possono contenere spazi, in quanto si verificherebbe un errore. Eviti gli spazi o utilizzi i trattini bassi per spezzare i titoli.

Progetti una pagina HTML che includa i campi e le funzionalità di sua scelta. I campi di esempio che possono essere inseriti per una pagina di consenso personalizzata includono:
- Scelta della frequenza delle e-mail:
  - Un'opzione per annullare l'iscrizione
  - Un'opzione per ricevere tutte le e-mail
  - Opzioni di frequenza per newsletter giornaliere, settimanali, mensili, ecc.
- Informazioni che possono essere utilizzate per indirizzare e segmentare:
  - Una casella di controllo per stabilire se l'utente desidera o meno gli annunci di vendita.
  - Una casella di controllo per sapere se l'utente desidera o meno gli annunci sui prodotti.
  - Una casella di controllo per stabilire se l'utente desidera o meno gli aggiornamenti del blog.
  - Altre liste a cui l'utente potrebbe voler aderire

Esempio di codice HTML per una pagina di consenso

Può utilizzare questo codice nel suo unsubscribe.tmpl per ottenere una pagina di consenso completamente funzionale con preferenze sul tipo di e-mail e sulla frequenza:

Preferenze e-mail

{% if form.non_field_errors %}

{% for error in form.non_field_errors %} {{ error }}{% if not forloop.last %}
{% endif %} {% endfor %}

{% endif %}

Indirizzo e-mail *

{% if form.errors|lookup:'$email' %}

{% for error in form.errors|lookup:'$email' %}{{ error }}{% endfor %}

{% endif %}

First Name

Last Name

Interests

Nuovi lanci di prodotti

Promozioni & Vendite Ultime dal Blog

valore="Eventi" {% if 'Events' in person.EmailInterests or 'Events' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} /> Eventi

Con quale frequenza desidera avere nostre notizie?

Due volte alla settimana

{% if person.EmailFrequency == 'Weekly' or request.POST.EmailFrequency == 'Weekly' %}checked="checked"{% endif %} /> Una volta alla settimana

Una volta al mese

/div>

Cancellami da tutte le e-mail.

" data-astro-cid-mnja5ucx style="--bg: #2d2d30;--headerBg: #1e1e1e;--border: #3e3e3e;--filenameText: #cccccc;">

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Ultimo CSS compilato e minificato -->
      <link rel="foglio di stile" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <style type="text/css">
        /* Spazi un po' il contenuto */
        corpo {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        form {
            margin-bottom: 18px;
        }

        /* Intestazione della pagina personalizzata */
        .intestazione {
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 10px;
        }

        .header h1 {
            margin: 10px 0;
        }

        .campi obbligatori {
            text-align: right;
        }

        .campi obbligatori span {
            color: #a94442;
            font-weight: bold;
        }

        .list-group-item etichetta {
            font-weight: normal;
            margin-top: 17px;
        }

        .list-group-item label input[type="checkbox"] {
            margin-right: 4px;
        }

        .form-group span.required {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 20px;
            color: #a94442;
            font-weight: bold;
            user-select: none;
        }

        label.error {
            color: #a94442;
            font-weight: bold;
            margin-top: 4px;
        }

        .form-actions {
            margin: 25px 0;
        }

        .form-control+.form-control {
            margin-top: 6px;
        }

        .panel-group .pannello-titolo .icona chiusa,
        .pannello-gruppo .pannello-titolo .icona aperta {
            margin-right: 0.5em;
            top: 2px;
        }

        .panel-group .pannello-titolo a:hover,
        .panel-group .pannello-titolo a:active {
            text-decoration: none;
        }

        .panel-group .pannello-titolo a:hover .text,
        .pannello-gruppo .pannello-titolo a:active .text {
            text-decoration: underline;
        }

        .panel-group .pannello-titolo .icona chiusa {
            display: none;
        }

        .panel-group.closed .panel-title .icona aperta {
            display: none;
        }

        .panel-group.closed .panel-title .icona chiusa {
            display: inline;
        }

        /* Piè di pagina personalizzato */
        .footer {
            padding-top: 18px;
            border-top: 1px solid #e5e5e5;
        }

        /* Personalizza il contenitore */
        @media (min-width: 768px) {
            .contenitore {
                max-width: 730px;
            }
        }
    </style>
      <!-- HTML5 shim e Respond.js per il supporto a IE8 degli elementi HTML5 e delle media query -->
      <!-- AVVERTENZA: Respond.js non funziona se visualizza la pagina tramite file:// -->
      <!--[if lt IE 9]>[se lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   <body>
      <div class="contenitore">
        <div class="intestazione">
           <img src="http://via.placeholder.com/300x75"</head> />
            <h1>Preferenze e-mail</h1>
         </div>
         <form action="" id="preferences_form" method="POST" role="form" class="form-horizontal">
            {% if form.non_field_errors %}
            <div class="alert alert-danger">
               {% for error in form.non_field_errors %}
               {{ error }}{% if not forloop.last %}<br />{% endif %}
               {% endfor %}
            </div>
            {% endif %}
            <input type="hidden" name="$fields" value="EmailInteressi, EmailFrequency" />
           <input type="hidden" name="$list_fields" value="EmailInterests" />
            <!-- <tipo di input="nascosto" nome="$unsubscribed_url" valore="/p/preferenze_aggiornate" /> -->
            <!-- <input type="hidden" name="$updated_profile_url" value="/p/preferences_updated" /> -->
            <!--<p class="campi obbligatori">
               <span>span>*</span> Informazioni richieste
               </p>-->
            <div class="form-group{% if form.errors|lookup:'$email' %} has-error{% endif %}">
              <label for="email" class="col-sm-3 control-label"> Indirizzo e-mail<span class="required"> *</span></label>
               <div class="col-sm-9">
                 <input type="email" class="form-control" id="email" name="$ email" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$email' }}{% else %}{{ person.email|default:'' }}{% endif %}" />
                  {% if form.errors|lookup:'$email' %}
                  <p class="help-block">{% for error in form.errors|lookup:'$email' %}{{ error }}{% endfor %}</p>
                  {% endif %}
               </div>
            </div>
            <div class="form-group">
              <label for="first_name" class="col-sm-3 control-label"> First Name</label>
               <div class="col-sm-9">
                 <input type="text class="form-control" id="first_name" name="$first_name" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$first_name' }}{% else %}{{ person.first_name|default:'' }}{% endif %}" />
               </div>
            </div>
            <div class="form-group">
              <label for="last_name" class="col-sm-3 control-label"> Last Name</label>
               <div class="col-sm-9">
                 <input type="text" class="form-control" id=last_name" name="$last_name" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$last_name' }}{% else %}{{ person.last_name|default:'' }}{% endif %}" />
               </div>
            </div>
            <div class="form-group">
              <label for="interests" class="col-sm-3 control-label"> Interests</label>
               <div class="col-sm-9">
                 <div class="checkbox">
                     <label>
                     <input type=checkbox" name="EmailInteresses" value="New Releases" {% if 'New Releases' in person.EmailInterests or 'New Releases' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
                     Nuovi lanci di prodotti
                     </label>
                  </div>
                  <div class="checkbox">
                     <label>
                     <input type="checkbox" name="EmailInteressi" value="Promozioni" {% if 'Promotions' in person.EmailInterests or 'Promotions' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
                     Promozioni & Vendite
                    </label
 
                 <div class="checkbox">
                    
                    <input type="checkbox" name="EmailInteressi" value="Blog" {% if 'Blog' in person.EmailInterests or 'Blog' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
                     Ultime dal Blog
                     </label>
                  </div>
                  <div class="checkbox">
                     <label>
                     <input type="checkbox" name="EmailInteressi
                     </label>
                  valore="Eventi" {% if 'Events' in person.EmailInterests or 'Events' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
                     Eventi
                  </div>
                  <label>
                     </label>
                  </div>
               </div>
            </div>
            <div class="form-group">
              <label for="interests" class="col-sm-3 control-label"> Con quale frequenza desidera avere nostre notizie?</label>
               <div class="col-sm-9">
                 <div class="radio">
                     <label>
                        <!-- Valore predefinito. -->
                        <input type="radio" name="EmailFrequency" id="email_frequency_0" value="All" {% if person.EmailFrequency == 'All' or request.POST.EmailFrequency == 'All' %}checked="checked"{% elif not person.EmailFrequency and not request.POST.EmailFrequency %}checked="checked"{% endif %} />
                        Due volte alla settimana
                     </label>
                  </div>
                  <div class="radio">
                     <label>
                     <input type="radio" name="EmailFrequency" id="email_frequency_1" value="Weekly
                     </label>
                  {% if person.EmailFrequency == 'Weekly' or request.POST.EmailFrequency == 'Weekly' %}checked="checked"{% endif %} />
                     Una volta alla settimana
                  </div>
                  <div class="radio">
                     <label>
                     <input type="radio" name="EmailFrequency" id="email_frequency_2" value="Monthly" {% if person.EmailFrequency == 'Monthly' or request.POST.EmailFrequency == 'Monthly' %}checked="checked"{% endif %} />
                     Una volta al mese
                     </label>
                  </div>
               </div>
            </div>
            /div>
           <div class="checkbox">
               <label>
               <input type="checkbox" name="$unsubscribe" value="true" />
              <span class="text"> Cancellami da tutte le e-mail.</span>
               </label>
            </div>
            <div class="clearfix form-actions">
              <div class="pull-right">
                 <button type="submit" class="btn btn-default btn-primary"> Aggiorna le preferenze</button>
               </div>
            </div>
         </form>
         <footer class="footer">
            <p>
               © 2017 Nome della società - <a href=https://www.klaviyo.com" target="_blank"> Informativa sulla privacy</a>
            </p>
         </footer>
      </div>
      <!-- /container -->
      <!-- jQuery (necessario per i plugin JavaScript di Bootstrap) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <!-- Ultimo JavaScript compilato e minificato -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
      <script>
        $(funzione() {
            $('#preferenze_form').validate({
                regole: {
                    $email: {
                        required: true
                    }
                },
                messaggi: {
                    $email: 'Please enter your email address.',
                    $first_name: 'Please enter your first name.',
                    $last_name: 'Please enter your last name.'
                }
            });
            // Alterna la convalida in base alla selezione.
            $('input[name="$unsubscribe"]').on('change', funzione() {
                $('form .form-actions button[type="submit"]').toggleClass('cancel', $(this).is(':checked'));
            });
        });
        $('input[name="$unsubscribe"]').on('change', function(){
          $('input[type=checkbox]').not(this).prop('checked', false);
        });
        $('input[type=checkbox]').not('input[name="$unsubscribe"]').on('change', funzione(){
          $('input[name="$unsubscribe"]').prop('checked', false);
        });
    </script>
   </body>
</html>

Impostare il reindirizzamento di una pagina ospitata dopo l'invio (facoltativo).

Per impostazione predefinita, dopo che una pagina ospitata (ad esempio, la pagina delle preferenze ospitata) è stata inviata con successo, l'utente sarà reindirizzato in uno dei due luoghi:

Se hanno richiesto di annullare l'iscrizione, saranno inviati alla pagina di conferma dell'annullamento dell'iscrizione predefinita del suo account.
Se ha aggiornato il suo profilo (o ha fatto qualcosa che non sia una richiesta di cancellazione), l'utente sarà inviato alla pagina di conferma delle preferenze predefinite del suo account (successo).

Se ha utilizzato l'HTML di esempio qui sopra, questo si riflette nel corpo di <body> <> come:

<!-- <tipo di input="nascosto" name="$unsubscribed_url" value="/p/preferenze_aggiornate" /> --><!-- <tipo di input="nascosto" name="$updated_profile_url" value="/p/preferenze_aggiornate" /> -->

Per personalizzare il reindirizzamento dopo l'invio della sua pagina ospitata, regoli le linee value="..." con l'URL preferito all'interno dell'HTML.

Aggiungere asset personalizzati alle pagine ospitate (opzionale)

Se desidera utilizzare i suoi file CSS, JS o le sue immagini nella pagina ospitata, li carichi cliccando sul simbolo + accanto ad Assets e faccia riferimento ad essi nel codice sorgente della pagina.

Utilizzi il seguente tag per fare riferimento ad una risorsa che ha caricato sul suo account Klaviyo: {% asset_url 'style.css' %}

Utilizzo delle pagine di consenso personalizzate

Può sostituire le pagine di consenso predefinite del suo account con pagine personalizzate, in modo che tutte le e-mail utilizzino queste pagine personalizzate per impostazione predefinita. In alternativa, può configurare un solo elenco particolare per utilizzare le pagine personalizzate, in modo che solo le e-mail inviate a quell'elenco utilizzino le pagine personalizzate.

Se ha personalizzato le pagine di consenso per una lista specifica, qualsiasi e-mail inviata a quella lista utilizzerà quelle pagine di consenso uniche.
Le liste per le quali non ha personalizzato pagine di consenso uniche utilizzeranno le pagine di consenso predefinite del suo account. Inoltre, tutte le e-mail che NON vengono inviate a una lista specifica, comprese le e-mail di flusso con attivazione metrica, le campagne inviate a un segmento o le e-mail personali, utilizzeranno anche le pagine di consenso predefinite.

Cambia le pagine di consenso predefinite in pagine ospitate

Se desidera sostituire 1 o più pagine di consenso predefinite del suo account (ad esempio, la pagina delle preferenze, la pagina di iscrizione o la pagina di annullamento dell'iscrizione via e-mail) con pagine personalizzate, segua questi passaggi:

Clicchi sul nome della sua azienda nell'angolo inferiore sinistro di Klaviyo.
Selezionare Impostazioni.

Selezioni Altro dalla parte superiore.
Clicca sul menu a tendina con i 3 puntini della pagina di consenso che vuoi sostituire e seleziona Usa pagina ospitata.

Nella finestra di dialogo che appare, seleziona il tuo file di pagina personalizzato e clicca su Salva.

Se desidera utilizzare una pagina personalizzata per le e-mail di flusso o le campagne inviate a un segmento, dovrà cambiare le pagine di consenso predefinite del suo account per utilizzare le pagine personalizzate. Segua lo stesso processo descritto sopra per sostituire le pagine di consenso predefinite con pagine personalizzate.

Utilizzi pagine di consenso personalizzate per una lista

Dovrà configurare ogni singolo elenco per il quale desidera utilizzare una pagina personalizzata invece delle pagine di consenso predefinite.

Si colleghi all'elenco che desidera collegare ad una pagina personalizzata.
Clicchi sulla scheda Abbonati & per vedere tutte le pagine di consenso modificabili per quella lista.
Sotto la pagina di consenso che vuoi sostituire con una pagina personalizzata, clicca sul menu a tendina con i 3 puntini e seleziona Usa pagina ospitata.

Si noti che, se lo desidera, può scegliere di utilizzare una pagina ospitata per tutte le pagine di consenso.

Nella finestra di dialogo che appare, seleziona il tuo file di pagina personalizzato e clicca su Salva.

Nelle sue e-mail, deve continuare ad utilizzare i tag standard di Klaviyo per l'annullamento dell'iscrizione e la gestione delle preferenze (ad esempio, {% unsubscribe %} e {% manage_preferences %}). Questi tag saranno visualizzati come link nelle sue e-mail live e porteranno automaticamente i destinatari alle sue pagine personalizzate.

Pagine ospitate FAQ

Devo aggiungere qualche JavaScript alla mia pagina affinché questo modulo venga inviato correttamente?
Poiché i suoi moduli personalizzati saranno contenuti all'interno di una pagina ospitata, non dovrà aggiungere alcun JavaScript extra o un URL di azione al modulo <form> <> per far sì che venga inviato correttamente. Se una pagina ospitata viene visitata da un'e-mail inviata tramite Klaviyo, verrà automaticamente collegata al contatto corretto.

Questa pagina deve essere in HTML?
Questa pagina deve essere in HTML. Può includere immagini aggiuntive, fogli di stile, eccetera, sia collegandosi ad essi che aggiungendo una cartella di file inclusi.

Klaviyo può aiutarmi a creare una pagina personalizzata?
Attualmente Klaviyo non offre servizi di assistenza per la creazione di codice personalizzato, né fornisce assistenza per la risoluzione di problemi legati al codice personalizzato. La funzione Pagine ospitate ha lo scopo di fornire una lavagna vuota agli sviluppatori o ai marketer esperti di codice.

Per saperne di più sulle possibilità di personalizzazione delle pagine di consenso integrate in Klaviyo, consulti "Iniziare con le pagine di consenso".

Risorse aggiuntive

Come personalizzare la pagina di annullamento dell'iscrizione a una lista
Scopri come personalizzare una pagina di annullamento dell'iscrizione per uno specifico Klaviyo elenco, ovvero la pagina in cui l'iscritto può annullare l'iscrizione per ricevere il tuo marketing.
Moduli di iscrizione e pagine di iscrizione di riferimento
Scopra come utilizzare gli strumenti di crescita delle liste di Klaviyo, tra cui vari tipi di moduli di iscrizione e pagine di sottoscrizione, o un'integrazione di terze parti per raccogliere e coinvolgere i nuovi iscritti.
Capire le pagine ospitate personalizzate in Klaviyo
Impari a conoscere le pagine ospitate personalizzate in Klaviyo, comprese quelle che sono e che cosa possono fare.

Questo articolo è stato utile?

Usa questo modulo solo per il feedback sull'articolo. Scopri come contattare l'assistenza.

Esplora altri contenuti di Klaviyo

Community

Entra in contatto con altre aziende simili, partner ed esperti di Klaviyo per trovare ispirazione, condividere approfondimenti e ottenere risposte a tutte le tue domande.

Visita la Community

Partner

Assumi un esperto certificato Klaviyo per aiutarti con un compito specifico o per la gestione continua del marketing.

Assumi un partner

Assistenza

Accedi all'assistenza tramite il tuo account.

Assistenza via e-mail (prova gratuita e account a pagamento) Disponibile 24 ore su 24, 7 giorni su 7

Chat/assistente virtuale
La disponibilità può variare in base alla località e al tipo di piano

Accedi