Как добавить кнопку WhatsApp с отслеживанием GCLID на ваш сайт

Это руководство поможет вам добавить на свой сайт кнопку, открывающую чат WhatsApp. Если в URL-адресе (из Google Ads) присутствует параметр gclid, он будет включен в текст сообщения — это полезно для отслеживания лидов в рекламных кампаниях.

Что делает эта интеграция?

Отображает кнопку «Написать в WhatsApp» на вашей веб-странице.
Считывает параметр gclid из URL-адреса (если он присутствует).
Генерирует ссылку WhatsApp, включающую значение gclid в текст сообщения.
Динамически обновляет атрибут href кнопки.

Шаг 1: Добавьте HTML-кнопку

Разместите следующий HTML-код в том месте, где вы хотите, чтобы появилась кнопка WhatsApp:

<a id="wa-link" href="#" target="_blank" class="btn btn-success">Напишите в WhatsApp</a>

Эта кнопка будет обновлена позже с помощью JavaScript.

Шаг 2: Добавьте код JavaScript

Перед закрытием</body> Вставьте следующий скрипт в тег:

<script> function scriptToInclude(id, phone) { // 1. Read URL parameters const params = new URLSearchParams(window.location.search); const gclid = params.get('gclid'); // 2. Generate WhatsApp link const waBase = 'https://wa.me/' + phone; const text = 'Google Ads (gclid) '; const waLink = gclid ? `${waBase}?text=${encodeURIComponent(text + gclid)}` : waBase; // 3. Update the button href const linkEl = document.getElementById(id); if (linkEl) { linkEl.href = waLink; } } // Call the function with your parameters scriptToInclude('wa-link', '123456789'); </script>

Замените 123456789 на свой номер WhatsApp в международном формате без знака "+" и пробелов .

Использование функции генератора скриптов

Если вам необходимо динамически вставлять кнопки или требуется гибкость при работе на нескольких страницах, вы можете использовать эту функцию шаблона:

function generateWhatsAppHrefUpdateScript(id, 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>`; }

Пример использования:

document.write(generateWhatsAppHrefUpdateScript('wa-link', '7910000000'));

Краткое содержание

Этот метод помогает отслеживать лиды из Google Ads, передавая значение gclid в сообщение WhatsApp. Вы можете использовать эту настройку на любом сайте, который позволяет вставлять собственный JavaScript.