AccueilCommencerSolutionsPlateformesIntégrations globales
DocsRecetteRéférence APIChangelogRéférence APIRecetteChangelog
AccueilCommencerSolutionsPlateformesIntégrations globalesSe connecter
Docs

Configurez Google Tag Manager

Découvrez comment configurer Google Tag Manager pour votre site afin de gérer le suivi, la publicité et d'autres fonctions marketing sur votre site.

Suggérer des modifications

Conditions préalables


Étapes

1. Télécharger le modèle personnalisé

  1. Téléchargez le fichier template.tpl depuis Github.

  2. Ouvrez Gestionnaire de balises Google.

  3. Cliquez sur l'onglet Modèles.

  4. Dans la section Modèles de balise, cliquez sur Nouveau.

    Dans l'onglet Modèles, une section Modèles de balises contient un bouton intitulé Nouveau.

  5. Cliquez sur l’icône à trois points pour développer le menu.

  6. Cliquez sur Importer.

    Option d'importation dans le menu

  7. Sélectionnez le fichier template.tpl que vous avez téléchargé depuis Github à l'étape 1.

  8. Cliquez sur Enregistrer.

2. Add a Tag

  1. Ouvrez Google Tag Manager pour votre espace de travail.

  2. Clique sur l'onglet Balises.

  3. Cliquez sur Nouveau.

    Dans l'onglet Balises, la section Balise comporte un bouton Nouveau.

  4. Cliquez sur la section Configuration des balises.

  5. Dans la section Personnalisée, cliquez sur Affirm.

  6. Cliquez sur la section Déclenchement.

  7. Sélectionnez Toutes les pages.

  8. Clique sur Ajouter.

    Toutes les pages sont sélectionnées et le bouton Ajouter est affiché.

  9. Cliquez sur Enregistrer pour sauvegarder la configuration de l'étiquette.

3. Configurer la clé API

  1. Dans la section Tags, cliquez pour ouvrir le tag.

  2. Cliquez sur la section Configuration des balises.

    Section de confirmation des balises avec les sous-sections Type de balise, Configuration Affirm, Bouton de paiement, Couleur du logo et Position.

  3. Dans la sous-section Configuration Affirm, ajoutez votre clé API publique dans le champ La clé API publique Affirm.

  4. Sélectionnez le type de clé API que vous utilisez :

    1. Environnement de test pour les essais.
    2. Production pour créer des prêts effectifs.

4. Configurer la messagerie promotionnelle

Vous pouvez ajouter des messages et des logos « à partir de » à votre site avec un minimum d’effort :

  • Message promotionnel : cela cible un élément sur une page.
  • Liste des messages promotionnels : Cette option est utile lorsque vous souhaitez cibler des éléments similaires sur une même page. Il doit y avoir le même nombre d’instances de classes dans le champ Élément cible que dans le champ Élément prix .
  • Logo : Cela affiche un logo n'importe où sur votre site.

Ajouter un message promotionnel

  1. Cliquez sur la sous-section « Messages promotionnels » .
  2. Cliquez sur Ajouter une ligne dans la ligne Message promotionnel .
  3. Dans le champ Élément cible, sélectionnez la classe HTML ou l'identifiant pour identifier l'emplacement où afficher le message promotionnel.
  4. Dans le champ Price Element , sélectionnez la classe HTML ou l’ID de l’élément qui comprend le prix.
  5. Sélectionnez un type de page pour indiquer où la messagerie promotionnelle doit s'afficher.
  6. Dans le champ Type Affirm, vous pouvez sélectionner soit :
    • Logo : Affiche le logo Affirm dans les messages promotionnels. Vous pouvez également choisir une couleur de logo.
    • Texte : Affiche « Affirm » comme texte dans les messages promotionnels.
  7. Sélectionnez l'option Position dans la cible pour indiquer la position du message promotionnel par rapport à l'élément cible.

Ajouter une liste de messages promotionnels

  1. Dans la sous-section Messages promotionnels, cliquez sur Ajouter une ligne dans la ligne Liste des messages promotionnels.
  2. Dans le champ Élément cible, sélectionnez la classe HTML pour déterminer où afficher le message promotionnel.
  3. Dans le champ Price Element, sélectionnez la classe HTML de l’élément qui comprend le prix.
  4. Sélectionnez un type de page pour indiquer où la messagerie promotionnelle doit s'afficher.
  5. Dans le champ Type Affirm, vous pouvez sélectionner soit :
    • Logo : Affiche le logo Affirm dans les messages promotionnels. Vous pouvez également choisir une couleur de logo.
    • Texte : Affiche « Affirm » comme texte dans les messages promotionnels.
  6. Sélectionnez l'option Position dans la cible pour indiquer la position des messages promotionnels par rapport à l’ élément cible.

