Gérer les composants de messagerie promotionnelle

À propos des composants de messagerie promotionnelle

Vous pouvez choisir parmi trois types de composants pour mettre en avant les offres de financement d'Affirm :

Aussi peu que (APQ)
Modal des produits

Pour obtenir des renseignements sur la conformité en matière de marketing, consultez la section Marketing dans le Centre de ressources pour entreprises.

Aussi bas que

Les composants aussi peu que (APQ) sont des balises HTML spécifiques qui affichent des messages promotionnels aussi peu que sur votre site. Vous pouvez ajouter les balises à votre site en fonction de l'endroit où vous souhaitez afficher la messagerie promotionnelle. Pour plus de détails, consultez la Référence HTML.

APQ JSFiddle :

ALA HTML:

<div id="prices">
    <p class="affirm-as-low-as" data-page-type="product" data-amount=50000></p>
</div>

Modal des produits

Une fenêtre modale de produit est un type de fenêtre contextuelle qui affiche des informations détaillées sur un produit spécifique, notamment ses détails de tarification. Les modaux de produits sont souvent situés sur les pages de détails des produits, car ils fournissent aux utilisateurs des informations complètes sur les prix et les produits, les aidant dans leur décision d'achat. En règle générale, un utilisateur peut ouvrir une fenêtre modale de produit en cliquant sur l’appel à l’action dans un message promotionnel du type « aussi peu que », comme « En savoir plus ».

Pour des détails sur l'ajout d'une fenêtre modale de produit, consultez la référence HTML.

HTML du modal des produits :

<div id="prices">
    <p class="affirm-as-low-as" data-page-type="product" data-amount=50000></p>
</div>

<div id="prices">
     <button class="affirm-product-modal" data-page-type="product" data-amount=30000>
           Learn More</button>
</div>

Modale de produit JSFiddle :

Gestion des composants de messagerie promotionnelle

Créer un composant

L’importation affirm.ui.components.create crée un composant Affirm en arrière-plan pour être rendu à la demande sur votre site Web, réduisant considérablement l'impact du temps de chargement.

📘
Les composants de messagerie promotionnelle aident à réduire la latence et vous offrent plus de flexibilité.

const promoComponent = affirm.ui.components.create(‘promo’, options)

Arguments de méthode

Attribut	Type	Description
type de composant Obligatoire	string	Seul `promo` est disponible.
les options Obligatoire	objet	Voir l'objet Options.

Propriétés des options

Attribut	Type	Description
amount	integer	The loan amount passed to display price specific messaging. The amount must be in cents.
pageType Obligatoire	string	Le type de page de la page sur laquelle se trouve la promotion ou le message : - `product` (par défaut) - A DÉTERMINER
affirmLogoType	string	Définit le type de logo Affirm. L'image du logo Affirm est affichée par défaut: - `logo` (par défaut): logo Affirm standard. - `symbol`: Affiche le logo Affirm sous forme de symbole. - `text`: Affiche le logo Affirm en texte brut.
affirmLogoColor	string	Définissez la couleur du logo Affirm : - `black` - `blue` (par défaut) - `white`
Catégorie	string	Identifie la catégorie de produit associée au message pour le suivi analytique (par ex., électronique, mobilier).
marque	string	Identifie la catégorie de marque associée au message pour le suivi analytique (par ex., Samsung, Goodyear).
sku	string	Identifies the SKU associated with the messaging for analytics tracking.
promoId	string	Permet au commerçant de sélectionner un identifiant promotionnel spécifique qu'il souhaite afficher. Cela remplacera le `pageType` fourni.
learnMoreShow	boolean	S'il faut afficher ou supprimer le lien modal : - `true` (par défaut) : affiche le lien modal. - `false`: supprime le lien CTA et crée un lien hypertexte vers l'intégralité de la promotion.

Rendu d'un composant

Rendez un composant pour améliorer la latence des messages promotionnels sur votre site Web :

Appelez la fonction de rendu, affirm.jsReady(), pour un composant existant à tout moment.
1. La fonction de rendu accepte le sélecteur CSS pour l’élément DOM où vous souhaitez afficher le message promotionnel. Nous recommandons d’utiliser un id pour un seul élément en tant que sélecteur CSS.
2. La fonction de rendu utilise document.querySelector pour localiser l'élément sur la page. Si vous passez une classe, seul le premier élément correspondant est transformé en composant rendu.

Mettre à jour un composant

Vous pouvez mettre à jour un composant pour réduire la latence et accroître la flexibilité de votre site.

Pour les éléments de messages promotionnels, la fonction de mise à jour :

Effectue un autre appel à l'API Promos avec les optionsmises à jour.
Refait le rendu du message promotionnel s'il est affiché sur la page.

Sujets relatifs

HTML Reference: Promotional Messaging