À propos des messages promotionnels

Directives de marketing

En suivant nos directives de marque pour les commerçants Affirm CA 2022, vous vous assurez que vos messages et communications sont conformes et maintiennent la qualité de la marque Affirm. Ces guides comprennent :

• Spécifications de la marque (taille du logo, couleur)
• Directives relatives aux messages sur la page d'accueil (mise en page et messages approuvés)
• Directives relatives aux messages sur les produits, les catégories, les paniers et les pages de paiement
• Aperçu des modules éducatifs (appelés modules "En savoir plus" dans le document des lignes directrices)
• Directives en matière de marketing par courriel (mise en page et messages approuvés)
• Directives pour le marketing des médias sociaux

Tout votre contenu marketing Affirm doit être mis à la disposition de tous vos clients.

Démarrage rapide

Des messages sur les paiements mensuels et des modules éducatifs montrent aux clients comment ils peuvent utiliser Affirm pour financer leurs achats. Notre messagerie promotionnelle vous permet de :

• Afficher dynamiquement les informations sur les prix avec paiements mensuels
• Offrir la pré-admissibilité

Ce guide passera en revue les messages promotionnels d'Affirm et explique comment les ajouter à votre site. Une fois que vous avez déterminé l'endroit où vous souhaitez que le message de paiement au fil de l'eau Affirm apparaisse sur votre site Web, il y a trois étapes pour le rendre et s'assurer qu'il fonctionne correctement.

1. Ajouter Affirm.js

Notre intégration globale comporte des paramètres étendus pour atteindre les clients internationaux, qui se compose d'un champ endroit et code de pays exposés dans la configuration d'Affirm.

Inclure le script Affirm.js

Ajoutez le code d'intégration de Affirm.js à l'en-tête de votre modèle de page globale si ce n'est pas déjà fait. Cela communiquera avec Affirm pour vous aider à calculer le message « À partir de x $/mois » en fonction des offres de financement sur votre site Web.

	_affirm_config = {
		public_api_key: "{YOUR_PUBLIC_API_KEY}",
		script: "https://cdn1-sandbox.affirm.com/js/v2/affirm.js",
		locale: "fr_CA",
		country_code: "CAN",
	};

(function(m,g,n,d,a,e,h,c){var b=m[n]||{},k=document.createElement(e),p=document.getElementsByTagName(e)[0],l=function(a,b,c){return function(){a[b]._.push([c,arguments])}};b[d]=l(b,d,"set");var f=b[d];b[a]={};b[a]._=[];f._=[];b._=[];b[a][h]=l(b,a,h);b[c]=function(){b._.push([h,arguments])};a=0;for(c="set add save post open empty reset on off trigger ready setProduct".split(" ");a<c.length;a++)f[c[a]]=l(b,d,c[a]);a=0;for(c=["get","token","url","items"];a<c.length;a++)f[c[a]]=function(){};k.async=
  !0;k.src=g[e];p.parentNode.insertBefore(k,p);delete g[e];f(g);m[n]=b})(window,_affirm_config,"affirm","checkout","ui","script","ready","jsReady");

Locale

Le paramètre endroit permet à Affirm d'identifier la région dans laquelle vous servez votre site pour un utilisateur particulier. Par exemple, supposons que vous rendez votre site en français canadien. Cela s'est peut-être produit parce que le paramètre de navigateur de l'utilisateur a détecté le français canadien. Vous pouvez fournir Affirm avec le paramètre de langue de l'utilisateur en le transmettant dans le paramètre endroit. Affirm lira ensuite le paramètre régional et traduira les pages en conséquence, ce qui correspondra à la langue que l'utilisateur avait vue sur votre site. Cependant, nous n'essaierons pas de lire directement les paramètres régionaux de l'utilisateur.

Country_code

Le paramètre country_code représente le pays de constitution légale de votre magasin, qui est présenté à un utilisateur donné. Ainsi, si vous présentez votre site Web/magasin canadien à un utilisateur et que vous avez une présence légale au Canada, vous transmettrez le code CAN dans le paramètre country_code. Cela nous permet de déterminer les réglementations à respecter et les banques avec lesquelles nous associer pour cette transaction.

En outre, Affirm attend un code pays à trois lettres "Alpha 3" pour ce paramètre. Si rien n'est envoyé, Affirm assumera "États-Unis".

Valeurs prises en charge

Affirm prend en charge les combinaisons suivantes pour ces arguments :

country_code:USA
endroit:en_US
country_code:CAN
endroit:en_CA
endroit:fr_CA

Ce qui suit se produit lorsqu'aucun endroit et/ou country_code n'est fourni :

• Lorsqu'un endroit n'est _pas _fourni, l'endroit est défini par défaut sur en_US (États-Unis où l'on parle anglais).
• Lorsqu'un country_code n'est pas , le country_code sera par défaut États-Unis.

