Embeds

Grundlæggende #

Disse bruges til at indlejre anbefalinger direkte i enhver e-mail i enhver e-mail-klient. Det er den nemmeste og mest fleksible måde at forbedre eksisterende e-mail flows med Clerks AI.

Kom godt i gang #

Når du første gang åbner siden Email Embeds, guider en nyttig opsætningsguide dig igennem oprettelsen af best practice embeds til almindelige e-mail flows.

Guiden grupperer embeds efter e-mail flow-type, hvilket gør det let at vælge dem, der matcher dit opsætning af e-mail marketing:

Vælg de embeds du vil oprette, og klik på Create selected. Hvis der endnu ikke findes et e-mail design, bliver et standarddesign automatisk oprettet, som du kan tilpasse senere i Design Editor.

Alternativt kan du klikke på or create your own for manuelt at konfigurere et embed fra bunden.

Indlejrede e-mail anbefalinger består af en Embed, hvor du konfigurerer navnet, produktlogik og andre indstillinger, og et Design, der styrer udseendet af anbefalingerne.

Når du har konfigureret din Embed og Design, kan du blot copy-paste embedkoden ind i din e-mailplatform for at vise resultaterne på den ønskede placering.

Konfiguration #

Hver indlejret e-mail anbefaling har en række indstillinger, der gør det muligt at matche den til din unikke e-mail opsætning.

Produktlogikker #

Email leveres med et stort sæt Product Logics, som du kan bruge til at vise anbefalinger.

De spænder fra brede, såsom Best Sellers eller Hot Products, til helt personlige som Recommendations Based On Orders. Produktlogikker konfigureres på Embed-siden for en indlejret e-mail anbefaling.

E-mail platform #

Clerk har integrationer med et bredt udvalg af e-mail platforme. For indlejrede anbefalinger bruges integrationerne til at hente to specifikke informationer fra e-mail klienten via merge tags:

• Modtagerens e-mailadresse, til at personalisere med specifikke produktlogikker.
• En cachebuster, der tilføjer en unik værdi for hver udsendt e-mail for at undgå caching, som ellers ville vise de samme produkter i flere e-mails.

Ved at vælge din platform fra listen, tilføjes disse merge tags automatisk til embedkoden.

Hvis din e-mail platform ikke allerede er del af listen over integrationer, vælg blot Other og tilføj merge tags manuelt.

Ekstra argumenter #

Nogle logikker kræver, at du tilføjer ekstra information, såsom kategori-id’er eller nøgleord, som tilføjes i fanen Insert into e-mail.

Embedkode #

Når en bruger åbner en e-mail med en embedkode, foretages et kald til Clerks API for at hente produkterne, som gengives via det design, du har konfigureret i en headless-browser og returneres som et billede, der skal vises i e-mailen.

Struktur #

Herunder er et eksempel på en embedkode, der viser 2 produkter. Hvert produkt består af et link til produktsiden og et billede, der viser produktet.

<center> 
    <a  class="clerk-email-product" 
        href="https://api.clerk.io/v2/campaigns/click?key=Ipkv9tKfxRdpLv3mpMhqxfWGNdqugE0c&embed=personalised-recommendations&email={{ email }}&n=0&v={% current_day %}{% current_month_name %}{% current_year %}&append=utm_source%3Dclerk%26utm_medium%3Demail%26utm_campaign%3Dpersonalised-recommendations%26utm_content%3Dclerk-recommendations&keywords=star%20wars" 
        target="_blank" 
        style="text-decoration: none; ">
        <img src="https://api.clerk.io/v2/campaigns/embed?key=Ipkv9tKfxRdpLv3mpMhqxfWGNdqugE0c&embed=personalised-recommendations&email={{ email }}&n=0&v={% current_day %}{% current_month_name %}{% current_year %}&append=utm_source%3Dclerk%26utm_medium%3Demail%26utm_campaign%3Dpersonalised-recommendations%26utm_content%3Dclerk-recommendations&keywords=star%20wars" />
    </a>
    <a  class="clerk-email-product" 
        href="https://api.clerk.io/v2/campaigns/click?key=Ipkv9tKfxRdpLv3mpMhqxfWGNdqugE0c&embed=personalised-recommendations&email={{ email }}&n=1&v={% current_day %}{% current_month_name %}{% current_year %}&append=utm_source%3Dclerk%26utm_medium%3Demail%26utm_campaign%3Dpersonalised-recommendations%26utm_content%3Dclerk-recommendations&keywords=star%20wars" 
        target="_blank" 
        style="text-decoration: none; ">
        <img src="https://api.clerk.io/v2/campaigns/embed?key=Ipkv9tKfxRdpLv3mpMhqxfWGNdqugE0c&embed=personalised-recommendations&email={{ email }}&n=1&v={% current_day %}{% current_month_name %}{% current_year %}&append=utm_source%3Dclerk%26utm_medium%3Demail%26utm_campaign%3Dpersonalised-recommendations%26utm_content%3Dclerk-recommendations&keywords=star%20wars" />
    </a>
