.webp)
Ce guide vous aidera à ajouter à votre site web un bouton qui ouvre une conversation WhatsApp. Si un paramètre gclid est présent dans l'URL (provenant de Google Ads), il sera inclus dans le texte du message, ce qui est utile pour le suivi des prospects générés par vos campagnes publicitaires
Que fait cette intégration ?
- Affiche un bouton « Écrire sur WhatsApp » sur votre page web.
- Lit le paramètre gclid à partir de l'URL (s'il est présent).
- Génère un lien WhatsApp incluant la valeur gclid dans le texte du message.
- Met à jour dynamiquement l'attribut href du bouton.
Étape 1 : Ajouter le bouton HTML
Insérez le code HTML suivant à l'endroit où vous souhaitez que le bouton WhatsApp apparaisse :
<a id="wa-link" href="#" target="_blank" class="btn btn-success">Écrire sur WhatsApp
Ce bouton sera mis à jour ultérieurement via JavaScript.
Étape 2 : Ajouter le code JavaScript
Avant la fermeture</body> balise, insérez le script suivant :
<script>
function scriptToInclude(id, phone) {
// 1. Lire les paramètres de l'URL
const params = new URLSearchParams(window.location.search);
const gclid = params.get('gclid');
// 2. Générer le lien WhatsApp
const waBase = 'https://wa.me/' + phone;
const text = 'Google Ads (gclid)';
const waLink = gclid ? `${waBase}?text=${encodeURIComponent(text + gclid)}` : waBase;
// 3. Mettre à jour l'attribut href du bouton
const linkEl = document.getElementById(id);
if (linkEl) {
linkEl.href = waLink;
}
}
// Appeler la fonction avec vos paramètres
scriptToInclude('wa-link', '123456789');
</script>
Remplacez 123456789 par votre propre numéro WhatsApp au format international sans « + » ni espaces.
Utilisation de la fonction de génération de scripts
Si vous insérez des boutons de manière dynamique ou si vous avez besoin de flexibilité sur plusieurs pages, vous pouvez utiliser cette fonction de modèle :
fonction generateWhatsAppHrefUpdateScript(id, téléphone) {
return `
<script>
(function() {
const params = new URLSearchParams(window.location.search);
const gclid = params.get('gclid');
const waBase = 'https://wa.me/' + '${phone}';
const text = 'Google Ads (gclid) ';
const waLink = gclid ? waBase + '?text=' + encodeURIComponent(text + gclid) : waBase;
const linkEl = document.getElementById('${id}');
if (linkEl) linkEl.href = waLink;
})();
</script>
`;
}
Exemple d'utilisation :
document.write(generateWhatsAppHrefUpdateScript('wa-link', '7910000000'));
Résumé
Cette méthode vous permet de suivre les prospects issus de Google Ads en intégrant la valeur gclid dans le message WhatsApp. Vous pouvez utiliser cette configuration sur n'importe quel site autorisant l'insertion de code JavaScript personnalisé.
