Tracking Code Manager es el plugin que utilizo para insertar el píxel de Facebook en WordPress y cualquier otro código de seguimiento que necesite.
La necesidad de agregar a nuestro sitio web algún código javascript tanto para efectuar seguimientos del comportamiento de los visitantes como para integrar alguna aplicación externa que dote de ciertas funciones adicionales a nuestra página es cada vez más frecuente.
Y en WordPress se puede hacer muy fácil sin necesidad de meterle mano al código de la plantilla, lo que podría ocasionar que el píxel de seguimiento se pierda con la primera actualización.
El caso más común es cuando necesitamos insertar Google Analytics en WordPress. Si tienes una página o blog es imprescindible que hagas un seguimiento de tus visitas para tener información que te ayuda a tomar mejores decisiones sobre tu página.
Para el mencionado caso ya existen plugins específicos que nos permiten una instalación bien sencilla e incluyen la integración en tu WordPress de ciertas funciones particulares de esta herramienta.
Algo similar ocurre cuando necesitamos verificar el sitio web ante las consolas de los distintos buscadores (Google, Bing, etc…) para los cuales es recomendable el plugin Yoast SEO u otro plugin SEO.
Pero la mayor parte de las veces no habrá un plugin específico para instalar el código o píxel de tracking, y en estas ocasiones Tracking Code Manager es una solución interesante porque es un plugin para WordPress que te permite insertar varios códigos de seguimiento en tu página (hasta 6 en la versión gratuita) y gestionar fácilmente dónde se coloca cada uno de ellos.
Yo actualmente lo utilizo para insertar en todas las páginas y entradas de mi sitio web el píxel de Facebook Ads, y poder así crear en Facebook un público con las personas que visitaron mi página para mostrarle mis anuncios dentro de la propia red social.
A su vez este píxel me permite medir las conversiones de mis campañas. Por ejemplo en una campaña para captar nuevos suscriptores donde necesito saber cuántas personas se registraron luego de acceder desde los anuncios de Facebook.
Pero ésto es solo un ejemplo, hace un tiempo hice unas pruebas con Twitter Ads y también necesitaba insertar un código de seguimiento. Y en campañas de publicidad en AdWords también necesitarás insertar un código para medir las conversiones o hacer retargeting.
Y también muchas otras herramientas externas que quieras integrar en tu página pueden pedirte de insertar un código, por ejemplo para mostrar un pop-up o herramientas de analítica adicionales a Google Analytics.
Tracking Code Manager es un plugin que te da la capacidad de gestionar todos los códigos de seguimiento en una sola página.
Supongamos que necesitas crear un público personalizado de Facebook Ads con las visitas de tu página, o hacer retargeting en Facebook o en Google, utilizar una herramienta de chat, alguna herramienta de análisis del comportamiento de usuarios, popups, píxels de seguimiento de afiliados, etc., etc…
Para cada servicio que utilices necesitarás insertar un código de seguimiento que te proveerá el desarrollador de la herramienta y que generalmente se debe colocar entre las etiquetas <head> y </head> o bien <body> y </body>.
Y en ésto Tracking Code Manager es genial porque te permite gestionarlos todos de una manera clara y eligiendo en qué páginas o entradas mostrar cada uno de ellos.
Las principales características de este plugin son:
A continuación te muestro cómo es y cómo utilizar este plugin para insertar el píxel de Facebook o cualquier código de tracking. Te recomiendo poner el video en pantalla completa y elegir la resolución HD.
Para suscribirte al canal de YouTube y no perderte los próximos videos sobre WordPress haz clic aquí.
Una vez instalado y activado el plugin podrás acceder a los ajustes desde la opción Ajustes -> Tracking Code Manager.
Lo primero que verás sera la pestaña Manager en la cuál se pueden consultar los distintos códigos que tengamos insertados. La primera vez no tendrás ninguno lógicamente.
Cada código tiene disponible su shortcode para copiarlo y un botón Edit desde el cual podrás acceder a las opciones del mismo para modificarlas. Por ejemplo podrás modificar si se muestra en todo el sitio web o solo en algunas páginas y/o entradas concretas.
Lo primero que tendrás que hacer es ir a la pestaña Add New Script para crear tu primer código de seguimiento. Dentro de ella encontrarás los siguientes campos a completar.
Active: debe estar marcado para indicar que este código debe mostrarse en las páginas indicadas de tu sitio web. Si en algún momento quieres desactivar momentáneamente este código puedes simplemente desmarcar esta casilla.
Name: debes definirle un nombre de referencia a cada código que guardes.
Paste your Tracking Code here (pega tu código aquí): es un área negra en la que debes pegar el código que te haya dado el proveedor de la herramienta que quieres vincular, por ejemplo el píxel de Facebook.
Ten especial cuidado de que el código te quede exactamente igual a como lo copiaste ya que si faltara alguna parte no funcionaría o incluso podría causar un fallo en tu página.
Position inside the code (posición del código): esta opción es para indicar en qué parte del código HTML de tu página se debe colocar el código de seguimiento. Esto te lo indica el desarrollador de la aplicación y puede ser alguna de estas opciones:
Show only on device (mostrar solo en estos dispositivos): Te permite definir si el código se mostrará en cualquier dispositivo (es lo más común) o si solo debe mostrarse en dispositivos móviles, o solo en tablets, o solo en computadoras de escritorio. Ya que podría darse el caso de que necesites utilizar una herramienta específica para celulares o tablets por ejemplo.
Where do you want to add this code? (¿dónde quieres añadir este código?): En este caso debes elegir la opción Standard code tracking in your WordPress excepto que tu página sea una tienda online.
In which page do you want to insert this code? (¿en qué páginas quieres insertar este código?): Ahora debes indicarle concretamente en qué páginas o entradas deberá salir este código. Las opciones son:
Luego de indicar todas estas opciones no olvides de guardar con el botón Save. Ten en cuenta también que después podrás cambiar cualquiera de estas opciones ingresando con el botón Edit en la pestaña Manager.
En la pestaña Settings no vas a encontrar mucho para configurar. Lo más importante es Meta box information, donde puedes definir si la caja de Tracking Code Manager se muestra en el editor de entradas y/o de páginas.
Como complemento a las opciones que vimos en Add New Script el plugin Tracking Code Manager te permite definir qué códigos de seguimiento mostrar en cada entrada o página directamente desde el editor de cada una.
Para ésto vas a encontrar en la columna de la derecha (cuando estás en el editor) un cuadro con el título Tracking Code PRO by IntellyWP con un listado de todos tus códigos guardados para seleccionar cuáles incluir y cuales no en esta entrada o página en particular.
De forma predeterminada aparecen marcados según las configuraciones generales y puedes cambiarlo para la página/entrada en cuestión. E incluso ahí mismo puedes pegar un código de seguimiento para que se instale en esa única página o entrada.
Para comprobar si un código se está publicando efectivamente en tu sitio web puedes hacer lo siguiente. Tanto en el navegador Chrome como en Firefox carga alguna de las páginas en la que debería estar el código de seguimiento o el píxel de Facebook.
Una vez que cargó toda la página haz Ctrl + U y se abrirá una nueva ventana con el código fuente (HTML + Javascript) de la página.
Escribe Tracking Code Manager y deberías ver que se resalta dentro del HTML de la página un comentario, luego del cual aparece tu código ya insertado.
Si compruebas que el código de seguimiento está correctamente instalado pero por alguna razón no funciona deberás consultar con el soporte de la herramienta en cuestión.
Eso es todo, no tengo dudas de que este plugin te va a resultar muy útil si necesitas instalar en tu página web el píxel de Facebook o cualquier herramienta de analítica. Adicionalmente puedes consultar la documentación oficial (en inglés).
Si te gustó y sirvió este tutorial, por favor compártelo en tu red social favorita. Así ayudamos también a otras personas. Utiliza los botones de abajo.
Al momento de activar el constructor Divi se crea una nueva opción en el menú…
Divi es un constructor para WordPress que se instala como un si fuera un tema…
En esta guía te muestro paso a paso cómo crear una caja con información del…
En esta guía te muestro cómo cambiar el encabezado de la página home para que…
En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…
En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…