5. Configurez les champs du formulaire de carte de crédit

Lorsque le client termine son paiement par Affirm, nous le renvoyons à votre page de paiement. À ce moment, une fonction de rappel de réussite est déclenchée et les détails de la carte de débit générée sont inclus dans les données de l'événement de rappel de réussite.

Pour configurer ce flux de caisse, vous devez :

  1. Stockez les renseignements de la carte virtuelle renvoyées par Affirm.
    1. Remplissez les champs masqués du formulaire de carte de crédit, afin qu'ils puissent être exploités par l'action « soumettre » standard, ou
    2. Effectuez immédiatement l'appel API pour tokeniser la carte en prévision de l'autorisation dans une étape ultérieure.
  2. Envoyez le formulaire de paiement en cours sur votre site (initié par l'utilisateur ou automatique).
    1. Le client doit cliquer sur le bouton « passer/finaliser/terminer la commande » pour terminer la commande, ou
    2. Soumettez automatiquement le formulaire de paiement une fois que le paiement Affirm a été confirmé.
  3. Mettez une autorisation en attente sur les fonds de la carte virtuelle.
    1. Utilisez la fonctionnalité existante de votre formulaire de paiement pour soumettre les détails de la carte de débit à votre passerelle de carte pour autorisation.
    2. Soumettez directement les renseignements de votre carte de débit à la passerelle de votre carte pour obtenir une autorisation lors de l'exécution, plutôt que d'utiliser le mécanisme existant de soumission des cartes pour autorisation.

6. Configurer la caisse

  1. Dans le champ Nom du commerçant , saisissez le nom du commerçant.
  2. Dans les sections suivantes, saisissez la classe HTML ou l'ID où les valeurs associées se trouvent sur la page de paiement :
    1. Articles. Remarque : le conteneur d'élément doit être un élément qui entoure les champs suivants.
    2. Facturation.
    3. Expédition.
  3. Dans la section Bouton de paiement, vous pouvez configurer un bouton pour la section Types de paiement de votre paiement :
  4. Dans le champ Élément cible, choisissez la classe HTML pour identifier où le bouton doit s'afficher.
  5. Dans le champ Description du paiement, vous pouvez personnaliser le message. Nous vous suggérons d'utiliser Paiements mensuels.
  6. Dans le champ suivant, vous pouvez choisir si Affirm apparaît comme logo dans le bouton.
  7. Dans le champ Largeur du logo, saisissez la largeur souhaitée pour l'affichage du logo, en pixels. N'ajoutez pas « px » au nombre (p. ex., pour une largeur de 200 pixels, entrez « 200 »).
  8. Dans le champ Couleur, sélectionnez une couleur de logo.
  9. Sélectionnez une option Position pour indiquer la position du message promotionnel par rapport à l'élément cible.
  10. Dans la section Sortie de carte, entrez la classe HTML ou identifiant avec les champs de formulaire de carte de crédit cachés correspondants.
  11. Dans les champs suivants, choisis la classe ou l'ID HTML où se trouve le montant :
    1. shippingAmount
    2. TaxAmount
    3. Montant total
  12. Dans le champ Submit Element , choisissez la classe ou l'ID HTML du bouton pour soumettre une commande.

7. Intégration

  1. Cliquez sur le nom du conteneur que vous êtes en train de modifier, par exemple :

  2. GTM-WFLMNVK

    Dans la fenêtre modale, copiez les extraits de code d'intégration pour l'en-tête et le corps, puis collez-les dans l'en-tête et le corps de votre page.

Installer Google Tag Manager. Le premier champ est pour le code HEAD et le deuxième champ est pour le code BODY.
  1. Pour plus d’informations, vous pouvez consulter le guide de démarrage rapide de Google.
  2. Testez l'intégration en fournissant à votre contact Affirm un numéro de carte de test qui peut être autorisé avec succès. Voir un exemple sur GitHub.

Mis à jour 10 days ago