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 con nosotros a través del formulario o en los comentarios de este artículo.
2 comentarios
Se ve que te lo has currado Luis, yo estoy intentandolo con los cursos de Tramuntanadiving.com pero siendo servicios es mas complicado.
Sabrías decirme como hacerlo?
Un saludo
Buenas tardes Cosme, me alegra que te haya gustado,
Básicamente tendrías que crear una etiqueta JSON variable de cursos (JSON cursos).
Y de la misma genera, generar en Tag Manager variables para los elementos correspondientes: nombre, descripción.
Si quieres el tema precio, puedes ver de integrarlo como un elemento más del Json y hacer la variable en Tag Manager para el precio.