G

G

M

M

Modélisation Avancée d'Email

Emails Dynamiques et Personnalisés avec le langage Liquid

Modélisation Avancée d'Email

Modélisation Avancée d'Email

Modélisation Avancée d'Email

La personnalisation avancée des modèles d'e-mails permet des modèles d'e-mails hautement personnalisés. Elle peut être utilisée à la fois dans l'éditeur par glisser-déposer et directement sur le HTML importé.

Documentation sur le langage des modèles d'e-mails Bird

Le langage des modèles d'e-mails Bird est un outil puissant basé sur la syntaxe Liquid de Shopify, avec des extensions personnalisées conçues spécifiquement pour le marketing par e-mail. Ce langage vous permet de créer des modèles d'e-mails dynamiques et personnalisés efficacement, vous permettant de diffuser du contenu ciblé à vos abonnés.

  • Les principales caractéristiques du langage des modèles d'e-mails Bird incluent :

  • Personnalisation facile à l'aide de variables prédéfinies

  • Affichage conditionnel du contenu basé sur les attributs ou segments des abonnés

  • Intégration avec votre catalogue de produits et des sources de données externes

  • Support de l'internationalisation grâce aux traductions

  • Options de mise en forme avancées avec des filtres

Ce guide vous guidera à travers les composants essentiels du langage, en fournissant des exemples et des meilleures pratiques pour vous aider à créer des modèles d'e-mails efficaces. Pour une référence complète sur la syntaxe Liquid sous-jacente, veuillez vous référer à la documentation Shopify Liquid.

Variables Prédéfinies

Les variables prédéfinies vous permettent de personnaliser facilement vos e-mails avec des informations sur le destinataire et des détails sur l'organisation.

Variables de contact

Utilisez celles-ci pour insérer des informations spécifiques au destinataire dans vos e-mails :

{{ contact.attributes.firstName }}
{{ contact.attributes.lastName }}
{{ contact.attributes.email }}

Vous pouvez également utiliser tous les attributs personnalisés que vous avez définis pour vos contacts.

Variables d'organisation

Incluez les informations de votre entreprise de manière cohérente dans tous les e-mails :

{{ organization.name }}
{{ organization.fullAddress }}
{{ organization.websiteUrl }}
{{ organization.street }}
{{ organization.city }}
{{ organization.state }}
{{ organization.country }}
{{ organization.zipCode }}

Variable d'adresse e-mail

Référez-vous directement à l'adresse e-mail du destinataire :

{{ emailAddress }}

Meilleure pratique : Ayez toujours une solution de secours pour les variables de personnalisation au cas où elles ne seraient pas définies pour un destinataire particulier.

Filtres de balises

Les filtres vous permettent de modifier la sortie de vos variables, garantissant que le contenu est correctement formaté pour vos e-mails.

  • default : Définir une valeur de secours si la variable est vide

{{ contact.attributes.firstName | default: 'Valued Customer' }}
  • capitalize, upcase, downcase : Modifier la casse du texte

{{ contact.attributes.firstName | capitalize }}
{{ product.brand | upcase }}
{{ 'IMPORTANT NOTICE' | downcase }}
  • date : Formater les dates selon des modèles spécifiés

{{ contact.attributes.birthday | date: '%B %d, %Y' }}
{{ 'now' | date: '%Y-%m-%d %H:%M' }}
  • currencyFormat : Formater les nombres en tant que devise

{{ product.price | currencyFormat: 'USD' }}

Meilleure pratique : Utilisez le filtre currencyFormat pour tous les affichages de prix afin de garantir la cohérence et le bon formatage dans différentes régions.

Balises Spéciales

Les balises spéciales fournissent un accès rapide aux besoins courants du marketing par e-mail, tels que les liens de désabonnement et les vues Web.

Liens de désabonnement

Essentiel pour se conformer aux règlements sur les e-mails :

{% unsubscribe %}  <!-- Outputs: <a href="...">Unsubscribe</a> -->
{% unsubscribe 'Click here to unsubscribe' %}  <!-- Custom text -->
<a href="{% unsubscribeLink %}">Manage your preferences</a>  <

Liens de vue Web

