Så här anpassar du samtyckessidor
Du kommer att lära dig
Lär dig hur du aktiverar och använder Klaviyo's funktioner för hostade sidor, som låter dig skräddarsy dina egna preferenssidor, prenumerera-sidor och avsluta prenumerationssidor.
Den här artikeln är för utvecklare; Klaviyo erbjuder för närvarande inte tjänster för att hjälpa till att bygga ut anpassad kod, och vi ger inte heller support för felsökning av anpassad kod. För att lära dig mer om våra inbyggda samtyckessidor för appar, gå till vår artikel om Komma igång med samtyckessidor.
Innan du börjar
Aktivera den här funktionen innan du konfigurerar en värdbaserad sida:
- Navigera till Inställningar > Övrigt.
- Välj Consent pages i rullgardinsmenyn.
- Under Custom hosted pages, slå på knappen till Use custom dedicated domain for hosted pages.
Observera att endast Konto med betalt abonnemang som har passerat Konto verifiering har tillgång till denna inställning.
Skapa en anpassad samtyckessida
- Huvud till inställningar > Övrigt.
- Klicka på Hosted pages.
- Klicka på symbolen + bredvid Sidor för att lägga till en ny sida.
- Namnge den här sidan (t.ex. avsluta prenumeration.tmpl); du kommer att kunna använda detta för någon av dina samtyckessidor, men du kan skapa mer än 1 sida om du vill.
Namnen på värdsidorna får inte innehålla mellanslag eftersom det leder till ett fel. Undvik mellanslag eller använd understrykningstecken för att dela upp titlar.
- Skapa en HTML-sida som innehåller de fält och funktioner som du väljer. Exempel på fält som kan läggas in för en anpassad samtyckessida är
- Val av frekvens för e-post:
- Ett alternativ till avsluta prenumeration
- Möjlighet att ta emot all e-post
- Frekvensalternativ för dagliga, veckovisa, månatliga etc. nyhetsbrev
- Information som kan användas för att rikta in sig på och segment:
- En kryssruta för om användaren vill ha försäljningsmeddelanden eller inte
- En kryssruta för om användaren vill ha produktmeddelanden eller inte
- En kryssruta för om användaren vill ha blogguppdatering eller inte
- Andra listor som användaren kanske vill gå med i
- Val av frekvens för e-post:
Exempel på HTML-kod för en samtyckessida
Du kan använda denna kod i din avsluta prenumeration.tmpl för att få en fullt fungerande samtyckessida med inställningar för e-posttyp och frekvens:
<! 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">
<!-- Senaste kompilerade och minifierade CSS -->
< link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<style type="text/css">
/* Sprid ut innehållet lite */
body {
padding-top: 20px;
padding-bottom: 20px;
}
form {
margin-bottom: 18px;
}
/* Anpassad sidrubrik */
.header {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
}
.rubrik h1 {
margin: 10px 0;
}
.required-fields {
text-align: right;
}
.obligatoriska fält span {
color: #a94442;
font-weight: bold;
}
lista-group-item etikett {
font-weight: normal;
margin-top: 17px;
}
lista-grupp-artikel 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-kontroll+.form-kontroll {
margin-top: 6px;
}
.panel-grupp .panel-titel .sluten ikon,
.panel-grupp .panel-titel .öppen-ikon {
margin-right: 0.5em;
top: 2px;
}
.panel-grupp .panel-titel a:hover,
.panel-group .panel-titel a:Aktiv {
text-decoration: none;
}
.panel-group .panel-titel a:hover .text,
.panel-grupp .panel-titel a:Aktiv .text {
text-decoration: underline;
}
.panel-grupp .panel-titel .stängd ikon {
display: none;
}
.panel-group.closed .panel-title .öppen-ikon {
display: none;
}
.panel-group.closed .panel-title .stängd ikon {
display: inline;
}
/* Sidfot för anpassad sida */ .footer {
padding-top: 18px;
border-top: 1px solid #e5e5e5;
}
/* Anpassa container */ @media (min-width: 768px) { .container </style>
<!-- -->
<!-- -->
<!--[if lt IE 9]>
{
max-width: 730px;
}
}
/style !-- HTML5 shim och Respond.js för IE8-stöd för HTML5-element och media queries -- !-- VARNING: Respond.js fungerar inte om du visar sidan via file:// -- !--[if lt IE 9] script src= https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js /script
<>
<>
<>
<>
<""><></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
< div class="container">
< div class="header">
< img src="http://via.placeholder.com/300x75" />
<h1>e-post Preferences</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>
/div>
{% endif %}
< input type="hidden" name="$fields" value="EmailInterests,EmailFrequency" />
< input type="hidden" name="$list_fields" value="EmailInterests" />
<!-- <input type="hidden" name="$unsubscribed_url" value="/p/preferences_updated" /> -->
<!-- <input type="hidden" name=$updated_profile_url" value="/p/preferences_updated" /> -->
<!--<p class="required-fields">
<span>*</span> Required Information
</p>-->
< div class="form-group{% if form.errors|lookup:'$email' %} has-error{% endif %}" >
< label for="email" class="col-sm-3 control-label"> e-post Adress<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' %}
{% for error in form.errors|lookup:'$email' %}{{ error }}{% endfor %}xml-ph-0031@d>
{% endif %}
</p>
</div>
</div>
< div class="form-group">
< label for="first_name" class="col-sm-3 control-label"> Förnamn</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"> Efternamn</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"> Intressen</label>
< div class="col-sm-9">
< div class="checkbox>
<label>
< input type="checkbox" name="EmailInterests" value="New Releases" {% if 'New Releases' in person.EmailInterests or 'New Releases' in request.POST.EmailInterests %}checked="checked" checked{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Nya produktlanseringar
</label>
</div>
< div class="checkbox">
<label>
< input type=" checkbox" name="EmailInterests" value="Promotions" {% if 'Promotions' in person.EmailInterests or 'Promotions' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Promotions & Sales
</label>
</div>
<div class="checkbox">
<label>
< input type="checkbox" name="EmailInterests" value="Blog" {% if 'Blog' in person.EmailInterests or 'Blog' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Senaste nytt från bloggen
</label>
</div>
< div class="checkbox">
<label>
<input type="checkbox" name="EmailInterests" value="Evenemang" {% if 'Events' in person.EmailInterests or 'Events' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Evenemang
</label>
</div>
</div>
/div>
</div>
< div class="form-group">
< label for="interests" class="col-sm-3 control-label"> Hur ofta vill du att vi ska höra av oss?</label>
< div class="col-sm-9">
< div class="radio">
<label>
<!-- Standardvärde. -->
<input type="radio" name="EmailFrequency" id="email_frequency_0" value="Alla" {% if person.EmailFrequency == 'All' or request.POST.EmailFrequency == 'All' %}checked="checked"{% elif not person.EmailFrequency and not request.POST.EmailFrequency %}checked="checked"{% endif %} />
Två gånger per vecka
</label>
</div>
< div class="radio">
<label>
< input type="radio" name=EmailFrequency" id="email_frequency_1" value="Weekly" {% if person.EmailFrequency == 'Weekly' or request.POST.EmailFrequency == 'Weekly' %}checked="checked"{% endif %} />
En gång per vecka
</label>
</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 %} />
Once per Month
</label>
</div>
</div>
</div>
< div class="checkbox">
<label>
< input type="checkbox" name="$unsubscribe" value="true" />
< span class="text"> avsluta prenumeration mig från all e-post.</span>
</label>
</div>
< div class="clearfix form-actions">
< div class="pull-right">
< button type="submit" class="btn btn-default btn-primary"> uppdatera Preferences</button>
</div>
</div>
</form>
< footer class="footer">
<p>
p>
© 2017 företag Namn - <a href="https://www.klaviyo.com" target="_blank"> sekretesspolicy</a>
</p>
</footer>
</div>
<!-- /container -->
<!-- jQuery (nödvändigt för Bootstraps JavaScript-plugins) -->
< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Senaste kompilerade och minifierade JavaScript -->
< 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>
$(function() {
$('#preferences_form').validate({
rules: {
$email: {
required: true
}
},
messages: {
$email: 'Please enter your email address.',
$first_name: 'Please enter your first name.',
$last_name: 'Please enter your last name.'
}
});
// Växla validering baserat på urval.
$('input[name="$unsubscribe"]').on('change', function() {
$('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', function(){
$('input[name="$unsubscribe"]').prop('checked', false);
});
</script>
</body>
</html>Ange en värdsidas omdirigering efter inlämning (valfritt)
Som standard kommer användaren att omdirigeras till 1 av 2 platser efter att en hostad sida (t.ex. en hostad preferenssida) har skickats in framgångsrikt:
- Om de har begärt att avsluta prenumerationen kommer de att skickas till ditt Kontos standardbekräftelsesida för avsluta prenumerationen.
- Om de har uppdaterat sin profil (eller gjort något som inte är en avslutande prenumerationsbegäran) skickas användaren till ditt Kontos sida för bekräftelse av standardinställningar (framgång).
Om du använde HTML-exemplet ovan återspeglas detta i <body> as:
<!-- <input type="hidden"
name="$unsubscribed_url" value="/p/preferences_updated" /> -->
<!-- <input type="hidden"
name="$updated_profile_url" value="/p/preferences_updated" /> -->För att anpassa vart någon omdirigeras efter att ha skickat in din hostade sida, justera värde="..." raderna till din önskade URL (er) i HTML.
Lägg till anpassade tillgångar på hostade sidor (valfritt)Lägg till anpassade tillgångar på hostade sidor (valfritt)
Om du vill använda din egen CSS-fil, JS-fil eller bilder på din hostade sida laddar du upp dem genom att klicka på +-symbolen bredvid Assets och hänvisar till dem i sidans källkod.
Använd följande etikett för att referera till en tillgång som du har laddat upp till din Klaviyo Konto: {% asset_url 'style.css' %}
Använda de anpassade samtyckessidorna
Du kan ersätta var och en av ditt Kontos standardmedgivandesidor med specialkodade sidor så att alla e-postmeddelanden använder dessa specialanpassade sidor som standard. Alternativt kan du konfigurera att endast 1 viss lista ska använda specialkodade sidor, så att endast e-post som skickas till den listan använder de specialkodade sidorna.
- Om du har anpassade samtyckessidor för en specifik lista kommer e-post som skickas till den listan att använda dessa unika samtyckessidor.
- Alla listor som du inte har anpassat unika samtyckessidor för kommer att använda ditt Kontos standardiserade samtyckessidor. Dessutom kommer alla e-postmeddelanden som INTE skickas till en specifik lista, inklusive mättal-triggered flöde e-postkampanjer som skickas till en segment, eller personliga e-postmeddelanden, också att använda dina standardmedgivandesidor.
Ändra standardsidor för samtycke till hostade sidor
Om du vill ersätta en eller flera av Kontos standardmedgivandesidor (t.ex. preferenssida, prenumereringsida eller e-post avsluta prenumerationssida) med specialkodade sidor följer du dessa steg:
- Klicka på ditt företagsnamn i det nedre vänstra hörnet på Klaviyo.
- Välj Inställningar.
- Välj Other från toppen.
- Klicka på rullgardinsmenyn med 3 prickar på den samtyckessida som du vill ersätta och välj Använd hostad sida.
- I dialogfönstret som visas väljer du den anpassade sidfilen och klickar på Spara.
Om du vill använda en anpassad sida för flöde e-post eller kampanjer som skickas till en segment måste du ändra ditt Kontos standardmedgivandesidor till att använda dina anpassade sidor. Följ samma process som ovan för att ersätta dina standardmedgivandesidor med specialkodade sidor.
Använda anpassade samtyckessidor för en lista
Du måste konfigurera varje enskild lista som du vill använda en anpassad sida för i stället för standardmedgivandesidorna.
- Navigera till den lista som du vill koppla till en anpassad sida.
- Klicka på fliken prenumerera & Preference Pages för att se alla redigerbara samtyckessidor för den listan.
- Under den samtyckessida som du vill ersätta med en anpassad sida klickar du på rullgardinsmenyn med tre punkter och väljer Use Hosted Page.
Observera att du kan välja att använda en hostad sida för alla samtyckessidor om du vill.
- I dialogfönstret som visas väljer du den anpassade sidfilen och klickar på Spara.
I din e-post bör du fortfarande använda standard Klaviyo avsluta prenumeration och hantera preferenser etikett (dvs . {% unsubscribe %} och {% manage_preferences %}). Dessa etikett kommer att fyllas i som länkar i din live-e-post och kommer automatiskt att föra mottagare till dina anpassade sidor.
Vanliga frågor om hostade sidor
Måste jag lägga till något JavaScript på min sida för att formuläret ska skickas in korrekt?
Eftersom dina anpassade formulär kommer att finnas på en värdbaserad sida behöver du inte lägga till något extra JavaScript eller en åtgärdsadress till <formuläret><form> för att få det att skickas korrekt. Så länge en hostad sida besöks från ett e-postmeddelande som skickats via Klaviyo kommer den automatiskt att knyta tillbaka till rätt kontakt.
Måste den här sidan vara i HTML?
Den här sidan måste vara i HTML. Du kan inkludera ytterligare bilder, formatmallar etc., antingen genom att länka till dem eller genom att lägga till en mapp med inkluderade filer.
Kan Klaviyo hjälpa mig att bygga en anpassad sida?
Klaviyo erbjuder för närvarande inte tjänster för att hjälpa till att bygga ut anpassad kod, och vi tillhandahåller inte heller support för felsökning av anpassad kod. Hosted Pages-funktionerna är avsedda att ge ett tomt skiffer för utvecklare eller kodkunniga marknadsförare.
Läs mer om anpassningsmöjligheterna med Klaviyo:s inbyggda samtyckessidor i Komma igång med samtyckessidor.