Geekly articles weekly

Erstellen eines einfachen Anrufverfolgungsdienstes, Teil 1

In diesem Artikel wird eine der möglichen Optionen für die Implementierung der Anrufverfolgung auf der Site betrachtet. Dieses Material wurde ausschließlich zu Bildungszwecken verfasst und hat nicht das Ziel, vorhandene spezialisierte Dienste zu ersetzen, die den Calltracking-Dienst bereitstellen.

Funktionale Anforderungen


  1. Der Dienst sollte die Möglichkeit bieten, Zahlen durch die Quelle des Übergangs zur Website zu ersetzen - den Übergang von Suchmaschinen, den Übergang zur Werbung, die Weitergabe von Links mit utm-Tags.
  2. Der Dienst sollte die angezeigte Nummer für den Site-Besucher festlegen und diese Nummer bei einem weiteren Besuch anzeigen.
  3. Wenn Sie die angezeigte Nummer anrufen, muss der Dienst die Erstellung eines Ereignisses in Google Analytics initiieren.

Allgemeine Mechanik


Wenn Sie zur Site gehen, bestimmen wir die Quelle des Übergangs und prüfen dann, ob die Nummer diesem Besucher zugewiesen ist. Wenn der Besucher die Site zum ersten Mal besucht hat, weisen wir ihm eine eindeutige Kennung zu. Anschließend weisen wir eine Nummer aus dem Nummernpool zu, der sich auf diese Verweisquelle bezieht. Wenn der Besucher in Zukunft auf die Website zurückkehrt, zeigen wir die ihm zuvor zugewiesene Nummer an.

Ich möchte mich auf das Anrufprotokoll konzentrieren. Das Ersetzen der Nummer und das Zuweisen der Nummer zum Benutzer ist ein technisches Problem. Die Hauptsache besteht darin, einen bestimmten Anruf mit der Nummer vergleichen zu können, die dem Benutzer derzeit zugewiesen ist. Wenn die von Ihnen verwendete Telefonie es Ihnen ermöglicht, ständig Details zu laufenden Anrufen zu erhalten, den Zeitpunkt eines Anrufs an eine bestimmte Nummer zu kennen und Informationen darüber zu haben, welche Nummer zu diesem Zeitpunkt auf der Website des jeweiligen Benutzers angezeigt wurde, können Sie die Erstellung eines Ereignisses in Google Analytics initiieren und es dem ROK zuordnen.

Struktur


  1. ct-server.ru - Hier wird ein ausführbares Webdienst-Skript platziert, eine Datenbank zum Speichern von Raumeinstellungen und zum Protokollieren von Besuchern.
  2. refer-to-site-with-ct-code.ru - auf dieser Site werden wir den Übergang vom Suchnetzwerk emulieren;
  3. site-with-ct-code.ru - die Site, auf der das Nummernersetzungsskript platziert wird.

Fangen wir an


Das folgende Beispiel wird auf dem lokalen Server implementiert.

Erstellen Sie eine virtuelle Host-Site-with-ct-code.ru , in die wir die Datei index.html mit den folgenden Inhalten einfügen .

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

Wie Sie dem Beispiel entnehmen können , verbinden wir ein externes Skript ct-server.ru/script.js , das zwischen site-with-ct-code.ru und ct-server.ru "kommuniziert" und mit dem DOM-Baum der Site interagiert site-with-ct-code.ru . Die Nummer wird durch die ID des Elements "Calltracking" ersetzt.

Jetzt erstellen wir refer-to-site-with-ct-code.ru , das einen Link zu site-with-ct-code.ru enthält, um die Pin-Nummer beim Übergang vom Referrer überprüfen zu können.

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

Danach werden wir den Host ct-server.ru aufrufen , der die folgende Struktur hat:

index.php - ausführbare Skriptdatei, die Post-Anfragen von site-with-ct-code.ru empfängt und mit der Datenbank interagiert;

script.js - Skriptdatei, die an Standorten verbunden wird, an denen die Nummernersetzung durchgeführt wird.

Datenbank


Wir müssen zwei Platten erstellen. In der ct- Tabelle speichern wir Zahlen und Einstellungen für ihre Anzeige, in der Zahlentabelle protokollieren wir die Anzeige von Zahlen.

 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;

Eine kleine Erklärung der hinzugefügten Felder:

Telefon - ersetzte Telefonnummer;
refer - die Quelle des Übergangs;
utm - Link zu der Seite, auf der die Nummernersetzung stattfinden soll;
Host - die Site, auf der sich das Nummernersetzungsskript befindet;
ga - id des Google Analytics-Zählers;
Login - Besitzer der Login-Nummer.

Füllen Sie die Platte mit Daten.

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

Bild

Erstellen Sie nun das Nummernschild.

 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;

