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

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

‍

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

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

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

ضع الكود HTML التالي حيث تريد ظهور زر WhatsApp:

‍

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

‍

سيتم تحديث هذا الزر لاحقًا عبر JavaScript.

‍

الخطوة 2: إضافة كود JavaScript

قبل الإغلاق</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 برقم WhatsApp الخاص بك بتنسيق دولي بدون "+" أو مسافات .

‍

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

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

‍

دالة  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;  })(); ` ; }

‍

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

‍

المستند .write(generateWhatsAppHrefUpdateScript( 'wa-link' , '7910000000' ));

‍

ملخص

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