</center>

Links bruger kald til campaigns/click, som sender kunden via Clerks tracking-system og derefter til produktsiden.

Billeder bruger kald til campaigns/embed, som returnerer billedet, der vises i e-mailen.

Parametre #

Disse datapunkter bruges i API-kald:

Cachebusteren er nødvendig, fordi én indlejret e-mail anbefaling embedkode kan bruges til at vise produkter i tusindvis af e-mails, da den blot foretager API-kald til Clerk når e-mailen åbnes af en bruger.

Da billedlinket forbliver det samme, vil mange e-mail klienter cache det og vise de samme produkter i stedet for at lave et nyt API-kald. Cachebusteren sikrer, at e-mail klienterne ser hver e-mail som en unik forespørgsel.

Tracking #

Ydelsen for indlejrede anbefalinger spores via de URL-parametre, der inkluderes, når brugeren sendes til produktsiden.

Struktur #

Landings-URL’en inkluderer:

• Google Analytics UTM-koder
• Clerks egne tracking-parametre, som identificeres af Clerk.js.

Her er et eksempel på en URL:

https://www.theschwartz.com/?utm_source=clerk&utm_medium=email&utm_campaign=personalised-recommendations&utm_content=clerk-recommendations&clerk_product=28081&clerk_labels=Personalised+Recommendations&clerk_api=recommendations%2Akeywords&clerk_n=0&clerk_external=1&clerk_email=gAAAAABnoLO_YDvTRvfT4ed8pRIYjqQzo38JtrdwRIM-VYDuJO8awxImzfgDB3M-Jfr29WUoayvYNV4XxqixK3-bvukeYy6uDEgRfvuomLxhpVLVn6xoUPk%3D

Parametre #

UTM-parametrene til Google Analytics kan tilpasses, så det passer til den tracking du ønsker i Tracking Code under Insert into e-mail, mens Clerk-parametrene tilføjes automatisk ved API-forespørgslen til campaigns/click.

De inkluderede parametre er:

Startdesign #

Hvert produkt i en e-mail embed gengives individuelt via en headless-browser og returneres som et billede. Derfor repræsenterer designet et enkelt produktkort i stedet for en liste, og attributter som name, image og price tilgås direkte uden product.-præfikset, der bruges i standard Code Designs.

Herunder er et simpelt udgangspunkt for at lave et e-mail embed design med HTML, CSS og Liquid. Du kan tilpasse styling og struktur, så det matcher dit brand – direkte i Design Editor eller som en Code Design.

HTML #

<div class="clerk-email-card">
  <div class="clerk-email-image-wrapper">
    <img class="clerk-email-image" src="{{ image }}" alt="{{ name }}" />
    {% if price < list_price %}
      <div class="clerk-email-badge">Sale</div>
    {% endif %}
  </div>
  <div class="clerk-email-info">
    <div class="clerk-email-name">{{ name }}</div>
    <div class="clerk-email-pricing">
      {% if price < list_price %}
        <span class="clerk-email-list-price">{{ list_price | money }}</span>
      {% endif %}
      <span class="clerk-email-price">{{ price | money }}</span>
    </div>
  </div>
</div>

CSS #

.clerk-email-card {
  width: 200px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ffffff;
  text-align: center;
}

.clerk-email-image-wrapper {
  position: relative;
}

.clerk-email-image {
  width: 100%;
  height: auto;
  display: block;
}

.clerk-email-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: #e74c3c;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.clerk-email-info {
  padding: 10px 5px;
}

.clerk-email-name {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clerk-email-pricing {
  font-size: 15px;
}

.clerk-email-list-price {
  text-decoration: line-through;
  color: #999999;
  margin-right: 5px;
  font-size: 13px;
}

.clerk-email-price {
  font-weight: bold;
  color: #333333;
}