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 è per gli sviluppatori; attualmente Klaviyo non offre servizi per aiutare a creare codice personalizzato, né 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.
- In Pagine ospitate personalizzate, faccia clic su Abilita pagine personalizzate.
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); potrà utilizzarlo per qualsiasi pagina di consenso, ma può creare più 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 funzionalità 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
- Scelta della frequenza delle e-mail:
Esempio di codice HTML per una pagina di consenso
Può 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:
<!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;
}
/* Piè 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 società - <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) è stata inviata con successo, l'utente sarà 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 sarà 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)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
Può 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, può 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 utilizzerà 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 più 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.
- Clicchi sul menu a tendina della pagina di consenso che intende sostituire e selezioni Usa pagina ospitata.
- Nella finestra di dialogo che appare, selezioni il suo file di pagina personalizzato e clicchi su Salva impostazioni.
Se desidera utilizzare una pagina personalizzata per le e-mail di flusso o le campagne inviate a un segmento, dovrà 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
Dovrà 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 desidera sostituire con una pagina personalizzata, faccia clic sulla freccia a discesa e selezioni Usa pagina ospitata.
Si noti che, se lo desidera, può scegliere di utilizzare una pagina ospitata per tutte le pagine di consenso.
- Nella finestra di dialogo che appare, selezioni il suo file di pagina personalizzato e clicchi su Salva impostazioni.
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 affinché questo modulo venga inviato correttamente?
Poiché i suoi moduli personalizzati saranno contenuti all'interno di una pagina ospitata, non dovrà aggiungere alcun JavaScript extra o un URL di azione al modulo <form> <> per far sì che venga inviato correttamente. Se una pagina ospitata viene visitata da un'e-mail inviata tramite Klaviyo, verrà automaticamente collegata al contatto corretto.
Questa pagina deve essere in HTML?
Questa pagina deve essere in HTML. Può includere immagini aggiuntive, fogli di stile, eccetera, sia collegandosi ad essi che aggiungendo una cartella di file inclusi.
Klaviyo può aiutarmi a creare una pagina personalizzata?
Attualmente Klaviyo non offre servizi di assistenza per la creazione di codice personalizzato, né 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 più sulle possibilità di personalizzazione delle pagine di consenso integrate in Klaviyo, consulti "Iniziare con le pagine di consenso".