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 →
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>
Consultez la section Dépannage ou contactez-nous à dealerhost_support@cargurus.com
Dépannage
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
.
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 attributsdata-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
.
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.
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
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 :
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 :
|
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 :
|
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. |