Las plantillas personalizadas de GTM nos abren muchas posibilidades para generar tipos de tags que nos puede ahorrar mucho tiempo en configuraciones repetitivas o amoldarlos a nuestras necesidades ya que su flexibilidad lo permite. si aun no usaste este modulo ya antes he creado un articulo que te puede ayudar a entender mejor «Cómo crear Template en Google Tag Manager«.
En los requerimientos que se suelen necesitar de este modulo, tuve la necesidad de poder enviar valores POST a un End Point desde una plantilla y las APIs de plantillas personalizadas solo tiene una API que permite hacer peticiones GET (sendPixel)
¿Cómo podemos enviar Peticiones POST desde una Plantillas personalizadas de GTM?
Una solución alternativa seria tener parte de nuestra lógica dentro de GTM y la parte propiamente de la petición POST alojado en un servidor externo.
para lograr esto necesitamos las siguientes API’s
En la siguiente diagrama brindo una idea en general del funcionamiento.
desde GTM en la platilla tendríamos el siguiente código básico
const log = require('logToConsole');
const encodeUri = require('decodeUriComponent');
const injectScript = require('injectScript');
const query = require('queryPermission');
const callInWindow = require('callInWindow');
function Success(){
const datoPOST=data.datoGTM;
callInWindow('pruebaPOST', datoPOST);
data.gtmOnSuccess();
}
function Failure(){
data.gtmOnFailure();
}
const url = 'https://luisrodriguez.pe/gtm_template/listenerPOST.js';
if (query('inject_script', encodeUri(url))){
injectScript(url,Success,Failure);
}else{
Failure();
}Entonces si analizamos el diagrama hay 2 archivos que son externos a Google tag manager.
1. Fetch – Javascript
Desde javascript hacemos una petición fetch que también puede ser xhr y el código en el siguiente ejemplo es una simple función que requiere un parámetro, dicho parámetro será los valores que se ingresan desde el UI del tags que se crea en la plantilla personalizada.
la variable endpoint indica la url del backend que recepciona los datos enviados.
function pruebaPOST(data) {
var endpoint = 'https://luisrodriguez.pe/gtm_template/GTM-listenerPOST.php';
var data = { dataGTM: data };
fetch(endpoint , {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
}2. EndPoint – BackEnd (PHP)
Contiene la lógica de acuerdo a su negocio, en este ejemplo indico el lenguaje de programación PHP pero podría ser cualquiera que necesite técnicamente, en el código de ejemplo solo muestro los datos decepcionados por el petición Post.
<?php
echo "<pre>";
var_dump(file_get_contents("php://input"));
echo "<pre>";
?>
El código que la plantilla personalizada hay 2 bloques de códigos que basicamente hacen el trabajo.
- La API “injectScript” inserta al contexto de plantillas personalizada la función del JS externo
- La API “callInWindow” nos permite llamar el objeto de la función en el contexto del editor de código de plantilla personalizada
Lógica a nivel de código de envío POST desde una plantilla personalizada de GTM
con esto ya tenemos casi todo, la otra parte seria configurar los campos para ingresar los valores que se enviarían y permisos
Configurar los campos
Configurar los permisos
Con estas configuraciones ya podemos comenzar con las pruebas de la plantilla. como valor envió un string fijo y la una variable de GTM que es la URL de la página esto para entender que el alcance que se puede tener. El activador es cuando carga la pagina pero también pueden tener una activador especifico como un click.
para ver si nuestra prueba marcho bien podemos validar desde nuestro navegador en su entorno de debug, en mi caso estoy en chrome y la parte de red y vemos que el lenguaje del lado del servidor (PHP) recepciono los datos que se enviaron desde la UI de GTM.
