Geekly articles weekly

创建简单的呼叫跟踪服务，第1部分

本文将考虑在站点上实施呼叫跟踪的可能选项之一。 本资料纯粹出于教育目的而编写，并不具有取代提供呼叫跟踪服务的现有专业服务的目的。

功能要求


  1. 该服务应提供按网站转换源（从搜索引擎转换，广告转换，带有utm标签的点击链接）替换数字（数字）的功能。
  2. 服务应将显示的号码固定给站点访问者，并在下次访问时显示该号码。
  3. 拨打显示号码的电话时，服务必须启动Google Analytics（分析）中的事件创建。

通用力学


当您访问该站点时，我们将确定转换的来源，然后检查是否已将数字分配给该访问者。 如果访客首先访问了该站点，则我们为他分配一个唯一的标识符，然后我们从与该引荐来源相关的数字池中为他分配一个数字。 将来，当访客返回该站点时，我们会更早显示分配给他的号码。

我想专注于通话记录。 替换号码，将其分配给用户是一个技术问题，主要的事情是能够比较特定的呼叫和当前分配给用户的号码。 如果所使用的电话允许您连续接收正在进行的呼叫的详细信息，然后知道拨打特定号码的时刻，并且知道那个时刻在哪个用户的站点上显示了哪个号码的信息，则可以在Google Analytics（分析）中启动事件的创建并将其与ROK关联。

结构形式


  1. ct-server.ru-可执行的Web服务脚本将放置在此处，该数据库是用于存储房间设置和记录访客的数据库；
  2. Refer-to-site-with-ct-code.ru-在此站点上，我们将模拟从搜索网络的过渡；
  3. site-with-ct-code.ru-将放置数字替换脚本的网站。

让我们开始吧


下面的示例将在本地服务器上实现。

创建一个虚拟主机site-with-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树进行交互site-with-ct-code.ru 。 该数字将替换为元素的ID-“ calltracking”。

现在创建一个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的Post请求并与数据库进行交互；

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-链接到应该进行数字替换的页面；
主机-数字替换脚本所在的网站；
ga-Google Analytics（分析）计数器的ID；
login-号码所有者的登录名。

用数据填充板。

 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-访问者ID；
参考-转换的来源；
gid-Google Analytics（分析）cookie
page-显示号码的页面；
时间-数字显示时间。

创建一个请求处理程序


ct-server.ru Web服务与托管脚本的站点之间的交互将通过跨域XHR（XMLHttpRequest）POST请求完成。

让我们打开之前创建的文件ct-server.ru/index.php，并添加检查以从允许的主机接收数据，在本例中为site-with-ct-code.ru ， site-with-ct-code2.ru和site-with -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; } } ?>

我们写入来自site-with-ct-code.ru的POST请求的变量值

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

Cook _ga的格式为_ga = GA1.2.1212121212.12.1212121212，我们将其设置为“ 1212121212.121212121121212”。

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

与Web服务的交互将通过两种方法-get_num_first和get_num 。

当访问者首次与站点进行交互以通过根据条件（邮件，引荐来源网址，utm，主机）从数据库中选择一个号码时，将调用get_num_first方法。 如果选择结果返回一个值，那么我们将显示电话号码。

此外，我们通过Google Measurement Protocol将事件发送到Google Analytics（分析）。 相同的方法适用于跟踪脱机操作，将来可以在比较号码表中的呼叫日志和号码日志时使用。

 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方法才能在numbers表中记录条目。

 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和用于读取cookie的getcookie 。 我们将使用它们来记录并获取用户的cookie ID和电话号码。

 //  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。

 // 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的cookie。

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

生成的ct_user cookie存储1小时。

我们继续通过get_num_first方法生成一个数字请求。 ct-server.ru产生的数字将被写入Cookie 1小时，然后我们用元素的ID进行页面上数字的第一次替换。

 //    ,  ,       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); //  }; }

让我们创建一个函数，该函数会定期将显示的数字，用户ID，页面地址，Google Analytics（分析）Cookie值，引荐来源发送到ct-server.ru。

 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函数，该函数检查cookie，电话号码和用户ID的存在。

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

图片

如果在下一个操作期间删除了cookie，该功能将根据主机和来源收到的选择为访问者分配一个新的cookie。 另外，可以将接收到的值写入localStorage浏览器。

图片

每分钟一分钟，脚本将发送cookie号的值和用户ID，以指示应用了该cookie的页面，而无需重新加载它。 可以理解，脚本将放置在域的所有页面上。

图片

在下一篇文章中，我们将讨论用于添加和配置数字的简单界面的开发。

Source: https://habr.com/ru/post/zh-CN473372/

More articles:


All Articles