Offrir une option pour visualiser l'e-mail dans un navigateur web :

{% webView %}  <!-- Outputs: <a href="...">View in browser</a> -->
{% webView 'View this email online' %}  <!-- Custom text -->
<a href="{% webViewLink %}">Trouble viewing? Click here</a>  <

Balises de date

Utile pour afficher les dates actuelles dans vos e-mails :

Today's Date: {% currentYear %}-{% currentMonthName %}-{% currentDay %}
Sent on: {% currentWeekday %}

Meilleure pratique : Incluez toujours un lien de désabonnement dans vos e-mails, généralement dans le pied de page.

Les variables prédéfinies vous permettent de personnaliser facilement vos e-mails avec des informations sur le destinataire et des détails sur l'organisation.

Variables de contact

Utilisez celles-ci pour insérer des informations spécifiques au destinataire dans vos e-mails :

{{ contact.attributes.firstName }}
{{ contact.attributes.lastName }}
{{ contact.attributes.email }}

Vous pouvez également utiliser tous les attributs personnalisés que vous avez définis pour vos contacts.

Variables d'organisation

Incluez les informations de votre entreprise de manière cohérente dans tous les e-mails :

{{ organization.name }}
{{ organization.fullAddress }}
{{ organization.websiteUrl }}
{{ organization.street }}
{{ organization.city }}
{{ organization.state }}
{{ organization.country }}
{{ organization.zipCode }}

Variable d'adresse e-mail

Référez-vous directement à l'adresse e-mail du destinataire :

{{ emailAddress }}

Meilleure pratique : Ayez toujours une solution de secours pour les variables de personnalisation au cas où elles ne seraient pas définies pour un destinataire particulier.

Filtres de balises

Les filtres vous permettent de modifier la sortie de vos variables, garantissant que le contenu est correctement formaté pour vos e-mails.

  • default : Définir une valeur de secours si la variable est vide

{{ contact.attributes.firstName | default: 'Valued Customer' }}
  • capitalize, upcase, downcase : Modifier la casse du texte

{{ contact.attributes.firstName | capitalize }}
{{ product.brand | upcase }}
{{ 'IMPORTANT NOTICE' | downcase }}
  • date : Formater les dates selon des modèles spécifiés

{{ contact.attributes.birthday | date: '%B %d, %Y' }}
{{ 'now' | date: '%Y-%m-%d %H:%M' }}
  • currencyFormat : Formater les nombres en tant que devise

{{ product.price | currencyFormat: 'USD' }}

Meilleure pratique : Utilisez le filtre currencyFormat pour tous les affichages de prix afin de garantir la cohérence et le bon formatage dans différentes régions.

Balises Spéciales

Les balises spéciales fournissent un accès rapide aux besoins courants du marketing par e-mail, tels que les liens de désabonnement et les vues Web.

Liens de désabonnement

Essentiel pour se conformer aux règlements sur les e-mails :

{% unsubscribe %}  <!-- Outputs: <a href="...">Unsubscribe</a> -->
{% unsubscribe 'Click here to unsubscribe' %}  <!-- Custom text -->
<a href="{% unsubscribeLink %}">Manage your preferences</a>  <

Liens de vue Web

Offrir une option pour visualiser l'e-mail dans un navigateur web :

{% webView %}  <!-- Outputs: <a href="...">View in browser</a> -->
{% webView 'View this email online' %}  <!-- Custom text -->
<a href="{% webViewLink %}">Trouble viewing? Click here</a>  <

Balises de date

Utile pour afficher les dates actuelles dans vos e-mails :

Today's Date: {% currentYear %}-{% currentMonthName %}-{% currentDay %}
Sent on: {% currentWeekday %}

Meilleure pratique : Incluez toujours un lien de désabonnement dans vos e-mails, généralement dans le pied de page.

Les variables prédéfinies vous permettent de personnaliser facilement vos e-mails avec des informations sur le destinataire et des détails sur l'organisation.

Variables de contact

Utilisez celles-ci pour insérer des informations spécifiques au destinataire dans vos e-mails :

{{ contact.attributes.firstName }}
{{ contact.attributes.lastName }}
{{ contact.attributes.email }}

