Esta es una guía para llevar a cabo la implementación de CITYADS VÍA GOOGLE TAG MANAGER (GTM). Las pruebas se realizaron en el sitio http://cityads.molanco.com. Para comenzar daremos una panorámica general de la plataforma GTM.

1.- ESTRUCTURA DE GOOGLE TAG MANAGER

Google Tag Manager se compone de 5 elementos fundamentales (cuentas, contenedores, etiquetas, reglas y macros), que se relacionan entre sí de la siguiente manera. Estructura de Google Tag Manager:

---image missing

Dentro de un contenedor se encuentra como unidad de más bajo nivel, las variables, las cuales son las encargadas de almacenar los datos que son enviados desde el sitio web.

--- image missing

En la imagen anterior se intenta visualizar la forma en que las variables trabajan.

1.1 Las variables dependiendo de su tipo (html, cookies, etc.) son enviadas al contenedor de GTM vía el DataLayer. En GTM se deben almacenar estos valores dentro de variables tipo GTM

1.2 Los valores almacenados pueden ser utilizado luego desde cualquier lugar dentro del entorno GTM mediante esta variables GTM.

1.3 Para CityAds particularmente se utilizan estas variables en los pixeles y tags con sus correspondientes activadores o reglas.

 

2.- Variables CityAds via GTM

Lo primero es saber cuáles variables se necesitan para CityAds y su formato.

-- image missing

En la imagen anterior se muestra el conjunto de variables que trabajaremos para una perfecta implementación de CityAds. Estas variables GTM serán embebidas dentro de los tags y pixeles de CityAds.

Como se muestra la mayor parte de las variables  son de tipo capa de datos, es decir están serán enviadas desde la web mediante un DataLayer el cual se  explica en la sección 4.2. También nos podemos dar cuenta de que existen dos grandes grupos, las que comienzan con (xcnt_order) que son las utilizada en todo el proceso de la orden de compra, y que se encuentran básicamente en el carro de compra, y el otro grupo, las (xcnt_bascket), que son las que se utilizan en el thank you, cuando el usuario ve la confirmación de la compra.

 

2.1 Variables principales con valores obligatorios

cityAds_clickID: Este valor se captura desde los parámetros GET que vienen en la URL por la cual se llegó a su sitio a través de los asociados de CityAds. Este disparador asignará una cookie a su sitio. Para explicación de cómo asignar el valor de esta variable disparador GTM ver la sección 6

cityAds_clickID_cookie: Una vez que se tiene el valor del click_id cómo cookie el valor de la cookie se embeberá en el pixel de CityAds. Para explicación de cómo asignar el valor de esta variable disparador GTM ver la sección 6

utm_medium: Esta variable  es de tipo url, donde se guardaran los datos de la misma para luego ser utilizadas en los activadores que gestionan las etiquetas de  pixel, tema que es  explicado en la sección 6. Utm_medium  se invoca en el Activador utmSourceIsCityAdss para preguntar si en los valores de la url almacenada en esta variable, existe un argumento con nombre cityads.

xcnt_product_id : Esta variable almacenará el id del producto seleccionado por el usuario, este debe de ser un número o cadena que identifica al producto.

xcnt_order_products: Almacenará, el listado de productos que se encuentren en la canasta del usuario, debe cumplir con el formato (“x,y,z”), números enteros, separados por coma, y todo entre comillas.

xcnt_basket_quantity: Esta contendrá los valores de la cantidad de cada producto de la canasta, formato (“x,y,z”), números enteros, separados por coma, y todo entre comillas.

xcnt_basket_products: Esta variable es la más importante y la que alberga mayor cantidad de información, contiene los diferentes datos por producto en la canasta. Formato:

-- image missing

Entre corchete y cada producto entre llaves separado por coma, tanto el nombre de la propiedad cómo el valor de éste deben estar entre comillas dobles. Aunque la estructura es la misma, la diferencia entre esta variable y la xcnt_basket es que esta última se utiliza en la implementación de pixel y xcnt_basket_products en las del script de CityAds para llevar el control de los productos del carro de compra.

xcnt_currency: La moneda que se está trabajando en el sitio. Ejemplo: MXN

xcnt_order_id: Al finalizar una compra su sitio genera un número de orden este puede tener cualquier caracter. Ejemplo: XNC01

xcnt_order_quantity: Esta variable tendrá la cantidad productos que se han comprado , debe cumplir con el formato (“x,y,z”), números enteros, separados por coma, y todo entre comillas.

xcnt_order_total:Esta variable tendrá el total de la orden .

2.2 Variables con valores opcionales

 xcnt_coupon: Este debe ser un valor que el sitio web generé como cupón si el sitio no tiene cupones entonces asignar valor 0

xcnt_customer_type: El tipo de cliente que el cual genero la compra. Si el sitio no genera este valor asignarle 0

