إنشاء خدمة تتبع مكالمات بسيطة ، الجزء 1

ستنظر المقالة في أحد الخيارات الممكنة لتنفيذ تتبع المكالمات على الموقع. تمت كتابة هذه المادة للأغراض التعليمية فقط ولا تحمل هدفًا لاستبدال الخدمات المتخصصة الموجودة التي توفر خدمة الاتصال عن بُعد.

المتطلبات الوظيفية


  1. يجب أن توفر الخدمة القدرة على استبدال الأرقام (الأرقام) حسب مصدر الانتقال إلى الموقع - الانتقال من محركات البحث ، والانتقال إلى الإعلان ، مرور الروابط مع علامات utm.
  2. يجب أن تقوم الخدمة بإصلاح الرقم المعروض لزائر الموقع وعرض هذا الرقم في زيارة أخرى.
  3. عند بدء مكالمة على الرقم المعروض ، يجب أن تبدأ الخدمة في إنشاء حدث في Google Analytics.

ميكانيكا عامة


عندما تذهب إلى الموقع ، فإننا نحدد مصدر الانتقال ، ثم نتحقق مما إذا كان الرقم مخصص لهذا الزائر. إذا زار زائر الموقع لأول مرة ، فسنخصص له معرفًا فريدًا ، وبعد ذلك نقوم بتعيين رقم له من مجموعة الأرقام المتعلقة بمصدر الإحالة هذا. في المستقبل ، عندما يعود الزائر إلى الموقع ، نعرض الرقم المعين له مسبقًا.

أود التركيز على سجل المكالمات. يعد استبدال الرقم وتعيينه للمستخدم مشكلة فنية ، والشيء الرئيسي هو أن تكون قادرًا على مقارنة مكالمة محددة والرقم المخصص حاليًا للمستخدم. إذا كان الاتصال الهاتفي الذي تستخدمه يسمح لك بتلقي تفاصيل باستمرار عن المكالمات الجارية ، ثم معرفة لحظة الاتصال برقم معين والحصول على معلومات حول الرقم الذي تم عرضه في تلك اللحظة على الموقع الإلكتروني للمستخدم ، فمن الممكن بدء إنشاء حدث في Google Analytics وربطه مع جمهورية كوريا.

هيكل


  1. ct-server.ru - سيتم وضع برنامج نصي لخدمة الويب قابل للتنفيذ هنا ، وقاعدة بيانات لتخزين إعدادات الأرقام وتسجيل الزوار ؛
  2. refer-to-site-with-ct-code.ru - على هذا الموقع ، سنحاكي الانتقال من شبكة البحث ؛
  3. site- with-ct-code.ru - الموقع الذي سيتم وضع البرنامج النصي لاستبدال الأرقام فيه.

لنبدأ


سيتم تنفيذ المثال أدناه على الخادم المحلي.

قم بإنشاء موقع مضيف ظاهري- مع-ct-code.ru ، نضع فيه ملف index.html بالمحتويات التالية.

<!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> <title>CT</title> <script src="http://ct-server.ru/script.js"></script> <script> //  google id document.cookie = '_ga=GA1.2.1212121212.1212121212; expires=Thu, 18 Dec 2077 12:00:00 UTC; path=/'; </script> </head> <body> <p id='calltracking'>79000000000</p> </body> </html> 

كما ترى من المثال ، نقوم بتوصيل برنامج نصي خارجي ct-server.ru/script.js ، والذي " سيتواصل " بين site-with-ct-code.ru و ct-server.ru ، بالإضافة إلى التفاعل مع شجرة DOM الخاصة بالموقع الموقع - مع- cct.ru. سيتم استبدال الرقم بمعرف العنصر - "تتبع الصوت".

قم الآن بإنشاء موقع refer-to-site-with-ct-code.ru ، والذي سيحتوي على رابط إلى site-with-ct-code.ru للحصول على القدرة على التحقق من رقم التعريف الشخصي عند الانتقال من المرجع.

 <!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> <title>CT</title> </head> <body> <a href="http://site-with-ct-code.ru"></a> </body> </html> 

بعد ذلك ، سنرفع المضيف ct-server.ru ، والذي سيكون له الهيكل التالي:

index.php - ملف البرنامج النصي القابل للتنفيذ الذي سيتلقى الطلبات اللاحقة من site-with-ct-code.ru والتفاعل مع قاعدة البيانات ؛

script.js - ملف البرنامج النصي الذي سيتم توصيله على المواقع التي سيتم فيها إجراء استبدال الأرقام.

قاعدة بيانات


