¿Qué es y cómo instalar el píxel de TikTok con Google Tag Manager y modo desarrollador?

Si has incluido a TikTok en tu mix de medios y quieres disponer de una mejor forma de toma de decisiones en tu equipo puedes personalizar las reglas de los eventos con la implementación mediante Google Tag Manager (GTM).

Implementando el píxel de TikTok, podrás recopilar, analizar y comprender las acciones que hacen los usuarios en tu sitio web y atribuirlas a tus acciones de TikTok.

Cómo otros píxeles, con el pixel de Tiktok puedes hacer cosas cómo estas:

  • Medición del rendimiento de una campaña
  • Optimizar las campañas según el objetivo que deseas conseguir con ella
  • Crear audiencias con TikTok para configurar nuevas campañas

En esta guía te indicamos paso a paso la implementación avanzada.

¿Qué tienes que tener?

Para poder activar la implementación que te proponemos deberás tener algunos básicos:

  1. Cuenta de Google Tag Manager (e integrada con tu página web)
  2. Cuenta de TikTok

Guía de implementación del píxel TikTok con GTM

  1. Crea un píxel de TikTok
  2. Accede a tu cuenta de Google Tag Manager
  3. Selecciona el contenedor y agrega nueva etiqueta HTML.
  4. Pega el píxel.
  5. Configura el trigger del evento en la página que desees y selecciona “Una vez por página”

Cómo crear un píxel de TikTok

Accede a la plataforma de TikTok y crea un píxel. Te indicamos algunas recomendaciones para su configuración:

  • Longitud máxima del nombre del píxel: 128 caracteres
  • Indica un nombre que puedas reconocer, intenta que sea homogéneo con otros píxeles que tengas. Por ejemplo: Dominio.com-Ads

En Install Type selecciona “Install pixel code by 3rd party tool”:

Conéctate a la cuenta de Google con la que gestionas Google Tag Manager. Selecciona el contenedor y el espacio de trabajo.

Crear eventos personalizados (custom events) en TikTok

Tendrás que indicar los eventos sobre los que quieres realizar el seguimiento de las acciones del usuario:

  1. Clic sobre un elemento
  2. URL de destino
  3. Pop-ups

Para definir los eventos tendrás que elegir uno de los dos métodos:

  1. Introduce la URL,  actualiza la página y haz clic en el elemento sobre el que quieres realizar la acción.
  2. Añadiendo manualmente el selector CSS.

Hasta aquí la opción sencilla, pero si quieres de verdad pasar al siguiente nivel de implementación aquí vamos a poner la guía completa del modo desarrollador:

Cómo instalar TikTok Pixel desde modo desarrollador

El modo desarrollador, si usas la plataforma en inglés lo verás como “modo developer”, es un método de implementación del pixel de TikTok que da más flexibilidad a los eventos con los que configurar la acción de marketing. Permite a los anunciantes enviar parámetros en los eventos y es necesario para algunos productos de TikTok, entre los que se incluyen algunos basados en comportamiento web y retargeting.

Este modo de implementación es avanzado, requiere modificaciones en el código y lo recomendamos a clientes que tienen dedicado recursos técnicos.

Para crear el pixel sigue las instrucciones de la implementación básica, una vez creado selecciona la forma de implementación modo desarrollador (“Developer mode”).

Instalar el pixel code de TikTok

 Cuándo hayas elegido la forma de implementación “Developer mode”, verás que existen 3 componentes:

  1. Pixel base code
  2. Pixel event code
  3. Pixel helper

Los dos primeros pixeles (pixel base code y pixel event code) son necesarios instalarlos para que la configuración sea correcta. Pixel helper nos servirá para validar que el pixel de TikTok que has instalado ha sido lanzado.

 ¿Qué es el pixel code base de TikTok?

Para hacer que el pixel se lance y envíe los eventos con información desde una página para el seguimiento de las conversiones, el “base code” tiene que estar implementado en el código.

Para ello crea una etiqueta HTML en Google Tag Manager y copia tu código, que tendrá 2 partes.

<script>

//part1

!function (w, d, t) {

 w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie", "disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};



