Seleccionar página

Crear Tarjetas enriquecidas usando código JSON-LD y Google Tag Manager

Esta semana me he enfrentado a un desafío tremendo, aprender a utilizar el Google Tag Manager para introducir tarjetas enriquecidas para los productos.

Hay muchísima información en internet sobre qué son y lo cucas que quedan para ocupar más espacio, pero no todo el mundo dice cómo hacerlas, y menos aún sobre cómo hacer UNA ÚNICA ETIQUETA en vez de tener que hacer una por producto.

Hoy vamos a arreglar eso.

La tarjeta enriquecida o rich snippet

En primer lugar existen tres formatos de etiquetado: microformatos, RDFa y JSON-LD (las reglas de escritura están en schema.org), sin embargo hay que saber sintaxis de códigos, y siendo realistas, pocos saben hacer eso y además se dedican al SEO. (Otra opción son los datos estructurados de Google Search Console).

Esta es la parte fácil, ya que sólo tenemos que entrar en la opciones de tarjetas de Google y coger el código que queramos (productos, artículos, páginas, libros, reviews…): Google Developers

 

1- Crear una cuenta en Google Tag Manager

Como Adwords o Analytics, tienes que introducir el código de Google Tag para vincularlo a una web, te pide un código para el <head> y otro para el <body>. Una vez hecho, ya tenemos la vinculación.

2- Crear una tarjeta enriquecida mediante los recursos de Google Developers.

Como decía antes, lo vamos a hacer para productos, con lo cual pinchamos en single product json-ld markup y nos abre un código, de aquí tenemos que decidir qué queremos que se muestre en nuestra tarjeta. En mi caso, quiero el título, descripción, imagen principal, precio, valoraciones y nº de valoraciones, con lo cual elimino el resto del código (marca, SKU, vendedor, itemcondition).

Una vez borrado el código hay que validarlo para que no haya errores, por ejemplo, si a continuación cerramos una frase } no puede haber una coma antes. Os pongo el ejemplo de un código validado sin errores. Por cierto, he cambiado el priceCurrency de USD a EUR ya que vendo en Euros.

3- Crear la etiqueta en Google Tag Manager

Ya tenemos nuestra tarjeta enriquecida beta y la cuenta vinculada a nuestra web. Toca crear la etiqueta. Elegimos una etiqueta de “html personalizado” y pegamos el código JSON-LD.

Como trigger o activador ponemos “paginas vistas” Page URL, que incluya /productos/. El término depende de cómo se muestren vuestras URL de tienda, hay tiendas que son mydominio.es/tienda/categoria-producto/producto/, por ejemplo. Si posteriormente para cada categoría se muestra una URL diferente crearemos tantas etiquetas como variaciones de la URL más alta jerárquicamente tengamos.

4- Variables para cada producto.

Esta ha sido la parte fácil, hasta este punto podemos llegar todos. Si no queremos complicarnos la vida buscando información (porque os lo digo, estuve 3 días sólo con esto), podemos crear una etiqueta personalizada para cada producto (esto es genial si tenemos 3 productos o si queremos liar a un cliente con que hay que hacer mucho trabajo), pero vamos, lo ideal es que la misma etiqueta valga para todos los productos.

Es por ello que tenemos que crear variables. Estas variables se crean en el apartado variables, justo debajo de activadores en Google Tag Manager. Y necesitaremos una por cada cosa: nombre del producto, descripción, imagen, precio, valoraciones y nº de valoraciones.

Creamos un activador y le damos un nombre que identifiquemos, por ejemplo RS – productName, y elegimos que sea un elemento DOM.

 

RS- productName

Elemento DOM, Elemento de selección: CSS Selector

Selector de elementos: title

 

RS – productDescription

Elemento DOM, CSS Selector,

Selector de elementos: meta[property=”og:description”]

Selector de atributo: content

 

RS – productImage

Elemento DOM, CSS Selector,

Selector de elementos: meta[property=”og:image”]

Selector de atributo: content

RS – productPrice

Elemento DOM, CSS Selector,

Selector de elementos: p.price

RS – productRating

Elemento DOM, CSS Selector,

Selector de elementos: strong.rating

RS – productRatingCount

Elemento DOM, CSS Selector,

Selector de elementos: span.count

5- Integrar las variables en la etiqueta

Sustituimos el campo predefinido por el nombre de la variable entre dos corchetes de apertura y cierre: {{RS – productName}},  {{RS – productDescription}}, etc. Nos quedaría una monada como esta:

De la misma manera procederemos a etiquetar artículos, productos de reviews tales como libros o eventos, así como recetas. El límite es el cielo.

¿Te ha quedado claro cómo integrar Google Tags?

Si quieres integrar las tarjetas enriquecidas de Google en tu tienda online no tienes más que seguir los pasos. Pero si aún te quedan dudas o quieres que lo haga un especialista, no dudes en poner en contacto conmigo a través del formulario o en los comentarios de este artículo.

Google Tag Manager – Editar productos con Rich Snippets
Valora este artículo
riDDim Marketing