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-mailflows med Clerks AI.

Kom godt i gang #

Når du først åbner siden Email Embeds, guider en hjælpsom opsætningsguide dig igennem oprettelsen af best practice embeds til almindelige e-mailflows.

Guiden grupperer embeds efter type af e-mailflow, hvilket gør det nemt at vælge dem, der matcher dit e-mailmarketing-setup:

Vælg de embeds du ønsker at oprette og klik på Create selected. Hvis der endnu ikke findes et e-maildesign, oprettes et standarddesign automatisk, som du senere kan tilpasse i Design Editor.

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

Indlejrede e-mailanbefalinger består af en Embed, hvor du konfigurerer navn, produktlogik og andre indstillinger, og et Design, der styrer udseendet og følelsen af anbefalingerne.

Når du har konfigureret dit Embed og Design, kan du ganske enkelt kopiere og indsætte embedkoden i din e-mailplatform for at vise resultater på den placering.

Konfiguration #

Hver indlejret e-mailanbefaling har en række indstillinger, der gør det muligt at tilpasse den til dit unikke e-mailsætup.

Produktlogikker #

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

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

E-mailplatform #

Clerk har integrationer til en bred vifte af e-mailplatforme. For indlejrede anbefalinger bruges integrationerne til at hente to specifikke informationer fra e-mailklienten via merge tags:

• Modtagerens e-mailadresse, for personliggørelse med specifikke produktlogikker.
• En cachebuster, der tilføjer en unik værdi for hver sendt e-mail, for at undgå caching, der ellers vil 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-mailplatform ikke allerede er en del af integrationslisten, 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 søgeord, som tilføjes i fanen Insert into e-mail.

Embedkode #

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

Struktur #

Nedenfor 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 gennem Clerk’s tracking system og derefter til produktsiden.

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

Parametre #

Dette er datapunkterne, der bruges i API-kaldene:

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

Da billedlinket forbliver det samme, vil mange e-mailklienter cache det og vise de samme produkter, i stedet for at lave et nyt API-kald. Cachebusteren sikrer, at e-mailklienterne opfatter hver e-mail som en unik anmodning.

Tracking #

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

Struktur #

Landing-URL’en inkluderer:

• Google Analytics UTM-koder
• Clerks egne trackingparametre, der 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å de matcher den tracking du ønsker i Tracking Code under Insert into e-mail, mens Clerk-parametrene tilføjes automatisk i API-forespørgslen til campaigns/click.

De inkluderede parametre er:

Startdesign #

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

Nedenfor er et simpelt udgangspunkt for at lave et e-mail embed-design ved hjælp af 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;
}