Auf diesem Schild wird aufgezeichnet, welcher Besucher, welche Nummer und zu welchem ​​Zeitpunkt auf der Website angezeigt wird. In Zukunft können diese Daten mit dem Anrufprotokoll verglichen werden, um die Zielaktion einzuleiten - Senden eines Ereignisses an Google Analytics, Erstellen eines Leads in CRM, Senden einer E-Mail usw.

Telefon - Telefonnummer;
ct_user - Besucher-ID;
refer - die Quelle des Übergangs;
gid - Google Analytics-Cookie
Seite - die Seite, auf der die Nummer angezeigt wird;
Zeit - Nummer Anzeigezeit.

Erstellen Sie einen Anforderungshandler


Die Interaktion zwischen dem Webdienst ct-server.ru und der Site, auf der das Skript gehostet wird, erfolgt über domänenübergreifende XHR-POST-Anforderungen (XMLHttpRequest).

Öffnen Sie die zuvor erstellte Datei ct-server.ru/index.php und fügen Sie eine Prüfung für den Empfang von Daten von zulässigen Hosts hinzu. In unserem Fall handelt es sich um site-with-ct-code.ru , site-with-ct-code2.ru und 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; } } ?>

Wir schreiben variable Werte von POST-Anfragen ein, die von site-with-ct-code.ru kamen

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

Cook _ga hat die Form _ga = GA1.2.1212121212.121212121212, wir bringen es in die Form "1212121212.121212121212".

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

Wir werden eine Verbindung zu der Datenbank herstellen, in der wir zuvor unsere Tabellen erstellt haben.

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

Die Interaktion mit dem Webdienst erfolgt über zwei Methoden: get_num_first und get_num .

Die Methode get_num_first wird aufgerufen, wenn der Besucher zum ersten Mal mit der Site interagiert, um eine Nummer zu erhalten, indem er aus der Datenbank nach den Kriterien Mail, Referrer, Utm, Host auswählt. Wenn das Auswahlergebnis einen Wert zurückgibt, zeigen wir die Telefonnummer an.

Darüber hinaus senden wir die Veranstaltung über das Google Measurement Protocol an Google Analytics. Die gleiche Methode gilt für die Verfolgung von Offline-Aktionen. In Zukunft kann sie beim Vergleich des Anrufprotokolls und des Nummernprotokolls in der Nummerntabelle verwendet werden.

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

Die Methode get_num ist erforderlich, um Einträge in der Zahlentabelle zu protokollieren .

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

Nummernersetzungsskript


Als nächstes fahren wir mit dem Skript ct-server.ru/script.js fort , das wir auf site-with-ct-code.ru verbinden

Lassen Sie uns zunächst zwei Funktionen erstellen - setcookie zum Erstellen und getcookie zum Lesen von Cookies. Wir werden sie verwenden, um die Cookie-ID des Benutzers und die Telefonnummer aufzuzeichnen und abzurufen.

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

Fügen Sie danach die Funktion makeid hinzu , um die ID für den Benutzer zu generieren.

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

Erstellen wir nun eine Funktion zum Generieren von Cookies mit einer 33-stelligen Benutzer-ID.

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

Das resultierende ct_user- Cookie wird 1 Stunde lang gespeichert.

Wir generieren eine Anforderung für eine Nummer über die Methode get_num_first . Die resultierende Nummer aus ct-server.ru wird 1 Stunde lang in das Cookie geschrieben, und wir führen die erste Ersetzung der Nummer auf der Seite durch die ID des Elements durch.

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

Wir werden eine Funktion erstellen, die regelmäßig die Werte der angezeigten Nummer, Benutzer-ID, Seitenadresse, des Google Analytics-Cookie-Werts und der Verweisquelle an ct-server.ru sendet.

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

Am Ende fügen wir die Funktion sendToCalltracking hinzu, die das Vorhandensein der Cookie-Telefonnummer und der Benutzer-ID überprüft.

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

Ganz am Anfang des Skripts rufen wir unseren Funktions-Timer auf.

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

Bild

Wenn Cookies während des nächsten Vorgangs gelöscht werden, weist die Funktion dem Besucher ein neues Cookie entsprechend der empfangenen Auswahl durch Host und Quelle zu. Darüber hinaus ist es möglich, die empfangenen Werte in den localStorage-Browser zu schreiben.

Bild

Einmal pro Minute sendet das Skript den Wert der Cookie-Nummer und der Benutzer-ID, die die Seite angeben, auf die es angewendet wurde, ohne sie erneut zu laden. Es versteht sich, dass das Skript auf allen Seiten der Domain platziert wird.

Bild

Im nächsten Artikel werden wir die Entwicklung einer einfachen Schnittstelle zum Hinzufügen und Konfigurieren von Zahlen diskutieren.

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

More articles:


All Articles