//part2

 ttq.load('{pixel ID placeholder}');

 ttq.page();

}(window, document, 'ttq');

</script>

 

La primera parte del código está destinada a las funciones generales, mientras que la segunda contiene 2 subpartes:

Parte 1:

ttq.load(‘{pixel ID placeholder}’)

Que cargará la parte específica del píxel según su configuración.

Parte 2:

ttq.page()

Que informará de la página del evento que se usará para verificar el código de instalación.

Pixel event code

Antes de empezar a configurar los eventos, te recomendamos verificar que el código base está bien implementado.

¿Qué es el pixel de código de evento?

Es el píxel con el que activa la información de acciones específicas para registrar las conversiones.

A continuación mostramos los eventos que actualmente TikTok soporta (la columna industria es una recomendación de uso, pero puedes usar los eventos que quieras adaptados a tu organización):

Industria Evento Descripción Código del evento
Eventos de E-commerce  Navegar por la página de detalles del producto Cuando un usuario visualiza detalles del producto. ttq.track(‘ViewContent’)
Añadir al carrito Cuándo un usuario añade un producto al carrito. ttq.track(‘AddToCart’)
Comienzo del proceso de pago Cuándo un usuario accede a la proceso de pago con al menos un producto. ttq.track(‘Checkout’)
Pago finalizado Cuándo un usuario completa el proceso de pago. ttq.track(‘Purchase’)
Registro de usuario Cuándo un usuario se registra en la web. ttq.track(‘Registration’)
Comienzo del proceso de compra Cuándo un usuario comienza el proceso de compra. ttq.track(‘StartCheckout’)
Añadir información de pago Cuándo un usuario añade información sobre el pago en el proceso de compra. ttq.track(‘AddBilling’)
Búsquedas Cuándo un usuario hace una búsqueda ttq.track(‘Search’)
Vista de una página Cuándo un usuario visita una página. ttq.track(‘Browse’)
Eventos de envío de un formulario Visualización de un formulario Cuándo un usuario visualiza un formulario en una página. ttq.track(‘ViewForm’)
Click en botón de formulario Cuándo un usuario hace clic en el botón de envío de un formulario. ttq.track(‘ClickForm’)
Envío exitoso de un formulario Cuándo un usuario completa un formulario con éxito. ttq.track(‘SubmitForm’)
Eventos sobre contactos telefónicos Página con detalle de contacto Cuándo un usuario navega por una página con posibilidad de consulta telefónica. ttq.track(‘ViewConsultationPage’)
Clic en el botón de llamada. Cuándo un usuario hace clic en el botón de contacto telefónico. ttq.track(‘ClickInConsultationPage’)
Consulta de llamada realizada. Cuándo un usuario lleva a cabo una consulta en la página. ttq.track(‘ConsultByPhone’)
Eventos de descarga de APP Página con información de descarga de la APP Cuándo un usuario navega por los detalles de descarga de una app. ttq.track(‘ViewDownloadPage’)
Click en botón de descarga de App Cuándo un usuario hace click en el botón de descarga de una app. ttq.track(‘ClickInDownloadPage’)
Click en botón de descarga hacia la “Play Store” Cuándo un usuario salta a un navegador y comienza la descarga de la app. ttq.track(‘ClickToDownload’)
Eventos personalizados Vista de página Cuándo un usuario navega por una página determinada. ttq.track(‘Browse’)
Click en un botón Cuándo un usuario hace clic en un botón específico de una página. ttq.track(‘ClickButton’)
Consulta online Cuándo un usuario hace click en el botón de consulta del website. ttq.track(‘Consult’)When a user clicks a consultation button on your website.

¿Cómo instalar el pixel event code?

Puedes llamar la función ttq.track(») en cualquier sitio de tu web dentro del <body>, lo único necesario es que tu página haya cargado antes el pixel base (configurado en pasos anteriores):

<body>

...

<script>

  ttq.instance('pixel_id_1').track('Purchase')

</script>

...

</body>