سنحتاج لإنشاء طبقين. في جدول ct ، سنقوم بتخزين الأرقام والإعدادات لعرضها ، في جدول الأرقام سنقوم بتسجيل عرض الأرقام.

 CREATE TABLE `ct` ( `id` int(11) NOT NULL, `phone` varchar(200) NOT NULL, `refer` varchar(200) NOT NULL, `utm` varchar(200) NOT NULL, `host` varchar(200) NOT NULL, `ga` varchar(200) NOT NULL, `login` varchar(200) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; ALTER TABLE `ct` ADD PRIMARY KEY (`id`), ADD UNIQUE KEY `id` (`id`); ALTER TABLE `ct` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1; 

شرح صغير للحقول المضافة:

رقم الهاتف - رقم الهاتف
الرجوع - مصدر الانتقال ؛
utm - رابط إلى الصفحة التي يجب أن يتم فيها استبدال الأرقام ؛
مضيف - الموقع الذي يوجد عليه البرنامج النصي لاستبدال الأرقام ؛
رقم تعريف عداد Google Analytics؛
تسجيل الدخول - تسجيل دخول صاحب الرقم.

ملء لوحة مع البيانات.

 INSERT INTO `ct` (`id`, `phone`, `refer`, `utm`, `host`, `ga`, `login`) VALUES (2, '78000000001', '', 'http://site-with-ct-code.ru/?utm_medium=cpc', 'http://site-with-ct-code.ru', 'UA-12345678-1', ''), (3, '78000000002', 'http://refer-to-site-with-ct-code.ru/', 'http://site-with-ct-code.ru/', 'http://site-with-ct-code.ru', 'UA-12345678-1', ''), (4, '78000000003', 'http://refer-to-site-with-ct-code.ru/', 'http://site-with-ct-code.ru/', 'http://site-with-ct-code.ru', 'UA-12345678-1', ''), (5, '78000000004', 'http://refer-to-site-with-ct-code.ru/', 'http://site-with-ct-code.ru/', 'http://site-with-ct-code.ru', 'UA-12345678-1', ''), (6, '78000000005', '', 'http://site-with-ct-code.ru/', 'http://site-with-ct-code.ru', 'UA-12345678-1', ''); 

صورة

الآن إنشاء لوحة الأرقام.

 CREATE TABLE `numbers` ( `id` int(11) NOT NULL, `phone` varchar(200) DEFAULT NULL, `ct_user` varchar(200) DEFAULT NULL, `refer` varchar(200) DEFAULT NULL, `gid` varchar(200) DEFAULT NULL, `page` varchar(200) DEFAULT NULL, `time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=utf8; ALTER TABLE `numbers` ADD PRIMARY KEY (`id`), ADD UNIQUE KEY `id` (`id`), ALTER TABLE `numbers` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;COMMIT; 

في هذه اللوحة ، سنسجل أي زائر ، وأي عدد وفي أي وقت يتم عرضه على الموقع. في المستقبل ، يمكن مقارنة هذه البيانات بسجل المكالمات لبدء الإجراء المستهدف - إرسال حدث إلى Google Analytics ، وإنشاء عميل في CRM ، وإرسال بريد إلكتروني ، إلخ.

رقم الهاتف
ct_user - معرف الزائر ؛
الرجوع - مصدر الانتقال ؛
gid - ملف تعريف الارتباط في Google Analytics
الصفحة - الصفحة التي يتم عرض الرقم عليها ؛
الوقت - رقم وقت العرض.

إنشاء معالج طلب


سيتم التفاعل بين خدمة الويب ct-server.ru والموقع الذي يستضيف البرنامج النصي من خلال طلبات POST عبر XHR (XMLHttpRequest).

دعنا نفتح الملف ct-server.ru/index.php الذي تم إنشاؤه في وقت سابق ونضيف شيكًا لاستلام البيانات من المضيفين المسموح بهم ، وفي حالتنا فهو site-with-ct-code.ru و site-with-ct-code2.ru وموقع مع -ct-code3.ru .

 <?php if (isset($_SERVER["HTTP_ORIGIN"]) === true) { $host = $_SERVER["HTTP_ORIGIN"]; //   $allowHosts = array("http://site-with-ct-code.ru", "http://site-with-ct-code2.ru", "http://site-with-ct-code3.ru"); if (in_array($host, $allowHosts, true) === true) { header('Access-Control-Allow-Origin: ' . $host); header('Access-Control-Allow-Credentials: true'); header('Access-Control-Allow-Methods: POST'); header('Access-Control-Allow-Headers: Content-Type'); //    post-      } if ($_SERVER["REQUEST_METHOD"] === "OPTIONS") { exit; } } ?> 

نكتب في القيم المتغيرة لطلبات POST التي جاءت من site-with-ct-code.ru

 $phone = $_POST["phone"]; $ct_user = $_POST["ct_user"]; $gid = $_POST["gid"]; $refer = $_POST["ref"]; $page = $_POST["page"]; 

لدى Cook _ga النموذج _ga = GA1.2.1212121212.121212121212 ، وسننقله إلى النموذج "1212121212.121212121212".

 if ($gid) { $pos = strpos($gid, '.', strpos($gid, '.') + 1); $gid = substr($gid, $pos + 1); } 

سنقوم بإنشاء اتصال بقاعدة البيانات حيث أنشأنا جداولنا من قبل.

 $conn = new mysqli("localhost", "root", "", "calltracking"); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } 

سيتم التفاعل مع خدمة الويب من خلال طريقتين - get_num_first و get_num .

يتم استدعاء طريقة get_num_first عندما يتفاعل الزائر أولاً مع الموقع للحصول على رقم من خلال الاختيار من قاعدة البيانات وفقًا للمعايير - البريد ، المرجع ، utm ، المضيف. إذا كانت نتيجة التحديد تُرجع قيمة ، فإننا نعرض رقم الهاتف.

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

 if ($_POST['method'] == 'get_num_first') { $sql = "SELECT * FROM `ct` where `host` = '" . $host . "' and `refer` = '" . $refer . "' and `utm` = '" . $page . "' ORDER BY RAND() LIMIT 1 "; $result = $conn->query($sql); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { print_r($row["phone"]); $event = file_get_contents('https://www.google-analytics.com/collect?v=1&tid=UA-12345678-1&cid=' . $gid . '&t=event&ec=GetNumber&ea=number&z=' . $row["phone"] . ''); } } else { //echo "0"; $sql = "SELECT * FROM `ct` where `host` = '" . $host . "' and `refer` = '" . $refer . "' ORDER BY RAND() LIMIT 1 "; $result = $conn->query($sql); print_r($row["phone"]); $event = file_get_contents('https://www.google-analytics.com/collect?v=1&tid=UA-12345678-1&cid=' . $gid . '&t=event&ec=GetNumber&ea=number&z=' . $row["phone"] . ''); } } 

طريقة get_num مطلوبة لتسجيل الإدخالات في جدول الأرقام.

 else if ($_POST['method'] == 'get_num') { $sql = "INSERT INTO `numbers` (`phone`, `ct_user`, `gid`, `refer`,`page`) VALUES ( '" . $phone . "', '" . $ct_user . "', '" . $gid . "', '" . $refer . "', '" . $page . "');"; $result = $conn->query($sql); $sql = "SELECT * FROM `numbers` where `ct_user` = '" . $ct_user . "' ORDER BY `id` DESC LIMIT 1 "; $result = $conn->query($sql); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { print_r($row["phone"]); $event = file_get_contents('https://www.google-analytics.com/collect?v=1&tid=UA-12345678-1&cid=' . $gid . '&t=event&ec=ShowNumber&ea=number&z=' . $row["phone"] . ''); } } else { //echo "0"; } } $conn->close(); 

النصي استبدال الرقم


بعد ذلك ، سننتقل إلى البرنامج النصي ct-server.ru/script.js ، والذي نتصل به على site-with-ct-code.ru

للبدء ، دعنا ننشئ وظيفتين - setcookie لإنشاء و getcookie لقراءة ملفات تعريف الارتباط. سنستخدمها لتسجيل والحصول على معرف ملف تعريف الارتباط للمستخدم ورقم الهاتف.

 //  function setcookie(phone, value, expires, path, domain, secure) { document.cookie = phone + "=" + escape(value) + (expires ? "; expires=" + new Date(expires) : "") + (path ? "; path=" + path : "") + (domain ? "; domain=" + domain : "") + (secure ? "; secure" : ""); } //  function getcookie(phone) { var cookie = " " + document.cookie; var search = " " + phone + "="; var setStr = null; var offset = 0; var end = 0; if (cookie.length > 0) { offset = cookie.indexOf(search); if (offset != -1) { offset += search.length; end = cookie.indexOf(";", offset); if (end == -1) { end = cookie.length; } setStr = unescape(cookie.substring(offset, end)); } } return setStr; } 

بعد ذلك ، قم بإضافة وظيفة makeid لإنشاء معرف للمستخدم.

 // id  function makeid(length) { var result = ""; var user_id = "abcdefghijklmnopqrstuvwxyz0123456789"; var user_idLength = user_id.length; for (var i = 0; i < length; i++) { result += user_id.charAt(Math.floor(Math.random() * user_idLength)); } return result; } 

لنقم الآن بإنشاء دالة لإنشاء ملفات تعريف ارتباط تحتوي على معرف مستخدم مكون من 33 رقمًا.

 // id  function generateuser_id() { var ct_user_id = makeid(33); setcookie("ct_user", ct_user_id, new Date().getTime() + 60 * 60 * 1000); //  } 

يتم تخزين ملف تعريف الارتباط ct_user الناتج لمدة ساعة واحدة.

ننتقل إلى إنشاء طلب للحصول على رقم من خلال الأسلوب get_num_first . تتم كتابة الرقم الناتج من ct-server.ru في ملف تعريف الارتباط لمدة ساعة واحدة ونقوم بإجراء أول استبدال للرقم على الصفحة بمعرف العنصر.

 //    ,  ,       id  function getNumberFirstTime() { var method = "get_num_first"; var ct_user = getcookie("ct_user"); var gid = getcookie("_ga"); var ref = document.referrer; var host = window.location.origin; var page = document.location.href; var xhr = new XMLHttpRequest(); var body = "&method=" + encodeURIComponent(method) + "&page=" + encodeURIComponent(page) + "&ct_user=" + encodeURIComponent(ct_user) + "&ref=" + encodeURIComponent(ref) + "&host=" + encodeURIComponent(host) + "&gid=" + encodeURIComponent(gid); xhr.open("POST", "http://ct-server.ru", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.withCredentials = true; xhr.send(body); xhr.onreadystatechange = function() { //console.log(xhr.responseText); var t = xhr.responseText; document.getElementById("calltracking").innerHTML = t; setcookie("phone", t, new Date().getTime() + 60 * 60 * 1000); //  }; } 

سننشئ وظيفة من شأنها أن ترسل بشكل دوري إلى جانب ct-server.ru قيم الرقم المعروض ، معرف المستخدم ، عنوان الصفحة ، قيمة ملف تعريف الارتباط google analytics ، مصدر الإحالة.

 function getNumberPeriodically() { var method = "get_num"; var ct_user = getcookie("ct_user"); var phone = getcookie("phone"); var gid = getcookie("_ga"); var ref = document.referrer; var page = document.location.href; var host = window.location.origin; var xhr = new XMLHttpRequest(); var body = "&method=" + encodeURIComponent(method) + "&page=" + encodeURIComponent(page) + "&ct_user=" + encodeURIComponent(ct_user) + "&ref=" + encodeURIComponent(ref) + "&host=" + encodeURIComponent(host) + "&phone=" + encodeURIComponent(phone) + "&gid=" + encodeURIComponent(gid); xhr.open("POST", "http://ct-server.ru", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.withCredentials = true; xhr.send(body); xhr.onreadystatechange = function() { //console.log(xhr.responseText); var t = xhr.responseText; //document.getElementById('calltracking').innerHTML = t; }; } 

في النهاية ، نضيف وظيفة sendToCalltracking ، التي تتحقق من وجود رقم هاتف ملف تعريف الارتباط ومعرف المستخدم.

 function sendToCalltracking() { var ggg = getcookie("ct_user"); var ccc = getcookie("phone"); var gac = getcookie("_ga"); if ( typeof ggg === "undefined" || ggg === null || ccc === "undefined" || ccc === null || ccc.length < 1 || ggg.length < 1 || ccc === "" || ggg === "" ) { //console.log('false'); generateuser_id(); getNumberFirstTime(); } else { //console.log('true'); document.getElementById("calltracking").innerHTML = ccc; getNumberPeriodically(); } } 

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

 var myTimer = setTimeout(sendToCalltracking, 500); //        setInterval(sendToCalltracking, 1 * 60 * 1000); 

صورة

إذا تم حذف ملفات تعريف الارتباط أثناء العملية التالية ، فستعين الوظيفة وظيفة جديدة للزائر وفقًا للاختيار المستلم حسب المضيف والمصدر. بالإضافة إلى ذلك ، من الممكن كتابة القيم المستلمة إلى متصفح localStorage.

صورة

مرة واحدة في الدقيقة ، سيرسل البرنامج النصي قيمة رقم ملف تعريف الارتباط ومعرف المستخدم مشيرًا إلى الصفحة التي تم تطبيقه عليها دون إعادة تحميلها. من المعلوم أنه سيتم وضع البرنامج النصي في جميع صفحات المجال.

صورة

في المقالة التالية ، سنناقش تطوير واجهة بسيطة لإضافة الأرقام وتكوينها.

Source: https://habr.com/ru/post/ar473372/


All Articles