L'article examinera l'une des options possibles pour la mise en œuvre du suivi des appels sur le site. Ce matériel a été écrit uniquement à des fins éducatives et n'a pas pour objectif de remplacer les services spécialisés existants qui fournissent le service de suivi des appels.
Exigences fonctionnelles
- Le service devrait offrir la possibilité de substituer des nombres (nombres) par la source de la transition vers le site - la transition des moteurs de recherche, la transition vers la publicité, le passage de liens avec des balises utm.
- Le service doit fixer le numéro affiché au visiteur du site et afficher ce numéro lors d'une prochaine visite.
- Lors de l'initiation d'un appel vers le numéro affiché, le service doit initier la création d'un événement dans Google Analytics.
Mécanique générale
Lorsque vous vous rendez sur le site, nous déterminons la source de la transition, puis vérifions si le numéro est attribué à ce visiteur. Si un visiteur a visité le site pour la première fois, nous lui attribuons un identifiant unique, après quoi nous lui attribuons un numéro à partir du pool de numéros liés à cette source de référence. À l'avenir, lorsque le visiteur reviendra sur le site, nous afficherons le numéro qui lui a été attribué plus tôt.
Je voudrais me concentrer sur le journal des appels. Remplacer le numéro, l'attribuer à l'utilisateur est un problème technique, l'essentiel est de pouvoir comparer un appel spécifique et le numéro actuellement attribué à l'utilisateur. Si la téléphonie que vous utilisez vous permet de recevoir en permanence des détails sur les appels en cours, puis de connaître le moment d'un appel vers un numéro spécifique et d'avoir des informations sur le numéro affiché à ce moment sur le site Web de quel utilisateur, il est possible d'initier la création d'un événement dans Google Analytics et de l'associer à la ROK.
La structure
- ct-server.ru - un script de service Web exécutable sera placé ici, une base de données pour stocker les paramètres de la salle et enregistrer les visiteurs;
- refer-to-site-with-ct-code.ru - sur ce site, nous émulerons la transition du réseau de recherche;
- site-with-ct-code.ru - le site sur lequel le script de substitution de numéro sera placé.
Commençons
L'exemple ci-dessous sera implémenté sur le serveur local.
Créez un hôte virtuel
site-with-ct-code.ru , dans lequel nous mettons le fichier
index.html du contenu suivant.
<!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> <title>CT</title> <script src="http://ct-server.ru/script.js"></script> <script> </script> </head> <body> <p id='calltracking'>79000000000</p> </body> </html>
Comme vous pouvez le voir dans l'exemple, nous connectons un script externe
ct-server.ru/script.js , qui "communiquera" entre
site-with-ct-code.ru et
ct-server.ru , ainsi qu'interagir avec l'arborescence DOM du site
site-with-ct-code.ru . Le numéro sera remplacé par l'id de l'élément - «calltracking».
Nous
allons maintenant créer
refer-to-site-with-ct-code.ru , qui contiendra un lien vers site-with-ct-code.ru pour la possibilité de vérifier le numéro de broche lors de la transition du référent.
<!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> <title>CT</title> </head> <body> <a href="http://site-with-ct-code.ru"></a> </body> </html>
Après cela, nous
lèverons l'hôte
ct-server.ru , qui aura la structure suivante:
index.php - fichier de script exécutable qui recevra les post-requêtes de site-with-ct-code.ru et interagira avec la base de données;
script.js - fichier de script qui sera connecté sur les sites où la substitution de numéros sera effectuée.
Base de données
Nous devrons créer deux plaques. Dans la table
ct , nous enregistrerons les nombres et les paramètres pour leur affichage, dans la table des
nombres , nous enregistrerons l'affichage des nombres.
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;
Une petite explication des champs ajoutés:
téléphone - numéro de téléphone substitué;
refer - la source de la transition;
utm - lien vers la page sur laquelle la substitution de numéro doit avoir lieu;
hôte - le site sur lequel se trouve le script de substitution de numéros;
ga-id du compteur Google Analytics;
login - propriétaire du numéro de connexion.
Remplissez la plaque de données.
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', '');
Créez maintenant la plaque d'immatriculation.
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;
Dans cette plaque, nous enregistrerons quel visiteur, quel numéro et à quel moment est affiché sur le site. À l'avenir, ces données peuvent être comparées au journal des appels pour lancer l'action cible - envoyer un événement à Google Analytics, créer une piste dans CRM, envoyer un e-mail, etc.
téléphone - numéro de téléphone;
ct_user - identifiant du visiteur;
refer - la source de la transition;
gid - cookie Google Analytics
page - la page sur laquelle le numéro est affiché;
time - temps d'affichage du nombre.
Créer un gestionnaire de demandes
L'interaction entre le service Web ct-server.ru et le site hébergeant le script se fera via des requêtes POST XHR (XMLHttpRequest) interdomaines.
Ouvrons le fichier
ct-server.ru/index.php créé plus tôt et ajoutons une vérification pour la réception des données des hôtes autorisés, dans notre cas c'est
site-with-ct-code.ru ,
site-with-ct-code2.ru et
site-with -ct-code3.ru .
<?php if (isset($_SERVER["HTTP_ORIGIN"]) === true) { $host = $_SERVER["HTTP_ORIGIN"];
Nous Ă©crivons dans les valeurs variables des requĂŞtes POST provenant 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 a la forme _ga = GA1.2.1212121212.121212121212, nous allons l'amener sous la forme "1212121212.12121212121212".
if ($gid) { $pos = strpos($gid, '.', strpos($gid, '.') + 1); $gid = substr($gid, $pos + 1); }
Nous établirons une connexion à la base de données où nous avons précédemment créé nos tables.
$conn = new mysqli("localhost", "root", "", "calltracking"); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); }
L'interaction avec le service Web se fera par deux méthodes:
get_num_first et
get_num .
La méthode
get_num_first est appelée lorsque le visiteur interagit pour la première fois avec le site pour obtenir un numéro en sélectionnant dans la base de données selon les critères - mail, referrer, utm, host. Si le résultat de la sélection renvoie une valeur, nous affichons le numéro de téléphone.
De plus, nous envoyons l'événement à Google Analytics via le
protocole de mesure Google . La même méthode est applicable pour le suivi des actions hors ligne, à l'avenir, elle pourra être utilisée pour comparer le journal des appels et le journal des numéros dans le tableau des numéros.
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 {
La méthode
get_num est requise pour
consigner les entrées dans la table des nombres.
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 {
Script de substitution de numéros
Ensuite, nous allons passer au script
ct-server.ru/script.js , que nous connectons sur site-with-ct-code.ru
Pour commencer, créons deux fonctions -
setcookie pour créer et
getcookie pour lire les cookies. Nous les utiliserons pour enregistrer et obtenir l'identifiant de cookie de l'utilisateur et le numéro de téléphone.
Après cela, ajoutez la fonction
makeid pour générer l'ID de l'utilisateur.
Créons maintenant une fonction pour générer des cookies contenant un identifiant utilisateur à 33 chiffres.
Le cookie
ct_user résultant est stocké pendant 1 heure.
Nous procédons à la génération d'une demande de numéro via la méthode
get_num_first . Le numéro résultant de ct-server.ru est écrit dans le cookie pendant 1 heure et nous effectuons la première substitution du numéro sur la page par l'id de l'élément.
Créons une fonction qui enverra périodiquement le numéro affiché, l'ID utilisateur, l'adresse de la page, la valeur du cookie google analytics, la source de référence à 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() {
À la fin, nous ajoutons la fonction sendToCalltracking, qui vérifie la présence du numéro de téléphone du cookie et de l'ID utilisateur.
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 === "" ) {
Au tout début du script, nous appelons notre fonction timer.
var myTimer = setTimeout(sendToCalltracking, 500);
Si les cookies sont supprimés lors de la prochaine opération, la fonction en attribuera un nouveau au visiteur en fonction de la sélection reçue par l'hôte et la source. De plus, il est possible d'écrire les valeurs reçues dans le navigateur localStorage.
Une fois par minute, le script enverra la valeur du numéro de cookie et de l'ID utilisateur indiquant la page sur laquelle il a été appliqué sans le recharger. Il est entendu que le script sera placé sur toutes les pages du domaine.
Dans le prochain article, nous discuterons du développement d'une interface simple pour ajouter et configurer des numéros.