Embeds

Grundlæggende #

Disse bruges til at indlejre recommendations direkte i enhver email i alle emailklienter. Det er den nemmeste og mest fleksible måde at forbedre eksisterende email flows på ved at bruge Clerks AI.

Kom godt i gang #

Når du første gang åbner Email Embeds-siden, guider en hjælpsom opsætningsguide dig igennem oprettelse af best practice embeds til almindelige email flows.

Guiden grupperer embeds efter typen af email-flow, hvilket gør det nemt at vælge dem, der matcher dit email-marketing setup:

Vælg de embeds, du vil oprette, og klik på Create selected. Hvis der endnu ikke findes et email design, bliver der automatisk oprettet et standarddesign, 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 email recommendations består af en Embed, hvor du konfigurerer navn, produktlogik og andre indstillinger, samt et Design, der styrer udseendet og oplevelsen af recommendations.

Når du har konfigureret dit Embed og Design, kan du blot copy-paste embedcode ind i din email platform for at vise resultaterne på den placering.

Konfiguration #

Hver indlejret email recommendation har en række indstillinger, der gør det muligt at matche den til dit unikke email-setup.

Produktlogikker #

Email kommer med et stort udvalg af Product Logics, som du kan bruge til at vise recommendations.

De spænder fra brede, som Best Sellers eller Hot Products, til helt personlige som Recommendations Based On Orders. Product Logics konfigureres på Embed-siden for en indlejret email recommendation.

E-mail Platform #

Clerk har integrationer til en lang række e-mail platforme. For indlejrede recommendations bruges integrationerne til at hente to specifikke oplysninger fra emailklienten via merge tags:

• Modtagerens emailadresse, så der kan personliggøres med specifikke produktlogikker.
• En cachebuster, der tilføjer en unik værdi for hver sendt email for at undgå caching, som ellers vil vise de samme produkter i flere emails.

Ved at vælge din platform på listen tilføjes disse merge tags automatisk til embedcode.

Hvis din e-mail platform ikke allerede er på listen over integrationer, skal du blot vælge Other og tilføje 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 under fanen Insert into e-mail.

Embedcode #

Når en bruger åbner en email med embedcode, foretages der et kald til Clerks API for at hente produkterne, som rendres gennem det design, du har konfigureret i en headless browser, og returneres som et billede, der vises i emailen.

Struktur #

Herunder er et eksempel på en embedcode, 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 leder kunden igennem Clerk’s tracking system og derefter til produktsiden.

Billeder bruger kald til campaigns/embed, som returnerer billedet, der skal vises i emailen.

Parametre #

Dette er de datapunkter, der bruges i API-kald:

Cachebuster er nødvendig, da én e-mail recommendations embedcode kan bruges til at vise produkter i tusindvis af emails, da den blot laver API-kald til Clerk, når emailen åbnes af brugeren.

Da billedlinket forbliver det samme, vil mange emailklienter cache det og vise de samme produkter i stedet for at lave et nyt API-kald. Cachebuster sørger for, at emailklienterne ser hver email som en unik anmodning.

Tracking #

Ydelsen af indlejrede recommendations spores gennem URL-parametrene, der inkluderes, når brugeren viderestilles 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å de matcher den tracking, du ønsker, under Tracking Code i Insert into e-mail, mens Clerk-parametrene tilføjes automatisk i API-anmodningen til campaigns/click.

De inkluderede parametre er:

Start Design #

Hvert produkt i en email embed bliver rendret individuelt gennem en headless browser og returneret som et billede. Derfor repræsenterer designet et enkelt produktkort fremfor en liste, og attributter som name, image og price tilgås direkte uden product.-præfikset, som bruges i standard Code Designs.

Herunder ses et simpelt udgangspunkt for at oprette et email embed design med HTML, CSS og Liquid. Du kan tilpasse stil og struktur, så det matcher dit brand direkte i Design Editor eller som et 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;
}