Doelgroep: E-mailtemplate bouwers
In Ternair Marketing Cloud kunnen verschillende edit-functies worden gedefinieerd in de HTML-code. Deze functies begeleiden de gebruiker in hoe e-mail content kan worden bewerkt in een ‘E-mail’ output block.
Gebruik de CTRL+F toetsen om de HTML code te doorzoeken.
Tekst
Voeg de volgende CSS-klasse aan de HTML-tags toe:
ternair-text
Alleen de tekst kan worden aangepast, niet de styling.
| Voorbeeld |
<div class="ternair-text"> Deze tekst kan worden bewerkt. </div> |
ternair-html
De tekst en de styling kunnen worden aangepast.
| Voorbeeld |
<div class="ternair-html"> Deze tekst kan worden bewerkt. </div> |
Beide klassen kunnen alleen worden toegepast op tekstelementen, bijvoorbeeld div, p, span of small.
Het kan niet worden toegepast op een table of td.
Layout
Bij het kopiëren en plakken van een tekst worden alle standaardinstellingen voor de lay-out overgenomen. Bijvoorbeeld lettertype, lettergrootte, kleur etc.
Via het context menu kan tekst geplakt worden als plain text (= zonder opmaak).
Hyperlinks
ternair-hyperlink
De url kan door de gebruiker worden aangepast.
De <a> tag kan worden geplaatst rond een woord, tekst of bericht.
| Voorbeeld |
<a href="url" class="ternair-hyperlink">Meer informatie</a> |
Let op: een <a> tag direct rondom een afbeelding wordt automatisch een ternair hyperlink. De klasse “ternair-hyperlink” wordt dan uit de html verwijderd.
ternair-hyperlink-group
Met dit element kun je alle links in één actie veranderen.
| Voorbeeld |
<table class="ternair-hyperlink-group"><a class="ternair-hyperlink" href="#"> |
Afbeeldingen
Voeg deze CSS-klasse aan IMG tags toe:
ternair-img
Afbeeldingen kunnen worden vervangen, afbeeldingsinstellingen blijven hetzelfde.
ternair-img-expert
Afbeeldingen en afbeeldingsinstellingen kunnen beiden worden aangepast. Deze instellingen zijn: grootte, crop, positie, hyperlink achter de afbeelding, alt-tekst en lay-out.
— Beperkingen kunnen worden toegepast op afbeeldingen middels de volgende attributen:
data-ternair-width
Schaal de afbeelding automatisch op tot deze breedte.
data-ternair-height
Schaal de afbeelding automatisch op tot deze hoogte.
data-ternair-height-min / data-ternair-height-max and data-ternair-width-min / data-ternair-width-max
Als data-ternair-width en data-ternair-height niet zijn ingesteld wordt het formaat binnen deze waarden aangepast.
Gebruik voor een minimum hoogte van 100px en een maximum hoogte van 300px:
data-ternair-height-min=”100″ data-ternair-height-max=”300″.
| Voorbeeld |
<img src="https://services.crmservice.eu/images/template/images/header600_200.jpg" alt="" class="ternair-img" data-ternair-width="600" data-ternair-height-max="300" data-ternair- height-min="100" data-ternair-data-ternair-alignment="top,left" data-ternair-color="ffffff" border="0" style="display:block;" /> |
data-ternair-alignment
Bepaal de positie voor de nieuwe afbeelding als de afbeelding wordt vervangen.
Alignment (uitlijning) bevat twee waardes: verticale uitlijning en horizontale uitlijning.
Beschikbare opties voor verticale uitlijning: boven, midden, onder
Beschikbare opties voor horizontale uitlijning: links, rechts, midden
data-ternair-color
Als een afbeelding als gevolg van bijschaling witruimte bevat wordt deze ruimte standaard transparant gemaakt. Als je dit attribuut gebruikt wordt deze ruimte met kleur gevuld.
| Voorbeeld |
<img class="ternair-img" width="300" height="300" data-ternair-width="300" data-ternair-height="300" data-ternair-alignment="top,center" data-ternair-color="FF0000" data-ternair- color="FF0000" /> |
of
| Voorbeeld |
<img class="ternair-img-advanced" width="300" height="300" /> |
Video
Voeg deze CSS-klasse aan VIDEO tags toe:
ternair-video
Videos kunnen worden vervangen, video-instellingen blijven hetzelfde
ternair-video-link
Plaats deze class op een fallback anchor.
ternair-video-image
Plaats deze class op de poster image tag.
| Voorbeeld |
<video class="ternair-video" poster="http://www.example.com/previewImage.jpeg" width="640" height="480" controls="controls"src="http://www.example.com/intro.webm" type="video/webm"><a class="ternair-video-link" href="http://www.example.com/intro.webm">src="http://www.example.com/previewImage.jpeg" width="640" height="480"></video> |
Stijl
Met ternair-style kun je een menu styling instellen.
ternair-allow-border-styling
1 of 0. Dit bepaalt of de rand-stijl optie wel of niet wordt gebruikt, configureerbaar met ternair-style.
ternair-allow-background-styling
1 of 0. Dit bepaalt of de schtergrond-stijl optie wel of niet wordt gebruikt, configureerbaar met ternair-style.
Omschrijving
Met data-ternair-description kun je gebruiksvriendelijke beschrijvingen op ternair elementen maken.
| Voorbeeld |
<p class="ternair-html" data-ternair-description="Welcome Header">Welkom welkom welkom</p> |
Afbeeldingen voor mobiele apparaten optimaliseren
Op een mobiel apparaat worden afbeeldingen in een ander formaat getoond dan op een desktop, bijvoorbeeld over de hele breedte van het apparaat. Gebruik de volgende twee instellingen in een e-mail template om aan te geven met welke afmetingen een afbeelding moet worden geoptimaliseerd op een mobiel apparaat.
data-ternair-crop-width
De breedte waarvoor een afbeelding wordt geoptimaliseerd op een mobiel apparaat.
data-ternair-crop-height
De hoogte waarvoor een afbeelding geoptimaliseerd wordt op een mobiel apparaat.
| Voorbeeld |
<img class="ternair-img" data-ternair-width="100" data-ternair-height="50" data-ternair-crop-width="300" data-ternair-crop-height="150" /> |
Op basis van bovenstaand voorbeeld is de afbeelding geoptimaliseerd voor weergave op een desktop met de afmetingen 100 pixels bij 50 pixels. Voor weergave op een mobiel apparaat is de afbeelding geoptimaliseerd voor de afmetingen 300 pixels bij 150 pixels.
Blokken
Voeg deze CSS-klasse aan HTML-tags toe om aan te geven dat het blokken zijn:
ternair-block
— Attributen kunnen worden gebruikt om aan te geven of blokken kunnen worden gekopieerd of verwijderd:
data-ternair-copy
Dit blok kan worden gekopieerd. Standaardinstelling: Aan.
data-ternair-delete
Dit blok kan worden verwijderd. Standaardinstelling: Aan.
| Voorbeeld |
<div class="ternair-block" data-ternair-copy="1" data-ternair-delete="0">....</div> |
Let op: nesting op ternair-blocks is iet toegestaan
User content
Met data-ternair-user-content kun je het aanmaken van een user content snippet vanuit ternair blokken uitschakelen.
| Voorbeeld |
<div class="ternair-block" data-ternair-user-content="0">Dit blok kan niet worden geconverteerd naar een User Content snippet</div> |
RSS
Voeg deze tag in de <HEAD> toe om een RSS URL aan te geven:
<meta name="rss1" content="https://www.cnn.com/feeds/rss/world.rss"> |
Gebruik de naam van de <META> tag in het data-ternair-rss attribuut in combinatie met de ternair-rss klasse.
Voeg deze CSS-klasse aan HTML-tags toe om aan te geven dat het een RSS feed is:
ternair-rss
— Gebruik genestelde classes om aan te geven waar delen van het RSS bericht moeten worden getoond:
ternair-rss-title
Titel van een bericht.
ternair-rss-description
Beschrijving van een bericht.
ternair-rss-readmore
Plaats deze klasse op het <A> element met de lees meer-link.
| Voorbeeld |
<head><meta name="rss1" content="https://www.cnn.com/feeds/rss/world.rss"><title>...</title></head> <body><table><tr class="ternair-rss" data-ternair-rss="rss1"><td><a href="#" class="ternair-rss-readmore ternair-rss-title" target="_blank"></a><p class="ternair-rss-description"></p></td></tr></table><body> |
Definiëren van RSS Direct Dynamische Content
Voeg deze tag in de <HEAD> toe om een RSS Direct Dynamic Content aan te geven:
|
Toepassen van RSS Direct Dynamische Content
Met data-ternair-rss-variable kun je filters op waarden in je RSS gebruiken om mailings nog gerichter te vullen.
Voeg deze tag in de <HEAD> toe om een RSS Direct Dynamic Content aan te geven:
|
Geavanceerde opties RSS (optioneel)
data-ternair-default-latest
Haal standaard het laatste x aantal RSS berichten op.
| Voorbeeld (twee berichten ophalen) |
<tr class="ternair-rss" data-ternair-rss="rss1" data-ternair-default-latest="2"> |
data-ternair-rss-start-at-message-number
Het berichtnummer van het (eerste) bericht dat bij het versturen van de e-mail wordt samengevoegd.
| Voorbeeld (verstuur vier berichten bij samenvoeging) |
<tr class="ternair-rss" data-ternair-rss="rss1" data-ternair-rss-merge-at-execute-enabled="1" |
data-ternair-chars-max
Toont het maximale aantal karakters. Deze klasse kan op alle RSS-elementen geplaatst worden.
data-ternair-chars-cutoff
Informatie die NA het maximale aantal karakters wordt getoond.
Standaard: …
Deze klasse kan op alle RSS-elementen geplaatst worden.
| Voorbeeld |
<p class="ternair-rss-description" data-ternair-chars-max="100" data-ternair-chars-cutoff=">>"></p> |
ternair-rss-custom
Gebruik van niet-standaard RSS-elementen.
data-ternair-rss-path
Naam van het (niet-standaard) RSS-element.
| Voorbeeld |
<p class="ternair-rss-custom" data-ternair-rss-path="category"></p> |
Het is mogelijk om niet de value van de eerste RSS tag op te halen, maar ook om values van andere identieke tags op te halen (in het voorbeeld de tweede value van de tag description).
| Voorbeeld |
<span class="ternair-rss-custom" data-ternair-rss-path="*[local-name()='description'][2]"> |
RSS merge-at-execute
data-ternair-rss-message-count
Het aantal RSS berichten dat wordt samengevoegd bij het versturen van de e-mail.
data-ternair-rss
Welke feed we willen gebruiken.
data-ternair-rss-start-at-message-number
Het berichtnummer van het (eerste) bericht dat bij het versturen van de e-mail wordt samengevoegd.
| Voorbeeld |
<table><tbody><tr class="ternair-rss"><td><strong><a href="" class="ternair-rss-readmore ternair-rss-title" target="_blank"></a></strong><p class="ternair-rss-description"></p></td></tr><tr class="ternair-rss-merge-on-execute ternair-rss-message" data-ternair-rss-message-count="4" data-ternair-rss="rss1"><td><span><i class="fa fa-rss"></i></span><span>rss1 (<span class="count">4</span>)</span></td></tr></tbody></table> |
RSS-items over meerdere RSS-snippets herplaatsen
data-ternair-rss
RSS-items kunnen standaard alleen worden geherpositioneerd binnen een targeted RSS-snippet.
Door RSS-feed definitie toe te voegen aan een RSS-snippet kun je meerdere RSS-snippets identificeren voor hetzelfde soort content waarin je RSS-items kunt verplaatsen.
data-ternair-rss
Geeft aan welke feed moet worden gebruikt. Snippets met dezelfde feeds kunnen worden geherpositioneerd.
| Voorbeeld |
<table><tbody><tr class="ternair-rss" data-ternair-rss="rss1"><td><strong><a href="" class="ternair-rss-readmore ternair-rss-title" target="_blank"></a></strong><p class="ternair-rss-description"></p></td></tr><tr class="ternair-rss-merge-on-execute ternair-rss-message" data-ternair-rss-message-count="4" data-ternair-rss="rss1"><td><span><i class="fa fa-rss"></i></span><span>rss1 (<span class="count">4</span>)</span></td></tr></tbody></table> |
RSS in onderwerpregel
De onderwerpregel van een e-mail kan worden gevuld door data uit een RSS-feed te gebruiken.
Gebruik de volgende code:
%%RSS%%rssname%%rsselement%%
Het %%RSS%% gedeelte van deze code is een vaste waarde. De rssname verwijst naar de naam (tag) van de RSS-feed zoals gedefinieerd in de meta tag in de HTML van een e-mail.
In het volgende voorbeeld is de naam van de RSS-feed rssCNN.
Het rsselement verwijst naar de naam van het item in de RSS-feed dat je als onderwerpregel wil gebruiken (bijvoorbeeld titel of beschrijving).
Dit item wordt opgehaald uit het eerste element (bericht) in de RSS-feed. Wanneer een RSS-feed meerdere berichten (elementen) bevat, wordt het opgegeven item uit het eerste element in de feed gebruikt als onderwerpregel.
De onderwerpregel wordt samengevoegd uit de RSS-feed wanneer het e-mail block wordt uitgevoerd.
Om de titel van het eerste RSS bericht van de feed met de naam rssCNN als onderwerpregel in je e-mail te tonen, gebruik je de volgende code:
%%RSS%%rssCNN%%title%%
RSS dynamische tags
Dynamische RSS-tags bieden ondersteuning voor het gebruik van RSS waarden in attributen van HTML elementen. Deze optie kan bijvoorbeeld worden gebruikt om waarden uit een RSS-feed aan een hyperlink toe te voegen, of om gegevens uit een RSS-feed met data of tekst in je template te combineren.
De volgende attributen kunnen in dynamische tags worden gebruikt.
data-ternair-rss-target
Het doel voor het ternair-rss-custom item.
| Voorbeeld | |
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category"> |
| resultaat | <div data-category="selecting"> |
Het RSS target wordt automatisch voorafgegaan door het XPATH-item. Gebruik de data-ternair-rss-path-prefixx om deze automatische prefixinsg uit te schakelen
data-ternair-rss-path-prefix=”false”
data-ternair-rss-custom-type
Het veldtype van het aangepaste RSS item. Het standaardtype is text. Andere opties zijn urlparam en list.
| Voorbeeld | |
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category" data-ternair-rss-custom-mode="replace"> |
| resultaat | <div data-category="selecting"> |
data-ternair-rss-custom-mode
De gedragsmodus voor het aangepaste RSS item. Dit geeft aan waar de waardes van het aangepaste RSS item worden ingevoegd.
Beschikbare waardes zijn replace, prepend en append.
| Voorbeeld | |
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category" data-ternair-rss-custom-mode="replace" data-ternair-rss-custom-before="before-" data-ternair-rss-custom-after="-after"> |
| resultaat | <div data-category="before-selecting-after"> |
data-ternair-rss-custom-before
De waarde die vóór de waarde uit de RSS feed wordt geplaatst.
| Voorbeeld | |
| bestaand | <div data-category="ExistingValue"></div> |
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category" data-ternair-rss-custom-mode="append" data-ternair-rss-custom-before="-before-" data-ternair-rss-custom-after="-after-"> |
| resultaat | <div data-category="ExistingValue-before-selecting-after-"> |
data-ternair-rss-custom-after
De waarde die ná de waarde uit de RSS feed wordt geplaatst.
| Voorbeeld | |
| bestaand | <div data-category="ExistingValue"></div> |
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category" data-ternair-rss-custom-mode="prepend" data-ternair-rss-custom-after="-na-"> |
| resultaat | <div data-category="selecting-after-ExistingValue"> |
data-ternair-rss-custom-type-url-param
De naam van de parameter bij het gebruik van de data-ternair-rss-custom-type=URLParam.
| Example |
|
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category" data-ternair-rss-custom-type="URLParam" data-ternair-rss-custom-mode="append" data-ternair-rss-custom-urlparam="cat"> |
| resultaat | <div data-category="https://www.test.com?cat=selecting"> |
data-ternair-rss-custom-list-separator
Bestaande (lijst)waarden met het opgegeven scheidingsteken ontleden en waarden (replace/prepend/append) uit de RSS-feed toevoegen.
| Voorbeeld | |
| bestaand | value 1 - value 2 |
| template | <div class="ternair-rss-custom" data-ternair-rss-path="category" data-ternair-rss-target="data-category" data-ternair-rss-custom-type="List" data-ternair-rss-custom-mode="append" data-ternair-rss-custom-seperator=" - "> |
| resultaat | <div data-category="value1 - value2 - selecting"> |
RSS met gepersonaliseerde inhoud
Met data-ternair-rss-if is het mogelijk om de lay-out (van de content) in je e-mail aan te passen op basis van de waarde uit een RSS-feed.
| Voorbeeld |
<html><head><!-- Define RSS feed --><body><!-- Determine personalized content layout --> <div class="ternair-rss"><div data-ternair-rss-if="category\[text()='Sport'\]"> show content sport</div><div data-ternair-rss-if="category\[text()='Entertainment'\]"> show content entertainment</div><div data-ternair-rss-if="category\[text()='Music'\]"> show content music </div></div><!-- Determine number of messages --><span><i class="fa fa-rss"></i></span> <span> stories (<span class="count">100</span>)</span></div></body></html> |
RSS bewerken en hernoemen
Met data-ternair-edit=”1″ kun je RSS-feeds uit HTML aanpassen en hernoemen.
| Voorbeeld |
<meta name=”rss1″ content=”http://www.nu.nl/feeds/rss/algemeen.rss” data-ternair-edit=”1” /> |
Online viewer
De online viewer kan worden opgeroepen met de waarde:
%%viewerlink%%
| Voorbeeld |
<a href="%%viewerlink%%">View this newsletter in your browser</a> |
Bekijk e-mail met viewerlinks die geen statistieken bijhouden, zodat alleen ‘zuivere kliks’ worden geteld. Dit is speciaal voor klantenserviceteams en CRM-integraties.
| Voorbeeld |
| https://[content_domain]/readonlyviewer/?tid=[TID] |
Let op: deze url kan niet in de e-mail worden gebruikt maar is alleen voor externe systemen en third parties om de e-mailstatistieken niet te beïnvloeden.
Openers tonen
Voor de registratie van openers is een </body> vereist.
Als de body niet is opgenomen in de mail kunnen openers niet worden getoond.
| Voorbeeld |
<html><head><title>...</title></head><body>...</body></html> |
Landing pagina’s
Een landingspagina kan worden opgeroepen vanaf een hyperlink <a>.
Gebruik de href:
%%landingpage%%{templatecode}%%
{templatecode} is de unieke naam voor een landingspagina.
| Voorbeeld |
<a href="%%landingpage%%LP1%%" target="_blank">Klik hier voor de landingspagina!</a> |
Email snippets
Een e-mail snippet is een stukje voorgedefinieerde HTML code dat in meerdere e-mail templates kan worden gebruikt. Deze code kan standaard content bevatten, bijvoorbeeld een banner, advertentie of plain text.
Ternair classes worden ondersteund in snippets. Door gebruik te maken van Ternair attributen in een snippet kan deze worden bewerkt in een e-mail block. Verder kunnen een of meerdere zoektags aan een snippet worden toegevoegd.
Let op: ternair-snippet werkt als een ternair-block.
ternair-snippet
Gebruik deze klasse in een e-mail template om een snippet uit de snippet-bibliotheek in een e-mail block te gebruiken.
Gebruik de volgende attributen om standaardinstellingen voor een snippet te bepalen.
ternair-snippet-default
Wanneer een e-mail template wordt geladen wordt de snippet met deze naam standaard getoond. In de e-mail editor kan de geselecteerde snippet worden aangepast.
ternair-snippet-search
De standaard zoekwaarde voor de snippets. Alle e-mail snippet tags worden voor deze waarde doorzocht. Alleen snippets die overeenkomen met de opgegeven zoekwaarde(s) worden getoond. Meerdere zoektags kunnen worden gebruikt. Gebruik een spatie als separator tussen zoekwaarden.
| Voorbeeld |
<div class="ternair-snippet" ternair-snippet-default="example" ternair-snippet-search="title list"> </div> |
data-ternair-snippet-params
Snippet Parameters voor het instellen van specifieke snippet-waarden als ternair-snippet-default wordt gebruikt.
Met snippet parameters is het mogelijk om waarden – in een <key:value> formaat – naar de snippet te sturen die standaard geladen wordt via data-ternair-snippet-default. De waarden kunnen in de snippet als variabele worden gebruikt, soortgelijk aan themavariabelen. Deze parameters maken het mogelijk om één snippet markup te gebruiken voor verschillende toepassingen waar waarden kunnen worden gebruikt voor variabelen die per toepassing verschillen.
| Voorbeeld: het “RSS article” snippet is ontworpen om standaard drie artikelen te laden. De waarde “3” hoeft niet langer te worden opgeslagen in de snippet markup, maar kan worden ingesteld als parameter in het template (numberArticle:3) |
<div data-ternair-snippet-default="RSS Article" data-ternair-snippet-params="{numberArticle:3}"></div> |
Personalisatie
Het is niet mogelijk om voorwaardelijke personalisatie te gebruiken in de kop voor hele tags.