Vous pouvez également utiliser tous les attributs personnalisés que vous avez définis pour vos contacts.

Variables d'organisation

Incluez les informations de votre entreprise de manière cohérente dans tous les e-mails :

{{ organization.name }}
{{ organization.fullAddress }}
{{ organization.websiteUrl }}
{{ organization.street }}
{{ organization.city }}
{{ organization.state }}
{{ organization.country }}
{{ organization.zipCode }}

Variable d'adresse e-mail

Référez-vous directement à l'adresse e-mail du destinataire :

{{ emailAddress }}

Meilleure pratique : Ayez toujours une solution de secours pour les variables de personnalisation au cas où elles ne seraient pas définies pour un destinataire particulier.

Filtres de balises

Les filtres vous permettent de modifier la sortie de vos variables, garantissant que le contenu est correctement formaté pour vos e-mails.

  • default : Définir une valeur de secours si la variable est vide

{{ contact.attributes.firstName | default: 'Valued Customer' }}
  • capitalize, upcase, downcase : Modifier la casse du texte

{{ contact.attributes.firstName | capitalize }}
{{ product.brand | upcase }}
{{ 'IMPORTANT NOTICE' | downcase }}
  • date : Formater les dates selon des modèles spécifiés

{{ contact.attributes.birthday | date: '%B %d, %Y' }}
{{ 'now' | date: '%Y-%m-%d %H:%M' }}
  • currencyFormat : Formater les nombres en tant que devise

{{ product.price | currencyFormat: 'USD' }}

Meilleure pratique : Utilisez le filtre currencyFormat pour tous les affichages de prix afin de garantir la cohérence et le bon formatage dans différentes régions.

Balises Spéciales

Les balises spéciales fournissent un accès rapide aux besoins courants du marketing par e-mail, tels que les liens de désabonnement et les vues Web.

Liens de désabonnement

Essentiel pour se conformer aux règlements sur les e-mails :

{% unsubscribe %}  <!-- Outputs: <a href="...">Unsubscribe</a> -->
{% unsubscribe 'Click here to unsubscribe' %}  <!-- Custom text -->
<a href="{% unsubscribeLink %}">Manage your preferences</a>  <

Liens de vue Web

Offrir une option pour visualiser l'e-mail dans un navigateur web :

{% webView %}  <!-- Outputs: <a href="...">View in browser</a> -->
{% webView 'View this email online' %}  <!-- Custom text -->
<a href="{% webViewLink %}">Trouble viewing? Click here</a>  <

Balises de date

Utile pour afficher les dates actuelles dans vos e-mails :

Today's Date: {% currentYear %}-{% currentMonthName %}-{% currentDay %}
Sent on: {% currentWeekday %}

Meilleure pratique : Incluez toujours un lien de désabonnement dans vos e-mails, généralement dans le pied de page.

Logique conditionnelle et boucles

La logique conditionnelle et les boucles vous permettent de créer un contenu dynamique qui s'adapte aux attributs ou préférences de chaque destinataire.

If Statements

Utilisez des if statements pour afficher différents contenus en fonction des attributs du destinataire :

{% if contact.attributes.membership == "gold" %}
  <h2>Exclusive Gold Member Offer</h2>
  <p>Enjoy 20% off your next purchase!</p>
{% elsif contact.attributes.membership == "silver" %}
  <h2>Special Silver Member Discount</h2>
  <p>Get 15% off select items!</p>
{% else %}
  <h2>Limited Time Offer</h2>
  <p>Save 10% on your next order!</p>
{% endif %}

Vérification de l'appartenance à un segment

Ciblez le contenu sur des segments spécifiques de votre audience :

{% if contact.segments contains "abcd-1234-efgh-5678" }
  This contact is a member of the segment with ID "abcd-1234-efgh-5678".
{% endif %}

Loops

Répétez sur des tableaux de données pour créer des listes dynamiques :

<h3>Your Favorite Colors:</h3>
<ul>
{% for color in contact.attributes.favoriteColors %}
  <li style="color: {{ color }};">{{ color }}</li>
{% endfor %}
<