Si quieres hacer seguimiento de un elemento que se añade al carrito cuándo el usuario hace clic en el botón tan solo tendrás que asociar el siguiente código al trigger configurado por ejemplo para el seguimiento de Ecommerce de Google Analytics.

ttq.track('AddToCart', {

  content_id: '{{variable_content_id}}',

  content_type: '{{variable_content_type}}',

  content_name: '{{variable_content_name}}',

  quantity: {{variable_quantity}},

  price: {{variable_price}},

  value: {{variable_value}},

  currency: ''{{variable_currency}}'',

});

El código que introduces en Google Tag Manager deberás verlo parecido a:

//taking Add to Cart event as an example

// For single product 

ttq.track('AddToCart', {

   content_id: '301',

   content_type: 'product',

   content_name: 'dress',

   quantity: 1,

   price: 8,

   value: 9.2,

   currency: 'USD',

});

Otra opción sería meter más de un producto a la vez:El código que introduces en Google Tag Manager deberás verlo parecido a:

// For multiple products 

ttq.track('AddToCart', {

  contents: [

  {

    content_id: '301',

    content_type: 'product',

    content_name: 'dress',

    quantity: 1,

    price: 8,

  },

  {

    content_id: '401',

    content_type: 'product',

    content_name: 'dress',

    quantity: 1,

    price: 1.2,

  }],

  value: 9.2,

  currency: 'USD',

});

Y estos son todos los parámetros que puede introducir para recoger y organizar toda la recopilación de información:

Nombre del parámetro Descripción Obligatorio / Opcional Tipo de valor aceptado
content_type “content_type” es la propiedad del objeto que debe definirse para cualquier producto o grupo de productos según tu configuración de tu catálogo.

Si vas a hacer seguimiento de productos individuales configura el valor como “product”.

Si vas a asociar los eventos a grupos de productos configura el valor como “product_group”.

opcional product product_group
contents Emplea “contents” cuándo tienes multiples IDs de contenido. Si usas “contents” en tu parámetro debes incluir lo siguiente como subobjeto:

  • ID del producto
  • Cantidad del producto (número de artículos añadidos al carro o comprados)
Es obligatorio el content_id si estás configurando DPA (Dynamic Products Ad) Debe ser un “array” de objetos que contenga:

  • content parameter
  • id del subobjeto
  • cantidad del subobjeto
content_id* Producto o identificador del contenido cadena de texto
content_category Categoria de la página o del producto opcional cadena de texto
content_name Nombre de la página o del producto opcional cadena de texto
currency Hace referencia a la divisa usada. opcional, recomendado para configuraciones ecommerce enum(cadena de texto de las admitidas)
value Valor total del pedido opcional, recomendado para configuraciones ecommerce número
quantity* El número de productos que es añadido al carrito por los usuario opcional número
price* El precio del artículo opcional número
query Usado con el evento de búsqueda “search”. La cadena de texto debe ser las palabras empleadas por el usuario para realizar la búsqueda. opcional cadena de texto

Es importante prestar atención al campo precio (price) puesto que es el precio de un elemento, mientras que value” es el precio total del pedido.

Actualmente las monedas que soporta TikTok son

[«AED», «ARS», «AUD», «BDT», «BIF», «BOB», «BRL», «CAD», «CHF», «CLP», «CNY», «COP», «CRC», «CZK», «DKK», «DZD», «EGP», «EUR», «GBP», «GTQ», «HKD», «HNL», «HUF», «IDR», «ILS», «INR», «ISK», «JPY», «KES», «KRW», «KWD», «KZT», «MAD», «MOP», «MXN», «MYR», «NGN», «NIO», «NOK», «NZD», «PEN», «PHP», «PKR», «PLN», «PYG», «QAR», «RON», «RUB», «SAR», «SEK», «SGD», «THB», «TRY», «TWD», «USD», «VES», «VND», «ZAR»]

¿Qué pasa si ya tiene el pixel estándar de TikTok instalado?

Para eliminar duplicar el tracking debes eliminar el pixel estándar de TikTok. 

Cuál es la diferencia entre el modo estándar y el modo desarrollador

