كيفية إضافة زر واتساب مع تتبع GCLID إلى موقعك الإلكتروني

22.8.2025

سيساعدك هذا الدليل على إضافة زر إلى موقعك الإلكتروني لفتح محادثة واتساب. إذا كان مُعامل gclid موجودًا في عنوان URL (من إعلانات جوجل)، فسيتم تضمينه في نص الرسالة - وهو أمر مفيد لتتبع العملاء المحتملين لحملاتك الإعلانية

‍

‍ما يفعله هذا التكامل

يعرض زر "الكتابة إلى واتساب" على صفحة الويب الخاصة بك.
يقرأ معلمة gclid من عنوان URL (إن وجدت).
يقوم بإنشاء رابط واتساب يتضمن قيمة gclid في نص الرسالة.
يقوم بتحديث رابط الزر بشكل ديناميكي.

الخطوة 1: إضافة زر HTML

ضع كود HTML التالي في المكان الذي تريد أن يظهر فيه زر واتساب:

‍

<a id="wa-link" href="#" target="_blank" class="btn btn-success">اكتب إلى واتساب

‍

سيتم تحديث هذا الزر لاحقًا باستخدام جافا سكريبت.

‍

الخطوة الثانية: أضف كود جافا سكريبت

قبل الإغلاق</body> قم بإدراج النص البرمجي التالي في الوسم:

‍

<script>
  دالة scriptToInclude(id, phone) {
    // 1. قراءة معلمات عنوان URL
    const params = new URLSearchParams(window.location.search);
    const gclid = params.get('gclid');

    // 2. إنشاء رابط واتساب
    const waBase = 'https://wa.me/' + phone;
    const text = 'إعلانات جوجل (gclid)';
    const waLink = gclid ? `${waBase}?text=${encodeURIComponent(text + gclid)}` : waBase;

    // 3. تحديث رابط الزر
    const linkEl = document.getElementById(id);
    if (linkEl) {
      linkEl.href = waLink;
    }
  }

  // استدعاء الدالة مع المعلمات
  scriptToInclude('wa-link', '123456789');
</script>

‍

استبدل الرقم 123456789 برقم واتساب الخاص بك بالصيغة الدولية بدون علامة "+" أو مسافات.

‍

استخدام وظيفة مولد النصوص البرمجية

إذا كنت تقوم بإدراج أزرار بشكل ديناميكي أو تحتاج إلى مرونة عبر صفحات متعددة، يمكنك استخدام وظيفة القالب هذه:

‍

دالة 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 = 'إعلانات جوجل (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'));

‍

ملخص

تساعدك هذه الطريقة على تتبع العملاء المحتملين من إعلانات جوجل عن طريق تمرير قيمة gclid إلى رسالة واتساب. يمكنك استخدام هذا الإعداد على أي موقع يسمح بإضافة جافا سكريبت مخصصة.

اقرأ المزيد من الأخبار