Démarrage rapide : créez un badge et installez-le sur votre site Web

1. Sélectionnez le style

    




2. Sélectionnez une cote minimale à afficher

 

 px Entrez une valeur entre 40 px et 200 px

4. Installez le code généré à droite →

Options avancées

900 x 60

Code HTML

Copiez-collez ce code HTML pour chaque véhicule d’occasion à l’endroit où vous souhaitez afficher le badge. Changez le NIV et le prix au besoin.

<span data-cg-vin="1GNDT13W81K248136" data-cg-price="12300"></span>

Code Javascript

Copiez-collez ce code UNE FOIS SEULEMENT avant la balise fermante body.

<script>
  var CarGurus = window.CarGurus || {}; window.CarGurus = CarGurus;
  CarGurus.DealRatingBadge = window.CarGurus.DealRatingBadge || {};


(function() {
    var script = document.createElement('script');
    script.src = "https://static.cargurus.com/js/api/fr_CA/1.0/dealratingbadge.js";
    script.async = true;
    var entry = document.getElementsByTagName('script')[0];
    entry.parentNode.insertBefore(script, entry);
})();
</script>

Vous avez besoin d'aide?

Consultez la section Dépannage ou contactez-nous à dealerhost_support@cargurus.com

Dépannage

1. Comment effectuer du débogage?

Vous pouvez activer le drapeau de débogage et vérifier dans les outils de développeur du navigateur si des messages ou des erreurs apparaissent. Pour activer le drapeau de débogage, modifiez cette propriété dans le code javascript : CarGurus.DealRatingBadge.options.debug = true;

Tout message de console provenant de notre script commence par le texte suivant : CarGurus.DealRatingBadge.

2. Les badges ne s’affichent pas

Par défaut, les badges s’affichent pour les véhicules d’occasion qui obtiennent la cote Bonne affaire ou mieux. Vous pouvez changer la valeur par défaut en modifiant le paramètre CarGurus.DealRatingBadge.options.minRating . Le script placera alors des badges pour les affaires qui sont égales ou meilleures que la valeur de minRating.

Les valeurs possibles pour le paramètre minRating sont : GREAT_PRICE, GOOD_PRICE et FAIR_PRICE. Aucun badge ne sera affiché pour les véhicules qui ne répondent pas à la cote d’affaires minimale.

Autres éléments à vérifier :

  • Assurez-vous qu’il n’y a aucune erreur javascript dans les outils de développeur du navigateur.
  • Assurez-vous que les balises HTML span sont bien formées, que leurs attributs data-cg correspondants comportent un NIV et un prix valides, et qu’elles ne sont pas cachées dans le DOM. Voici un exemple :
        <span data-cg-vin="1GNDT13W81K248136" data-cg-price="12300"></span>
    
  • Assurez-vous que la balise script apparaît une fois, au bas de la page, avant la balise fermante </body>.
  • Assurez-vous que notre API est invoquée en ouvrant l’onglet de réseau des outils de développeur du navigateur et en recherchant une requête dealRatingREquest.action.

3. Les dimensions du badge sont incorrectes

Pour STYLE1 ou STYLE2, vous pouvez redimensionner le badge grâce à la propriété CarGurus.DealRatingBadge.options.defaultHeight. Le badge sera redimensionné proportionnellement à n’importe quelle hauteur que vous avez définie.

BANNER1, BANNER2, BANNER3, BANNER4 et BANNER5 sont de format fixe et ne devraient être utilisées que lorsque nécessaire.

4. Comment puis-je modifier l’apparence du badge?

Notre contenant de badge comporte la classe CSS cg-dealrating-badge.

STYLE1 et STYLE2 sont des images transparentes. Vous pouvez ajouter une couleur ou un remplissage d’arrière-plan, et d’autres propriétés CSS au contenant.



Si vous avez d’autres questions, contactez dealerhost_support@cargurus.com

Instructions détaillées

1. Installez le SDK Javascript

Copiez-collez le code suivant à la fin de votre page HTML, juste avant la balise </body>


<script>
  CarGurus = window.CarGurus || { DealRatingBadge: { } };
(function() {
    var script = document.createElement('script');
    script.src = "https://static.cargurus.com/js/api/fr_CA/1.0/dealratingbadge.js";
    script.async = true;
    var entry = document.getElementsByTagName('script')[0];
    entry.parentNode.insertBefore(script, entry);
})();
</script>

2. Définissez les paramètres fictifs sur votre page, là où le badge devrait apparaître

