كيفية إضافة زر WhatsApp مع تتبع GCLID إلى موقع الويب الخاص بك

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

‍

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

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

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

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

‍

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

‍

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

‍

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

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

‍

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');  

‍

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

‍

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

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

‍

دالة  generateWhatsAppHrefUpdateScript ( id, phone ) {   return  ` (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;  })(); ` ; }

‍

مثال على الاستخدام:

‍

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

‍

ملخص

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