Acerca del uso de Google Tag Manager
Google Tag Manager (GTM) es un sistema de gestión de etiquetas que te permite añadir de forma rápida y sencilla códigos de medición y fragmentos de código relacionados, que se denominan de forma conjunta etiquetas , a tu sitio web o tu aplicación móvil. TikTok ha desarrollado una plantilla de etiquetas que puedes integrar en Google Tag Manager para añadir eventos de código personalizado del Píxel con muy pocos recursos de desarrollador.
En este artículo, se explican los pasos necesarios para añadir la etiqueta del Píxel de TikTok del lado del cliente a tu sitio web.
Requisitos previos
Necesitas un espacio de trabajo en Google Tag Manager .
Tienes que utilizar un contenedor web.
Necesitas tener instalado Google Tag Manager en tu sitio web.
Cómo empezar
Instalar el código base del Píxel de TikTok
Hay dos métodos de instalación del código base del Píxel de TikTok.
Nota: Utiliza solo uno de los dos métodos.
Método A: Instalación mediante el Administrador de eventos (recomendado)
Ve a Administrador de eventos de TikTok > Configurar eventos web > Configurar eventos web de forma automática a través de plataformas de socios.
2. Selecciona Google Tag Manager > Haz clic en Siguiente en el resto de las pantallas.
3. Sigue las pantallas e inicia sesión en la cuenta de Google que tengas vinculada con tu espacio de trabajo de GTM.
Para iniciar sesión en tu cuenta de Google, haz clic en el botón Conectar .
Selecciona el contenedor y el espacio de trabajo donde desees instalar el código base.
Una vez instalado el código base, puedes visitar nuestra plantilla en Google Tag Manager si haces clic en el enlace. A continuación, lleva a cabo los pasos de Creación de etiquetas de eventos de TikTok que se indican más abajo.
Método B: Instalación mediante Google Tag Manager
Añadir la plantilla de TikTok al espacio de trabajo en el lado del cliente
Inicia sesión en Google Tag Manager.
Ve a Plantillas > Buscar en galería y busca la plantilla Píxel de TikTok creada por TikTok.
3. Selecciona Añadir al espacio de trabajo para importar la plantilla a tu espacio de trabajo.
4. Guarda y cierra el editor de las plantillas.
Instalación del código base mediante HTML personalizado
Copia el código base de tu píxel de TikTok desde Administrador de eventos.
2. Ve a tu Espacio de trabajo > Selecciona Etiquetas > Selecciona Nuevo.
3. Asigna un nombre a tu etiqueta (por ejemplo, Código base del Píxel de TikTok) > Haz clic en Configuración de la etiqueta > Selecciona HTML personalizado.
4. Copia el código base del píxel de TikTok y pégalo en el campo HTML > Configura el activador como Todas las páginas.
Creación de etiquetas de eventos de TikTok
Después de instalar el código base, tienes que programar que se active alguno de nuestros 14 eventos de TikTok según el recorrido de tus clientes. No tienes más que seguir los pasos que se indican a continuación. Con cada evento que quieras crear:
1. Ve a tu Espacio de trabajo > Selecciona Etiquetas > Selecciona Nuevo.
2. Asigna un nombre a tu etiqueta (por ejemplo, ViewContent de TikTok) > Selecciona la plantilla que acabas de importar (Píxel de TikTok).
3. Ahora deberías poder elegir entre los 14 eventos que desees activar.
4. Por último, define el activador que prefieras. Por motivos de coherencia, te recomendamos que selecciones el evento personalizado de Google Tag Manager que invocas en tu página. Después, guarda la etiqueta.
Activar correspondencia avanzada
Correspondencia avanzada está disponible a través de las herramientas empresariales de TikTok para que las empresas puedan enviar información de clientes cuya privacidad esté protegida para crear mejores correspondencias entre los eventos en sitios web y los anuncios de TikTok. Te recomendamos pasar correos electrónicos y números de teléfono con hash para los eventos web desde tu capa de datos para aumentar la eficacia del rendimiento de los anuncios y de las atribuciones en TikTok. Más información.
1. Edita la etiqueta que has creado y elige entre pasar en Correo electrónico con hash SHA256 / Número de teléfono con hash SHA256 o simplemente el correo electrónico / teléfono.
Nota: Para ello, escribe{{ y selecciona las variables disponibles.
2. Después de configurar las variables, haz clic en Guardar tu etiqueta.
Ahorro del trabajo pesado con Comercio electrónico mejorado/Comercio electrónico estándar
Si has activado las funciones de Google Comercio electrónico mejorado o Comercio electrónico estándar para hacer un seguimiento de los eventos de compra online en Google Analytics, puedes aprovechar las capas de datos de comercio electrónico para pasar parámetros adicionales a TikTok y activar productos como Retorno de la inversión publicitaria (ROAS), Dynamic Showcase Ads (DSA) y Optimización basada en el valor (VBO). Más información.
1. Edita la etiqueta que has creado más arriba.
2. En Configuración de parámetros > Marca la casilla Utilizar capas de datos de comercio electrónico de Google Analytics .
3. Selecciona Comercio electrónico mejorado o Comercio electrónico estándar.
4. Selecciona los activadores correctos que inicien tus eventos de Comercio electrónico mejorado.
5. Simplemente accede a tu sitio web > inspecciona el elemento (F12) > escribe dataLayer en la consola > localiza los eventos de comercio electrónico mejorado y estándar que suelen incluir los detalles del producto y comprueba el valor de evento .
6. El valor del evento debe ser tu activador de evento personalizado.
7. Guarda tu etiqueta.
Activar parámetros adicionales
Si no utilizas Comercio electrónico mejorado o Comercio electrónico estándar de Google, puedes pasar parámetros adicionales a TikTok con las capas de datos. Consulta la documentación de TikTok para obtener más información sobre los parámetros.
Opción 1: Sin artículos
Esta opción está pensada para los anunciantes que no alojan sitios web de e-commerce.
1. Selecciona Sin contenido si no tienes previsto enviar parámetros desde tu evento.
2. Pasa el valor y la moneda si tienes previsto medir el Valor total en tus informes de TikTok pasándolos desde la variable de capa de datos que contenga esos valores.
3. Guarda tu etiqueta.
Opción 2: Parámetros de un solo artículo
Esta opción está pensada para los anunciantes cuyos eventos son, por lo general, para un solo producto. Estos son algunos ejemplos de eventos de Contenido único :
Un usuario que ve una página que tiene solo un artículo.
Un usuario que añade un solo artículo al carrito pero con varias cantidades.
1. Correlaciona los campos en función de las variables de la capa de datos. Mira algunos ejemplos de correlación:
2. Si has cargado catálogos en el Administrador de catálogos de TikTok, debes tener en cuenta que tus productos tendrán un ID de SKU y la ID del grupo de artículos. A continuación, se muestra una tabla de correlaciones que puedes utilizar. Si tu content_id representa 1 producto, utiliza producto, si por el contrario tu content_id representa un grupo de productos, utiliza grupo_productos.
3. A continuación, guarda tu etiqueta.
Opción 3: Parámetros de varios artículos
Esta opción está pensada para los anunciantes cuyos eventos son, por lo general, para varios productos. Estos son algunos ejemplos de eventos de Contenido múltiple :
Un usuario paga varios artículos del carrito
Un usuario completa el pago de varios artículos
1. Con los eventos de contenido múltiple, tú o los desarrolladores de tu sitio web tendréis que generar una estructura de varios contenidos y añadirla a vuestro dataLayer. Consulta un ejemplo de estructura de artículos para la capa de datos contents :
// contents
[
{
content_id: ’SKU 1’.
content_name: ’nombre del producto 1’,
content_type: ‘producto’,
quantity: 1,
price: 10
},
{
content_id: ‘SKU 2’,
content_name: ‘nombre del producto 2’,
content_type: ‘producto’,
quantity: 2,
price: 30
},
{
content_id: ‘SKU 3’
content_name: ‘nombre del producto 3’,
content_type: ‘producto’,
quantity: 1,
price: 50
}
]
2. Selecciona dataLayer en el campo de contenido.
3. Guarda tu etiqueta.
Migrar desde una versión antigua
Desde el Creador de eventos a la plantilla de Google Tag Manager
Lee esta sección solo si has implementado con anterioridad el Creador de eventos del Píxel de TikTok en Google Tag Manager.
Migrar desde el Creador de eventos del Píxel de TikTok para utilizar nuestra plantilla de Google Tag Manager significa cambiar por completo al código personalizado del Píxel de TikTok. Si ya has configurado el Creador de eventos del Píxel de TikTok en Google Tag Manager, deberías tener instalado el código base en Google Tag Manager y habrás configurado los activadores a través del Selector de CSS o de la URL en el Administrador de eventos de TikTok.
Comprueba que tienes instalada la plantilla en Google Tag Manager del paso 1.
Sigue el paso 2 para crear etiquetas de eventos y configurar los parámetros, la correspondencia avanzada, etc.
Te recomendamos que elimines el Creador de eventos de TikTok Ads Manager para no duplicar los eventos.
Ve a Administrador de eventos y edita tu evento.
Dado que ahora las contribuciones a AddToCart se hacen mediante el código personalizado a través de Google Tag Manager y el Creador de eventos, elimina los eventos del Creador de eventos yendo en primer lugar al Creador de eventos.
Después, elimina el evento del Creador de eventos haciendo clic en el botón de la papelera.
Repite la acción y elimina todos los eventos del Creador de eventos.
Desde el código personalizado a la plantilla de Google Tag Manager
Lee esta sección solo si has implementado con anterioridad el código personalizado del Píxel de TikTok mediante la etiqueta HTML en Google Tag Manager.
1. Comprueba que has seguido el Paso 1 para añadir nuestra plantilla de Google Tag Manager a tu espacio de trabajo.
2. Si ya has instalado el código base del píxel de TikTok en tu etiqueta HTML de Google Tag Manager > Selecciona Editar después de abrir tu etiqueta HTML personalizada.
3. Sustituye tu etiqueta HTML personalizada por la plantilla instalada y lleva a cabo el Paso 3 para configurar los parámetros, la correspondencia avanzada, etc.
4. Guardar, previsualiza y publica tus eventos.
Resolución de errores comunes
Mensajes de error
No tienes una cuenta de GTM, No se puede encontrar el contenedor, No se puede encontrar el espacio de trabajo: asegúrate de que no has eliminado la cuenta y el espacio de trabajo de Google Tag Manager. Si tu lista de cuentas es nula y has eliminado también el contenedor predeterminado, verás uno de los siguientes mensajes de error.
No se puede encontrar la cuenta: si la ruta de la primera cuenta de la lista es nula, recibirás este mensaje de error.
Error en GTM al realizar la vinculación del píxel: asegúrate de que no estás instalando un píxel que ya se haya conectado a tu cuenta de GTM; de lo contrario, recibirás este mensaje de error. Comprueba tu cuenta de Google Tag Manager para confirmar si el píxel se ha instalado anteriormente (si se repite la instalación de píxeles puede que se registren datos de eventos repetidos).
Otros problemas
No aparecen datos en el Administrador de eventos: aunque hayas conectado el Píxel de TikTok a Google Tag Manager, si el contenedor elegido no se ha instalado correctamente en la página de destino, el Píxel de TikTok no registrará bien los datos.
Eventos no creados: si bien los eventos se precumplimentarán tras la creación del píxel, los eventos deben definirse antes de que se inicie cualquier tipo de seguimiento. Obtén más información sobre cómo crear eventos.
Asistencia
Si tienes alguna pregunta, ponte en contacto con tu representante de ventas de TikTok.
No edites ningún código de la plantilla para preservar la funcionalidad deseada.
Si tienes alguna pregunta o algún problema con las funciones, rellena una solicitud de GitHub aquí.