Seguiment d’impressions, clics i CTR d’articles en Ghost

Fa uns dies que investigue i faig diferents proves amb l’objectiu de fer el seguiment de clics, impressions i CTR amb Google Analytics dins de la plataforma Ghost.

La idea és partir del comerç avançat i passar-li la informació necessària, substituint els productes de venda per articles de notícies, les marques dels productes per l’autor i les variants pel valor de les etiquetes.

L’experiment també el vaig fer en WordPress, i prompte us enllaçaré l’article des d’este.

Problemes actuals del codi

Alguns problemes que tinc i que de moment no he solucionat per a este cms són:

• No he aconseguit que les paginacions mantinguen el número real de la posició, és a dir, si en la pàgina u hi ha nou articles, en la segona pàgina hauria de començar per la desena posició. Crec que si aconseguisc extraure la paginació per mitjà d’una variable, podria fer una xicoteta operació per a solucionar-ho.
• Tampoc he aconseguit passar la variable llista on s’imprimix l’article. Açò passa perquè es troba en el fitxer post-card.hbs i, en escriure la variable {{title}}, em trau la del post i no la de la pàgina.

Com inserir el comerç avançat en articles de Ghost

Ací només usarem impressions, clics i CTR, encara que podem fer-ho molt més complex i fer servir altres elements, com per exemple entendre el temps de permanència com afegir un producte al carret i la subscripció a la newsletter com una transacció.

L’script per a fer el seguiment d’impressions i la funció que hem de cridar quan es fa clic els vaig posar en defaul.hbs i és este:

Ghost 2.0 i 3.0

<!-- SCRIPT COMERCIO AVANZADO PARA POSTS-->

<script>
dataLayer.push({
'ecommerce': 
	{
		'currencyCode': 'EUR',
		'impressions': 
			[
			{{#foreach posts}}
			{
				'name': '{{title}}', // Nombre del post
				'id': '{{id}}', //  ID del post
				'price': '1',
				'brand': '{{author}}', // ID del Autor del artículo (recordad que en analytics no se deben guardar nombres ni emails)
				//'category': '{{primary_tag}}', // Primera categoría a la que pertenece el artículo
				//'variant': '{{tags}}', // etiquetas
				'list': '{{page}}', // Título de la página donde se mostró el post
				'position': 1,
			},

		{{/foreach}}
			]
	}
});
</script>
<script>

function productObject(titulo, id, marca, categoria, /*lista,*/ enlace) { //Función para trackear el click donde se recogen las variables para hacer seguimiento - Se debe llamar a la función y pasar las variables al pulsar sobre los artículos

dataLayer.push({
'event': 'productClick',
'ecommerce': {
'click': {
'actionField': {'list': 'Post clicado'}, // Optional list property.
'products': [{
'name': titulo, // Name or ID is required.
'id': id,
'price': '1',
'brand': marca,
'category': categoria,
'variant': 'variante'
}]
}
},
'eventCallback': function() {
document.location (enlace)
}
});
}
</script>
<!-- SCRIPT COMERCIO AVANZADO PARA POSTS-->

Dins de /partials/post-card.hbs, en els enllaços que et porten als articles, vaig introduir l’esdeveniment onclick següent:

onclick="productObject('{{title}}','{{id}}','{{authors autolink="false"}}','{{tags autolink="false"}}','{{url}}')"

Recollir les dades amb Tag Manager

Com pots observar, les dades s’estan enviant amb un dataLayer.push. Estes dades d’impressions i clics has de recollir-les amb la configuració bàsica de Google Tag Manager del comerç avançat per a recollir estes dades.

La configuració consistiria a crear una etiqueta amb la informació següent per a les impressions:

• Tipus d’etiqueta: Universal Analytics
• Tipus de seguiment: pàgina vista
• Habilitar funcions de Comerç electrònic millorat: true
• Usar la capa de dades: true
• Activador: event és igual a gtm.dom

I una altra amb la informació següent per a recollir els clics:

• Tipus d’etiqueta: Universal Analytics
• Tipus de seguiment: esdeveniment
• Categoria d’esdeveniment: Ecommerce
• Acció d’esdeveniment: Product Click
• Habilitar funcions de Comerç electrònic millorat: true
• Usar la capa de dades: true
• Activador: event és igual a productClick

Finalment, no oblideu activar l’opció de comerç avançat des de Google Analytics.

Instal·lació en altres plataformes

Si has arribat a este article buscant informació sobre com instal·lar el comerç avançat en altres plataformes, et recomane que li faces una ullada a l’article que vaig escriure en el blog d’on treballe, on explique instal·lacions per a WordPress, Prestashop i també per a fer-ho únicament amb codi.

Si tens algun dubte o vols col·laborar en el codi, pots contactar amb mi a través de xarxes socials com twitter o linkedin, on sol estar més actiu, i trobaràs els enllaços en la part superior del blog.