Le badge des cotes d’affaires CarGurus balaiera votre document et remplacera toute balise <span> doté des attributs data-cg-vin et data-cg-price par le badge correspondant, s’il existe.

<span data-cg-vin="1GNDT13W81K248136"
data-cg-price="12300"
data-cg-badge-style="STYLE1"
data-cg-height="60"></span>

Les attributs en gras sont obligatoires.

L’attribut data-cg-badge-style est optionnel. Lorsqu’utilisé, il définit le style de badge pour le véhicule. Si l’attribut n’est pas défini, la page utilisera le style CarGurus.DealRatingBadge.options.style mentionné ci-dessous.

L’attribut data-cg-height, lorsqu’il est utilisé, définit la hauteur du badge en pixels.

Nous recommandons une hauteur plus petite pour la page des résultats d’annonces, et une hauteur plus grande pour les pages des détails du véhicule.

3. Vérifiez que le badge fonctionne correctement

Après avoir implémenté le code sur votre site Web, les badges de cotes d’affaires CarGurus devraient s’afficher sur vos pages. Voici à quoi cela ressemble :

Exemple de badge CarGurus

4. Utilisation avancée

La badge de cotes d’affaires CarGurus est chargée automatiquement et récupère les cotes d’affaires après le chargement de la page. Il continue de placer de nouvelles cotes si les véhicules de la page changent . Si vous souhaitez contrôler le processus de placement des cotes, vous pouvez désactiver l’actualisation en temps réel par l’entremise du hachage d’options ou en appelant la fonction API suivante :

CarGurus.DealRatingBadge.disableLiveUpdates();

Puis, pour récupérer les badges des cotes manuellement, vous pouvez utiliser la fonction API suivante :

CarGurus.DealRatingBadge.run();

Pour activer l’actualisation en temps réel de nouveau, vous pouvez appeler

CarGurus.DealRatingBadge.enableLiveUpdates();
5. Personnalisation de la vignette active

Vous pouvez définir les options de façon globale, ou passer un objet d’options à la fonction run. Pour définir les options de façon globale, déclarez la variable suivante avec au moins un ensemble de clés d’option :

CarGurus.DealRatingBadge.options = { minRating: "FAIR_PRICE", style: "STYLE2" };

Pour passer un objet d’options personnalisé à la fonction run et l’appliquer uniquement à cette instance, passez-le comme paramètre à la fonction.

CarGurus.DealRatingBadge.run({ minRating: "FAIR_PRICE", style: "STYLE2" });

Si aucun paramètre n’est passé, les options globales ont préséance, si elles sont définies.


Toutes les options possibles sont présentées ci-dessous :

Clé d’option Type Valeur par défaut Description
style chaîne de caractères STYLE1 Style de badge par défaut si data-cg-badge-style n’est pas défini pour un span.

Les styles suivants sont pris en charge :

  • STYLE1 - hauteur par défaut de 40 px
  • STYLE2 - hauteur par défaut de 60 px
  • BANNER1 - taille fixe de 900 x 60 pixels
  • BANNER2 - taille fixe de 900 x 42 pixels
  • BANNER3 - taille fixe de 748 x 42 pixels
  • BANNER4 - taille fixe de 550 x 42 pixels
  • BANNER5 - taille fixe de 374 x 42 pixels
Consultez l’encadré des styles de badges dans le coin supérieur droit de la page
showContactForm booléen true Lorsque réglé à true, un formulaire de contact s’affiche dans la page des détails sur le véhicule afin que le consommateur puisse envoyer ses coordonnées au concessionnaire
minRating chaîne de caractères GOOD_PRICE Définit la cote d’affaires minimale à afficher. Peut être une des valeurs suivantes :

  • GREAT_PRICE
  • GOOD_PRICE
  • FAIR_PRICE
defaultHeight nombre entier 40 | 60 selon le style La hauteur en pixels que devrait avoir le badge, si la balise span ne comporte pas de propriété data-cg-height. Cette propriété est ignorée pour les styles BANNER1, BANNER2, BANNER3, BANNER4 et BANNER5.
live booléen true Lorsque réglé à true, l’actualisation en temps réel est activée chaque fois que de nouveaux véhicules sont ajoutés à la page sans que celle-ci ne soit actualisée
liveIntervalMS nombre entier 500 Fréquence d’actualisation en millisecondes si l’option d’actualisation en temps réel est activée
debug booléen false Lorsque réglé à true, active la journalisation du débogage sur la console côté client. Il est préférable de ne pas activer cette option en mode production.
Styles de badges
STYLE1

STYLE2

Vous avez besoin d'aide?

dealerhost_support@cargurus.com