xcnt_discount: El descuento asignado a la compra. Si el sitio no genera este valor asignarle 0

xcnt_payment_method: El tipo de pago que utilizó el cliente, asignar 0 si no se tiene un valor.

 

 

3.- Etiquetas o Tags de GTM

Las Etiquetas o Tags de GTM son fragmentos de código (HTML, JavaScript,…), como por ejemplo el código de seguimiento de Google Analytics o CityAds, los píxeles de conversión de campañas de display o búsqueda, píxeles de remarketing, etc. Estos fragmentos (o etiquetas) son los que empezaremos a ubicar en los sitios webs, a partir de ahora, de manera “remota”, mediante el uso del Contenedor de Etiquetas de Google (es por ello que, aunque no nos guste mucho por validación y SEO, el contenedor ha de ser embebido por GTM a través de un iframe

 

4.- ¿Cómo ubicar etiquetas de CityAds vía GTM?

4.1.- CASO DE ESTUDIO 1. TAGS - HOME Y DEMÁS PAGINAS (EXCEPTO PARA LAS PÁGINAS DEL CART, CHECKOUT y BASKET)

4.1.1.- Primeramente una vez registrado en la plataforma GTM  se selecciona la pestaña Etiqueta o Tag.

-image

4.1.4.- A continuación copiar y pegar en Configurar etiqueta el código siguiente (recuerde este paso, más adelante se muestra el script final):

<script id="xcntmyAsync" type="text/javascript">
	/*<![CDATA[*/
	/*]]>*/
	(function () {
		var xscr = document.createElement("script");
		var xcntr = escape(document.referrer);
		xscr.async = true;
		xscr.src = (document.location.protocol === "https:" ? "https:" : "http:")+ "//x.cnt.my/async/track/?r=" + Math.random();
		var x = document.getElementById("xcntmyAsync");
		x.parentNode.insertBefore(xscr, x);
	}());</script>

 

Se debe obtener como resultado algo como lo que se muestra en la imagen  a continuación:

-image

Asegúrese de que las comillas sean las correctas pues si copió de un PDF u algún medio cuya codificación de los caracteres sea diferente a la del cuadro de código de la nueva etiqueta obtendrá como resultado errores sintáctico (comillas correctas: "o").

4.1.5.- Una vez definido el código de CityAds hay que definir en qué página(s) de nuestro sitio se activará la etiqueta. Para esto debe definir la regla o reglas de activación de la Etiqueta.

-image

En este caso se seleccionó Algunas páginas para indicarle a GTM que el tags personalizado de CityAds se incluya en todas las páginas del sitio menos en las página de producto detalle, el shopping cart y la del checkout. Se excluyen estas páginas, porque contienen otros script ,que a su vez, ya incluyen en su contexto este script en cuestión y se tendría código redundante de colocar los dos.

-image  

Esta Etiqueta se va a activar en aquellas páginas de nuestro sitio que cumplan con las reglas de activación definidas.

4.2 CASO DE ESTUDIO 2. TAGS Y PIXEL DEL CHECKOUT

TAG o Etiqueta: CityADS_ChekoutPage_Script

-image

 

El código fuente de la misma está disponible aqui.

Para activar las etiquetas anteriores se sigue el mismo procedimiento descrito en el caso de estudio uno. Antes de definir los TAGS se deben definir el conjunto de variables necesarias para enviarse a la plataforma CityAds, a continuación un listados de las variables necesarias.

-image

 

Estas variables en su mayoría son variables que vienen de la capa de datos (o Data Layer).

5.- La Capa de datos (Data Layer )

Devuelve el valor de una variable de la capa de datos. Este valor se habrá guardado previamente en la página actual mediante el código Javascript:

-image

Además del  de la variable, podemos especificar opcionalmente un valor por defecto que nos permitirá que las variables sin definir tengan un valor concreto -puede ser una cadena vacía- con el que comparar en lugar de undefined.

La propiedad Versiónnombre de la capa de datos conviene dejarla en su valor por defecto Versión 2: esto permite guardar variables con valores anidados -con otras variables o propiedades en su interior- y acceder a ellos mediante un punto ‘.’ (ej. variable.propiedad). Debemos tener cuidado de evitar usar puntos en los nombres de variables para evitar problemas.

Ejemplo: Supongamos que tenemos un sitio web de comercio electrónico y queremos hacer seguimiento de los artículos añadidos al carro de la compra. Para ello, ya hemos añadido el siguiente código ligado a la operación de añadir al carro:

-image

 

En este caso, la macro para hacer referencia al precio podría ser así:

 

 

-image

En este caso de estudio se definieron varias variables por ejemplo: desde la capa de datos se generó una variable llamada  xcnt_basket para recepcionar los datos que vienen del backend.

-image

 

Nota: En este punto se asume que previamente se había definido un script en el thankyou page  del checkout en el cual se envían las variables a GTM a través de DataLayer todas las variables necesarias.

Ejemplo:

-image

 Para los propósitos de esta guía se definieron tres etiquetas

-image

Una vez añadidas todas las etiquetas se procede a publicar los cambios realizados y  luego podemos testear para ver si es correcta la implementación de los Tags, para esto en GTM hacer clic en Publicar para confirmar los cambios de la versión recién creada y luego Vista Previa (ver imagen a continuación), para iniciar el testeo y para ver la ejecución de GTM, acceda al sitio http://cityads.molanco.com, se debe iniciar un flujo completo de compra, cuando se alcanze la url http://gtm.molanco.com?a=order_compra  es cuando se realizan las pruebas en este manual.

-image

A continuación se listan algunas imágenes resultante de las pruebas realizadas en el sitio cityads.molanco.com.para las etiquetas que se activa en ese momento, los mensajes enviados a GTM  por el datalayer y las variables enviadas desde la capa de datos haciendo uso del data layer.

Etiqueta que se activa en esta url.

-image

Vista previa de las variables enviadas desde la capa de datos

-image

Vista previa del mensaje enviado por el dataLayer

-image

Test hecho directamente en el sitio haciendo uso de chrome-devtools

-image

 

SCRIPT INSERTADO PARA  EN EL TAG HTML PERSONALIZADO EN EL CASO DE ESTUDIOS

<!--Tags – Checkout--><script id="xcntmyAsync" type="text/javascript">
             /*<![CDATA[*/
	// Página Checkout
   var xcnt_order_products = "{{order_products}}"; // Regresar los ID´s de los productos separados por coma
   var xcnt_order_quantity = "{{order_quantity}}"; // Regresar la cantidad de cada produto en el basket, separados por coma
   var xcnt_order_id = "{{order_id}}"; // Regresar el OrderID (de preferencia criptografiado en MD5)
   var xcnt_order_total = "{{order_total}}"; // Regresar el valor total del pedido usando siempre PUNTO para separar decimales
	/*]]>*/
	(function () {
		var xscr = document.createElement("script");
		var xcntr = escape(document.referrer);
		xscr.async = true;
		xscr.src = (document.location.protocol === "https:" ? "https:" : "http:") + "//x.cnt.my/async/track/?r=" + Math.random();
		var x = document.getElementById("xcntmyAsync");
		x.parentNode.insertBefore(xscr, x);
	}());</script>
<!--Pixel – Checkout--><script async="async" img="" src="https://cityadspix.com/track/{{	order_id}}/ct/q2/c/24145?click_id={{click_id}}&amp;customer_type={{customer_type}}&amp;payment_method={{payment_method}}&amp;order_total={{order_total}}&amp;currency={{currency}}&amp;coupon={{coupon}}&amp;discount={{discount}}&amp;basket={{basket}}&amp;md=2" type="text/javascript"></script><noscript>
<img height="1" src="https://cityadspix.com/track/{{order_id}}/ct/q2/c/24145?click_id={{click_id}}&customer_type={{customer_type}}&payment_method={{payment_method}}&order_total={{order_total}}&currency={{currency}}&coupon={{coupon}}&discount={{discount}}&basket={{basket}}" width="1" /></noscript>

 

 

6.- Click ID

Paso 1) Crear Macro Que obtiene el UTM Medium de la URL

 