Si empleas el modo estándar, puedes definir eventos y disparadores en el gestor de eventos de la plataforma de publicidad de TikTok. Para muchos anunciantes y marcas el modo estándar puede ser suficiente.

Si usas el modo desarrollador puedes definir eventos y disparadores avanzados, combinándolo con Google Tag Manager no hará falta que todo el peso recaiga en desarrolladores. Si eres un usuario avanzado de Google Tag Manager tendrás muchas más flexibilidad para tu toma de decisiones. Sin duda el modo desarrollador es la mejor opción.

Si además vas a usar otros productos de TikTok como “Advanced Matching y DPA” tendrás que usar el modo desarrollador del pixel de TitkTok.

¿Cómo instalar más de un pixel de TikTok en el mismo website?

Actualmente es posible instalar más de un pixel de TikTok mediante el siguiente código. Cómo puedes ver en la lectura del código estamos llamando con “load” a los diferentes píxeles que estamos instalando.

<script>

!function (w, d, t) {

 w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group", "enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};

}(window, document, 'ttq');



ttq.load('pixel_id_1');

ttq.page();

</script>



<script>

!function (w, d, t) {

 w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group", "enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};

}(window, document, 'ttq');



ttq.load('pixel_id_2');

ttq.page();

</script>



<script>

!function (w, d, t) {

 w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group", "enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};

}(window, document, 'ttq');



ttq.load('pixel_id_3');

ttq.page();

</script>

Códigos de eventos para diferentes píxeles de TikTok

Si quieres puede hacer que cada pixel registre diferentes eventos, pero también puedes situarte en el escenario de que todos los píxeles recojan lo mismo:

Escenario 1. Cada píxel recogerá los mismos eventos

<script>

function () {

/* xxxxx */



ttq.load('pixel_id_1')

ttq.page()

}()

</script>



<script>

function () {

/* xxxxx */



ttq.load('pixel_id_2')

ttq.page()

}()

</script>



<script>

function () {

/* xxxxx */



ttq.load('pixel_id_3')

ttq.page()

}()

</script>



ttq.track('Purchase') // it will report three Purchase events for pixel_1 and pixel_2 and pixel_3

En esta situación, 

ttq.track('Purchase')

es lo mismo que:

ttq.instance('pixel_id_1').track('Purchase')

ttq.instance('pixel_id_2').track('Purchase')

ttq.instance('pixel_id_3').track('Purchase')`

porque ttq.track()  reportará a todos los píxeles instalados.

Escenario 2. Píxeles recogen diferentes eventos

<script>

function () {

/* xxxxx */



ttq.load('pixel_id_1')

ttq.page()

}()

</script>



<script>

function () {

/* xxxxx */ 



ttq.load('pixel_id_2')

ttq.page()

}()

</script>



<script>

function () {

/* xxxxx */



ttq.load('pixel_id_3')

ttq.page()

}()

</script>



ttq.instance('pixel_id_1').track('Purchase')

ttq.instance('pixel_id_2').track('Event 2')

ttq.instance('pixel_id_3').track('Event 3')

Conclusiones ¿Cómo empezar?

Esperamos que este artículo te haya solucionado algunas dudas y aumentado tu conocimiento sobre el píxel de TikTok. Siguiendo los pasos que hemos recopilado en este artículo deberías poder comenzar a hacer el seguimiento de tus acciones de marketing.

Recuerda:

Usa la implementación estándar si quieres hacer un seguimiento básico, suficiente para la mayoría de webs.

Usa la implementación para desarrolladores si quieres hacer un seguimiento preciso y personalizado de las conversiones de tu estrategia de TikTok.

Si tienes dudas, no dudes en preguntarnos cómo podemos ayudarte en tu negocio digital.

¿Quieres descargarte esta Guía de implementación del pixel de Tik Tok en PDF? Déjanos tu email y te la enviamos.

Si quieres seguir aprendiendo visita estos artículos:

Multiplica tu negocio online

Haz un embudo de conversión con Facebook Ads

6 redes sociales raras, y no está TikTok

iSocialWeb

Agencia especializada en ingeniería del marketing digital. Adquisición de tráfico, análisis y optimización de resultados.