Resulta que he montado una div que hace de "botón" el cual redirige al usuario hacia la api de whatsapp para iniciar una conversación nueva. La cuestión es más compleja, porque el número telefónico cambia dinámicamente según los datos almacenados en la base de datos de la web: el número que tiene menos "contactos", es al que se redirige mediante este botón.
A estos datos los guardo en una tabla, en un array que he codificado en JSON, quedando algo similar a esto:
[{"meta_id":13106,"post_id":1,"meta_key":"botondata","meta_value":
"[{\"nombre\":\"Asesor 1\",\"numero\":\"123456789\",\"clientes\":1},
{\"nombre\":\"Asesor 2\",\"numero\":\"987654321\",\"clientes\":2,}]
La idea inicial era utilizar javascript y ejecutar a la carga del DOM, una función que mediante la api fetch, obtenga estos datos, determine cuál 'Asesor' tiene menos clientes y entonces genere el link hacia este. Acto seguido, agregarle un evento al click de la div que redireccione al usuario hacia el link generado, también con javascript.
Esto funciona perfectamente para mi navegador y para los de algunos cercanos que les he pedido que lo prueben, sin embargo se me hizo evidente que el tráfico común de la web no podía hacer uso de este botón porque no se ejecutaba el script.
Por ese motivo, pasé a realizar mediante php la consulta a la base de datos, determinar el Asesor con menos clientes, obtener su número, generar el link y, mediante PHP, renderizar un componente 'a' con un href que tiene el link (esto a modo de botón y estilizado como tal, claro), lo cual funciona correctamente.
El problema que tengo ahora y por el que consulto, es que necesito contabilizar cuando el usuario cliquea el botón, y es dirigido a la api que inicia la conversación, porque de esta manera se compensaría automáticamente la cantidad de clientes de cada Asesor. La idea inicial nuevamente fue correr una función mediante javascript en el evento click del botón, que mediante fetch aumente en 1 el valor de 'clientes' del asesor correspondiente, y nuevamente funciona a la perfección para mi navegador y los cercanos, pero no para los usuarios comunes.
Dejo esquematizado el código a ver si ayuda en algo:
let numeroGlobal = document.getElementById("numero-cargado").dataset["numero"];
let botonData=[];
const handleClick = (e) => {
if (e.target.id === "botonWspClick") {
aumentaClick(numeroGlobal);
}
};
const aumentaClick = (numero) => {
fetch("/endpoint.php", {
method: "POST",
headers: {
Authorization: "*****",
"Content-Type": "application/json",
Function: "obtenerBoton",
},
})
.then((res) => {
if (res.ok) {
return res.json();
} else {
throw new Error(res.statusText, { cause: res });
}
})
.then((res) => {
let indice = null;
if (res['data'].length > 0) {
if (res['data'][0].hasOwnProperty("meta_value")) {
botonData = res['data'][0].meta_value;
botonData = JSON.parse(botonData);
botonData.forEach((el, i) => {
if (el.numero == numero) {
indice = i;
}
});
}
}
botonData[indice].clicks++;
botonData[indice].clicksAcumulados++;
let cargaUtil = JSON.stringify({ data: JSON.stringify(botonData) });
fetch("/endpoint.php", {
method: "POST",
body:cargaUtil,
headers: {
Authorization: "******",
"Content-Type": "application/json",
Function: "guardarBoton",
},
})
})
.catch((err) => {
console.log(err);
});
};
document.addEventListener("click", handleClick);