Meilleure pratique : Utilisez la logique conditionnelle pour adapter votre message à différents segments de l'audience, augmentant ainsi la pertinence et l'engagement.

Travailler avec Products

Intégrez votre catalogue de produits directement dans vos modèles d'e-mails pour des affichages de produits dynamiques.

Recherche de produit unique

Affichez les détails d'un produit spécifique :

{% catalog 'PRODUCT-ID-123' %}
  <div class="product">
    <h2>{{ catalogItem.title }}</h2>
    <img src="{{ catalogItem.imageUrl }}" alt="{{ catalogItem.title }}">
    <p>Price: {{ catalogItem.price | currencyFormat: catalogItem.currency }}</p>
    {% if catalogItem.originalPrice > catalogItem.price %}
      <p>Original Price: <strike>{{ catalogItem.originalPrice | currencyFormat: catalogItem.currency }}</strike></p>
    {% endif %}
    <a href="{{ catalogItem.url }}">Shop Now</a>
  </div>
{


Flux de produits

Affichez plusieurs produits à partir d'un flux :

<h2>Recommended for You</h2>
<div class="product-grid">
  {% productfeed 'FEED-ID-456' %}
    {% for item in catalogItems limit:3 %}
      <div class="product">
        <h3>{{ item.title }}</h3>
        <img src="{{ item.imageUrl }}" alt="{{ item.title }}">
        <p>{{ item.price | currencyFormat: item.currency }}</p>
        <a href="{{ item.url }}">View Product</a>
      </div>
    {% endfor %}
  {% endproductfeed %}
</div>

Meilleure pratique : utilisez des flux de produits pour créer du contenu dynamique comme des sections "Produits recommandés" ou "Nouveautés" dans vos e-mails.

Événements

Exploitez les données d'événements pour créer des e-mails très pertinents et opportuns basés sur les actions des abonnés. Cela est généralement pertinent pour les e-mails envoyés via des parcours avec des déclencheurs d'événements.

{% if event.type == "abandoned_cart" %}
  <h2>Did you forget something?</h2>
  <p>We noticed you left some items in your cart:</p>
  <ul>
  {% for item in event.properties.items %}
    <li>{{ item.product_name }} - {{ item.price | currencyFormat: event.properties.currency }}</li>
  {% endfor %}
  </ul>
  <a href="{{ event.properties.checkout_url }}">Complete your purchase</a>
{% elsif event.type == "purchase_confirmation" %}
  <h2>Thank you for your purchase!</h2>
  <p>Order Total: {{ event.properties.total_price | currencyFormat: event.properties.currency }}</p>
  <p>Order ID: {{ event.properties.order_id }}</p>
{

Meilleure Pratique : Utilisez les données d'événements pour déclencher des e-mails opportuns et pertinents tels que des rappels de panier abandonné ou des confirmations d'achat.

Codes de réduction

Générez et affichez des codes de réduction uniques dans vos e-mails pour encourager les achats.

<h2>Your Exclusive Offer</h2>
<p>Use this code for 15% off your next purchase:</p>
<div class="discount-code">{% discountCode "SUMMER_SALE_POOL" %}</div>

Meilleure Pratique : Utilisez des codes de réduction uniques pour suivre la performance des différentes campagnes ou segments d'e-mails.

Traductions

Créer des modèles d'email multilingues en utilisant la fonction de traduction.

Tout d'abord, configurez vos fichiers de traduction (au format JSON) pour chaque langue que vous supportez. Par exemple :

{
  "welcome_message": "Welcome to our store!",
  "sale_announcement": "Don't miss our big sale, {{name}}!",
  "product_of_the_day": "Product of the day: {{product}}"
}

Ensuite, utilisez le filtre t dans vos modèles :

<h1>{{ "welcome_message" | t }}</h1>
<p>{{ "sale_announcement" | t: "name", contact.attributes.firstName }}</p>
<h2>{{ "product_of_the_day" | t: "product", featuredProduct.title }}</h2>

Meilleure Pratique : Utilisez les traductions pour créer un modèle unique qui peut être utilisé pour plusieurs langues, réduisant ainsi les frais de maintenance.


Sources de données externes

Intégrez des données en temps réel provenant de sources externes dans vos e-mails. Vous pouvez en savoir plus sur les sources de données externes ici.

Utilisation de base :

{% datafetch "weather-api" %}
  <p>Current temperature in your area: {{ dataFetchResponse.temperature }}°C</p>
  <p>Weather condition: {{ dataFetchResponse.condition }}</p>
{

Utilisation des URL dynamiques

Pour les API qui nécessitent des paramètres dynamiques :

{% datafetch "user-recommendations", "userId", contact.attributes.userId %}
  <h2>Recommended for You</h2>
  <ul>
  {% for product in dataFetchResponse.recommendations %}
    <li>{{ product.name }} - {{ product.price | currencyFormat: 'USD' }}</li>
  {% endfor %}
  </ul>
{

Meilleure pratique : Utilisez des sources de données externes pour inclure des informations personnalisées et à jour dans vos e-mails, telles que des soldes de compte, des points de fidélité ou des recommandations personnalisées.


Syntaxe Avancée Liquid

Bien que le Bird Email Template Language offre des fonctionnalités puissantes spécifiques au marketing par email, il est construit sur Liquid, qui propose des fonctionnalités avancées supplémentaires. Voici quelques exemples :

Gestion des tableaux et des objets

{% assign sorted_products = products | sort: 'price' %}
{% assign expensive_products = sorted_products | where: "price", ">", 100 %}

Opérations mathématiques

{% assign total = product.price | times: item.quantity %}
{% assign discount = total | divided_by: 4 %}

Manipulation de chaînes

{% assign lowercase_name = contact.attributes.firstName | downcase %}
{% assign greeting = "Hello, " | append: lowercase_name | capitalize %}

Flux de contrôle

{% case shipping_method %}
  {% when 'ground' %}
    Estimated delivery: 5-7 business days
  {% when 'express' %}
    Estimated delivery: 2-3 business days
  {% else %}
    Please contact us for shipping information
{% endcase %}

Pour un guide complet sur ces fonctionnalités avancées de Liquid, veuillez vous référer à la documentation Shopify Liquid.

Bonne pratique : Bien que ces fonctionnalités avancées soient puissantes, utilisez-les judicieusement. Des modèles trop complexes peuvent être difficiles à maintenir et peuvent affecter les performances de rendu des emails.

Souvenez-vous de tester vos modèles d'email de manière approfondie sur différents clients de messagerie pour assurer un rendu cohérent et des performances optimales. La plateforme Bird fournit des outils pour prévisualiser et tester vos modèles avant l'envoi.

En maîtrisant le Bird Email Template Language, vous serez capable de créer des campagnes email dynamiques, personnalisées et engageantes qui résonnent avec votre audience et génèrent des résultats.

Connectons-vous avec un expert Bird.
Découvrez toute la puissance du Bird en 30 minutes.

En soumettant, vous acceptez que Bird puisse vous contacter au sujet de nos produits et services.

Vous pouvez vous désabonner à tout moment. Consultez la Déclaration de confidentialité de Bird pour plus de détails sur le traitement des données.

Company

Newsletter

Restez à jour avec Bird grâce aux mises à jour hebdomadaires dans votre boîte de réception.

Connectons-vous avec un expert Bird.
Découvrez toute la puissance du Bird en 30 minutes.

En soumettant, vous acceptez que Bird puisse vous contacter au sujet de nos produits et services.

Vous pouvez vous désabonner à tout moment. Consultez la Déclaration de confidentialité de Bird pour plus de détails sur le traitement des données.

Company

Newsletter

Restez à jour avec Bird grâce aux mises à jour hebdomadaires dans votre boîte de réception.

Connectons-vous avec un expert Bird.
Découvrez toute la puissance du Bird en 30 minutes.

En soumettant, vous acceptez que Bird puisse vous contacter au sujet de nos produits et services.

Vous pouvez vous désabonner à tout moment. Consultez la Déclaration de confidentialité de Bird pour plus de détails sur le traitement des données.

R

Atteindre

G

Grow

M

Manage

A

Automate

Company

Newsletter

Restez à jour avec Bird grâce aux mises à jour hebdomadaires dans votre boîte de réception.