Crear un servicio de seguimiento de llamadas simple, parte 1

El artículo considerará una de las posibles opciones para implementar el seguimiento de llamadas en el sitio. Este material fue escrito únicamente con fines educativos y no tiene el propósito de reemplazar los servicios especializados existentes que brindan el servicio de seguimiento de llamadas.

Requerimientos Funcionales


  1. El servicio debe proporcionar la capacidad de sustituir números (números) por la fuente de la transición al sitio: la transición de los motores de búsqueda, la transición a la publicidad, el paso de enlaces con etiquetas utm.
  2. El servicio debe fijar el número que se muestra al visitante del sitio y mostrar este número en otra visita.
  3. Al iniciar una llamada al número que se muestra, el servicio debe iniciar la creación de un evento en Google Analytics.

Mecánica general


Cuando va al sitio, determinamos la fuente de la transición y luego verificamos si el número está asignado a este visitante. Si un visitante visitó el sitio por primera vez, entonces le asignamos un identificador único, después de lo cual le asignamos un número del conjunto de números relacionados con esta fuente de referencia. En el futuro, cuando el visitante regrese al sitio, mostraremos el número que se le asignó anteriormente.

Me gustaría centrarme en el registro de llamadas. Reemplazar el número, asignarlo al usuario es un problema técnico, lo principal es poder comparar una llamada específica y el número que está asignado actualmente al usuario. Si la telefonía utilizada le permite recibir información detallada sobre las llamadas en curso de forma continua, sabiendo el momento de una llamada a un número específico y teniendo información sobre qué número se mostró en ese momento en el sitio de qué usuario, es posible iniciar la creación de un evento en Google Analytics y asociarlo con el ROK.

Estructura


  1. ct-server.ru: aquí se colocará un script de servicio web ejecutable, una base de datos para almacenar la configuración de la sala y registrar a los visitantes;
  2. refer-to-site-with-ct-code.ru - en este sitio emularemos la transición desde la red de búsqueda;
  3. site-with-ct-code.ru: el sitio en el que se colocará el script de sustitución de números.

Empecemos


El siguiente ejemplo se implementará en el servidor local.

Cree un sitio de host virtual-con-ct-code.ru , en el que colocamos el archivo index.html de los siguientes contenidos.

<!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> 

Como puede ver en el ejemplo, conectamos un script externo ct-server.ru/script.js , que se "comunicará" entre site-with-ct-code.ru y ct-server.ru , así como interactuará con el árbol DOM del sitio. site-with-ct-code.ru . El número será sustituido por la identificación del elemento: 'seguimiento de llamadas'.

Ahora cree un refer-to-site-with-ct-code.ru , que contendrá un enlace a site-with-ct-code.ru para verificar el número de pin en la transición desde el referente.

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

Después de eso, levantaremos el host ct-server.ru , que tendrá la siguiente estructura:

index.php: un archivo de script ejecutable que aceptará solicitudes de publicación de site-with-ct-code.ru e interactuará con la base de datos;

script.js: archivo de script que se conectará en sitios donde se realizará la sustitución de números.

Base de datos


Necesitaremos crear dos platos. En la tabla ct almacenaremos números y configuraciones para su visualización, en la tabla de números registraremos la visualización de números.

 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; 

Una pequeña explicación de los campos agregados:

teléfono - número de teléfono sustituido;
referir - la fuente de la transición;
utm: enlace a la página en la que debe realizarse la sustitución de números;
host: el sitio en el que se encuentra el script de sustitución de números;
ga - id del contador de Google Analytics;
login: inicio de sesión del propietario del número.

Llenar el plato con datos.

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

imagen

Ahora crea la placa de números.

 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; 

En esta placa registraremos qué visitante, qué número y en qué momento se muestra en el sitio. En el futuro, estos datos se pueden comparar con el registro de llamadas para iniciar la acción objetivo: enviar un evento a Google Analytics, crear un cliente potencial en CRM, enviar un correo electrónico, etc.

teléfono - número de teléfono;
ct_user - identificación del visitante;
referir - la fuente de la transición;
gid - cookie de Google Analytics
página: la página en la que se muestra el número;
tiempo: tiempo de visualización del número.

Crear un manejador de solicitudes


La interacción entre el servicio web ct-server.ru y el sitio que aloja el script se realizará a través de solicitudes POST de XHR (XMLHttpRequest) entre dominios.

Abramos el archivo ct-server.ru/index.php creado anteriormente y agreguemos un cheque para recibir datos de los hosts permitidos, en nuestro caso es site-with-ct-code.ru , site-with-ct-code2.ru y 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; } } ?> 

Escribimos en valores variables de solicitudes POST que vinieron de site-with-ct-code.ru

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

Cook _ga tiene la forma _ga = GA1.2.1212121212.12.1212121212, lo llevaremos a la forma "1212121212.121212121212".

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

Estableceremos una conexión a la base de datos donde previamente creamos nuestras tablas.

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

La interacción con el servicio web se realizará a través de dos métodos: get_num_first y get_num .

Se llama al método get_num_first cuando el visitante interactúa por primera vez con el sitio para obtener un número seleccionando de la base de datos de acuerdo con los criterios: correo, referencia, utm, host. Si el resultado de la selección devuelve un valor, mostramos el número de teléfono.

Además, enviamos el evento a Google Analytics a través del Protocolo de medición de Google . El mismo método es aplicable para rastrear acciones fuera de línea, en el futuro se puede usar al comparar el registro de llamadas y el registro de números en la tabla de números.

 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"] . ''); } } 

Se requiere el método get_num para registrar entradas en la tabla de números.

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

Script de sustitución de números


A continuación, pasaremos al script ct-server.ru/script.js , que conectamos en site-with-ct-code.ru

Para comenzar, creemos dos funciones: setcookie para crear y getcookie para leer cookies. Los utilizaremos para registrar y obtener la identificación de cookie del usuario y el número de teléfono.

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

Después de eso, agregue la función makeid para generar la identificación para el usuario.

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

Ahora creemos una función para generar cookies que contengan una identificación de usuario de 33 dígitos.

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

La cookie ct_user resultante se almacena durante 1 hora.

Procedemos a generar una solicitud de un número a través del método get_num_first . El número resultante de ct-server.ru se escribe en la cookie durante 1 hora y realizamos la primera sustitución del número en la página por la identificación del elemento.

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

Creemos una función que envíe periódicamente el número que se muestra, la identificación del usuario, la dirección de la página, el valor de la cookie de google analytics, la fuente de referencia a 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; }; } 

Al final, agregamos la función sendToCalltracking, que verifica la presencia del número de teléfono de la cookie y la identificación del usuario.

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

Al comienzo del script, llamamos a nuestro temporizador de funciones.

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

imagen

Si las cookies se eliminan durante la siguiente operación, la función asignará una nueva al visitante de acuerdo con la selección recibida por el host y la fuente. Además, es posible escribir los valores recibidos en el navegador localStorage.

imagen

Una vez por minuto, el script enviará el valor del número de cookie y la identificación del usuario que indica la página en la que se aplicó sin volver a cargarlo. Se entiende que el script se colocará en todas las páginas del dominio.

imagen

En el próximo artículo, discutiremos el desarrollo de una interfaz simple para agregar y configurar números.

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


All Articles