2. Créer des éléments de messages promotionnels

Ajoutez l'élément HTML affirm-aussi-peu-que à l'endroit où vous souhaitez afficher un composant de message promotionnelle Affirm. Cela rendra le message "À partir de x $/mois" sur la page Web. Les attributs d'éléments, tels que le type de page de données, déterminent quel composant s'affiche. Nous vous recommandons généralement d'ajouter des messages promotionnels à vos pages de catégorie, de produit, de panier et de paiement. Consultez notre [Référence HTML](doc:html-reference pour plus d'informations lors de la création d'éléments de marketing.

3. Ajouter un code pour gérer les changements de prix

Le prix affiché sur vos pages de produits ou de panier peut changer en raison des variantes de produits, des changements de quantité, etc. Si votre message promotionnel Affirm s'affiche avant la mise à jour des prix, le message sera inexact. Pour continuer à mettre à jour les messages, implémentez cette fonction d'actualisation dans votre fonction de rappel des changements de prix :

affirm.ui.refresh();

Rechargement de la page

Si le prix du produit ou le message promotionnel Affirm s'affiche après le chargement de la page, ou si vous avez inclus la fonction d'actualisation ci-dessus de manière statique sur la page, intégrez-la dans la fonction de rappel affirm.ui.ready() . En procédant ainsi, on s'assure que la page n'appelle pas la fonction d'actualisation avant l'initialisation de Affirm.js .

affirm.ui.ready(function(){
    affirm.ui.refresh();
});

Mise à jour de prix

Lorsque le prix est mis à jour sur votre page, appelez la fonction d'actualisation dans la même fonction de rappel qui gère l'événement de changement de prix. Ajoutez des ID d'élément aux composants de messages promotionnels pour faciliter l'accès et la modification de leurs attributs. Notez que nous utilisons des exemples d'ID ci-dessous.

//Add to an existing callback that fires when the price updates
priceUpdateEventHandler(){
    changePriceHandler(newPrice);
}
 
function updateAffirmPromos(newPrice){
    //Update the wrapper elements' attributes in the DOM
    document.getElementById('affirmProductModal').setAttribute('data-amount',newPrice);
    document.getElementById('affirmLearnMore').setAttribute('data-amount',newPrice);
   
    //Call affirm.ui.refresh to re-render the promotional messaging componenets
    affirm.ui.refresh();
}

Détecter la fermeture modale

Lorsqu'un modal éducatif est fermé (non courant), vous pouvez détecter cet événement en utilisant le code suivant :

affirm.events.on('learnMore:close',function(){console.log('fired')});

📘

Le script ci-dessus n'a pas fonctionné pour mon commerçant.

Le même code, mais en remplaçant "learnMore" par "prequal", comme indiqué ci-dessous, a fonctionné.

affirm.events.on('prequal:close',function(){console.log('fired')});

Exemples

Consultez les exemples suivants pour savoir comment ajouter des composants de messages promotionnels à votre site :

Pour ajouter des messages de paiement mensuel et une modale de produit à votre page de produit :

<p class="affirm-as-low-as" data-page-type="product" data-amount="your_price_variable"></p>

Veillez à utiliser la variable de prix de votre page ou le montant du prix en cents USD (par exemple, 100 $ = 10 000) pour data-amount.

Pour ajouter des messages de paiement mensuel et une modale de produit à votre page de panier :

<p class="affirm-as-low-as" data-page-type="product" data-amount="your_price_variable"></p>

Veillez à utiliser la variable de prix de votre page ou le montant du prix en cents USD (par exemple, 100 $ = 10 000) pour data-amount.

Pour ajouter une modale de site à un lien textuel sur votre page d'accueil :

<a class="affirm-site-modal" data-page-type="homepage">En savoir plus</a>

Pour ajouter une fenêtre modale à une bannière :

<a class="affirm-site-modal" data-page-type="banner"><img src="https://cdn-assets.affirm.com/images/banners/300x50.png"></a>

Dans chaque élément HTML, veillez à inclure l'attribut donnée-page-type correspondant à la page où est placé ce composant de message promotionnel. L'attribut donnée-page-type vous permet de personnaliser les messages à l'avenir sans travail de développement. Par défaut, la pré-admissibilité est activée pour les messages promotionnels sur les pages de produits, mais vous pouvez collaborer avec votre responsable de la réussite client pour la modifier et configurer des personnalisations supplémentaires. Voir les liens ci-dessous pour des exemples de code supplémentaires.

Message de paiement mensuel avec pré-admissibilité (prix unique)

Message de paiement mensuel avec pré-admissibilité (prix unique affiché à plusieurs endroits)

Modal du site