Paso 2) Crear Trigger para solo ejecutarse cuando el utm sea de CityAds

Paso 3) Crear Variable que obtiene el clickID de la URL

Paso 4) Tag que crea la cookie de ClickID que solo se ejecuta con el trigger de utmSourceIsCityAds, creado anteriormente con duración de 60 días.        

 

<script>
function setCookie(cname, cvalue, exdays) {			
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/";			
} setCookie("__ctyAdsClickID","{{cityAds_clickID}}",60);</script>

 

Paso 5) Crear Variable que obtiene la cookie con el clickID de cityads

Paso 6) Agregar la variable que obtiene la cookie en el código de CityAds                     

<!--Pixel – Checkout--><script async="async" script="" type="text/javascript">
 
<noscript>
<img src='https://cityadspix.com/track/{{xcnt_order_id}}/ct/q2/c/24015?click_id={{cityAds_clickID_cookie}}&customer_type={{xcnt_customer_type}}&payment_method={{xcnt_payment_method}}&order_total={{xcnt_order_total}}&currency={{xcnt_currency}}&coupon={{xcnt_coupon}}&discount={{xcnt_discount}}&basket={{xcnt_basket}}' width="1" height="1">
</noscript>

 

Conclusiones

De esta manera se queda integrado el sistema web a Cityads y Google tag manager, en la web cityads.molanco.com se puede ver todo lo explicado en pleno funcionamiento.