Cómo configurar el código de seguimiento

  • Base de conocimiento
  • Responsive Website Builder
  • Cómo configurar el código de seguimiento
  • Ayuda > Responsive Website Builder > Avanzado

Perspectiva general

Configurar un código de seguimiento permite un mayor conocimiento y análisis de la actividad de los que visitan el sitio. Hay muchos proveedores diferentes de servicios de análisis web y soluciones de seguimiento en la web. Este artículo explica cómo agregar algunas de las soluciones de seguimiento de uso más común a su sitio adaptable de Duda. Específicamente analizaremos Google Tag Manager, Google Analytics, seguimiento de Google Ad Words y píxel de seguimiento de Facebook. Esta es una configuración muy avanzada, por lo que quizás le convenga buscar ayuda de desarrolladores para que implementen el código para usted.

Información importante

Para las siguientes guías, ya deberá tener los fragmentos de código de estos distintos servicios. Estas guías explican cómo implementar el código, pero no explican el propósito, las mejores prácticas ni la funcionalidad del código. Duda recomienda que se familiarice con estos servicios antes de implementarlos revisando los extensos análisis en línea sobre estas soluciones de seguimiento, que puede encontrar en sus sitios web o mediante búsquedas en la web.

Google Tag Manager

Agregar Google Tag Manager

El código Tag Manager que recibe de Google debería parecerse a los siguientes fragmentos. Este código tiene dos partes, una sección "script" y otra "no script". Esta diferencia será importante más adelante en esta guía. Nota: El siguiente código es solo un ejemplo -no lo copie directamente en su sitio. Asegúrese de obtener el código correcto de Google.

Sección de script Sección de no script

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

1. Primero debe acceder a la sección de encabezado global. Haga clic en "Configuración" en el menú de la izquierda y luego seleccione la subsección "HTML de encabezado".

2. Coloque la parte "script" del código de Tag Manager en la sección "HTML de encabezado" y haga clic en Guardar. 

Nota: Todo el código anterior es solo un ejemplo -no copie esto directamente en su sitio. Asegúrese de obtener el código correcto de Google Tag Manager.

3. Navegue al "Modo de desarrollador" haciendo clic en el símbolo </> en la barra superior.

4. Expanda la sección "HTML/CSS del sitio" y haga clic en la sección "body-end.html" . Coloque la parte "no script" del código en esta sección. Luego, haga clic en Guardar.

Notas y consideraciones para Google Tag Manager

  • Google recomienda colocar el código "no script" en el principio de la sección "cuerpo". Esta es una solución alternativa que sugiere Google para superar las limitaciones de navegadores web muy viejos que no cargan códigos de encabezado.
  • La sección body-end.html del modo de desarrollador sirve para agregar el código "noscript".
  • Para obtener información sobre cómo configurar Tag Manager con su cuenta de Google, busque ayuda de Google.

Seguimiento de Google AdWords

Agregar seguimiento de Google AdWords

El código de seguimiento de Google AdWords que recibe de Google debe ser similar a la siguiente imagen.


Nota: Todo el siguiente código es solo un ejemplo -no lo copie directamente en su sitio. Asegúrese de obtener el código de seguimiento correcto de Google AdWords.

<!-- Google Code for Add to Cart Conversion Page
	In your html page, add the snippet and call goog_report_conversion
	when someone clicks on the chosen link or button. -->
	<script type="text/javascript">
	 /* <![CDATA[ */
	goog_snippet_vars = function() {
	  var w = window;
      w.google_conversion_id = 12345678;
	  w.google_conversion_label = "abcDeFGHIJklmN0PQ";
	  w.google_conversion_value = 13.00;
	  w.google_conversion_currency = "USD";
	  w.google_remarketing_only = false;
	}
	// DO NOT CHANGE THE CODE BELOW.
	goog_report_conversion = function(url) {
	  goog_snippet_vars();
	  window.google_conversion_format = "3";
	  var opt = new Object();
	  opt.onload_callback = function() {
	  if (typeof(url) != 'undefined') {
	    window.location = url;
	  }
	}
	var conv_handler = window['google_trackConversion'];
	if (typeof(conv_handler) == 'function') {
	  conv_handler(opt);
	  }
        }
	/* ]]> */
	</script>
	<script type="text/javascript"
	src="//www.googleadservices.com/pagead/conversion_async.js">
	</script>

1. Primero deberá acceder a la sección de encabezado global. Haga clic en "Configuración" en el menú de la izquierda y luego seleccione la subsección "HTML de encabezado".

2. Coloque el código proporcionado por Google en esta sección, luego haga clic en Guardar.

Una vez que haya agregado el código de seguimiento a la sección de encabezado, debe agregar el código al widget que desea se considere el evento de seguimiento.
Tome en cuenta que AdWords no diferencia entre seguimiento de clics y cargas.

3. A continuación, debe agregar el seguimiento de Google a los enlaces individuales. Por ejemplo, si usted quisiera agregar seguimiento a un clic de botón, entonces debe ir al botón en el editor y hacer clic con el botón derecho para hacer aparecer el menú de abajo y luego seleccionar select HTML/CSS

4. Una vez que vea el HTML del widget del botón, encuentre la etiqueta <a> y agregue el siguiente fragmento a esta sección.

onclick=";return try{goog_report_conversion('http://example.com/your-link')}catch(e){}"

 

Nota: El código de arriba es solo un ejemplo -no lo copie directamente en su sitio. Asegúrese de obtener el código correcto de Google.

Notas y consideraciones para Google AdWords

Google recomienda usar:

onclick="goog_report_conversion ('http://example.com/your-link')"

El que usamos también nos permite hacer seguimiento de estadísticas.

Cuenta Google Analytics

Agregar Google Analytics

Agregar Google Analytics a widgets individuales ofrece otra manera para que haga un seguimiento de las estadísticas de ciertas funciones.

1. Verifique que Google Analytics ya esté configurado en su sitio web. Para hacer esto, vaya a configuración del sitio y luego haga clic en la sección "Google Analytics". Pegue su código de Google Analytics en el campo provisto.

2. Una vez agregado el código, puede establecer widgets individuales para que se les haga seguimiento modificando el HTML del widget. Para hacer esto, haga clic con el botón derecho en el widget al que desea que se la haga seguimiento y haga clic en "Editar HTML/CSS".

3. Ingrese su código de Google Analytics. 

Nota: El código que copie y pegue de Google no funcionará. Debe modificar el código de Google para que el seguimiento se notifique al análisis web adecuado. Si no especifica la cuenta de Google Analytics a la que se notificará agregando el c., entonces no se hará seguimiento al evento en lo absoluto.

Antes de la modificación: onClick="_gaq.push(['_trackEvent', 'whitepaper', 'download', 'SEO is great', 5, true]);"
Después de la modificación: onClick="_gaq.push(['c._trackEvent', 'whitepaper', 'download', 'SEO is great', 5, true]);"

4. Haga clic en Actualizar para guardar sus cambios.

Notas y consideraciones para Google Analytics 

Insistimos, es muy importante que agregue el c. al código. Si no especifica la cuenta de Google Analytics, no se hará seguimiento al evento.

Píxel de seguimiento de Facebook

Puede agregar Píxel de seguimiento de Facebook a su sitio web adaptable para hacer seguimiento de eventos Cree su código de Píxel de seguimiento de Facebook en laficha Píxel de Facebook.

Agregar Píxel de seguimiento de Facebook

Sección de script Sección de no script

<!-- Facebook Pixel Code --> <script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXXXXXXXX');
fbq('track', 'PageView');
</script>

<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&amp;ev=PageView&amp;noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

Acceda a la sección Encabezado de HTML haciendo clic en "Configuración" en el menú de la izquierda y luego seleccione la subsección "HTML de encabezado".

Coloque la parte del código proporcionado por Facebook en la sección HTML del encabezado, luego haga clic en Guardar. 

Nota: Todo el código anterior es solo un ejemplo; no lo copie directamente en su sitio. Asegúrese de obtener el código correcto en código de píxel de Facebook.

3. Navegue al "Modo de desarrollador" haciendo clic en el símbolo </> en la barra superior.

4. Expanda la sección "HTML/CSS del sitio" y haga clic en la sección "body-end.html" . Coloque la parte "noscript" del código en esta sección. Luego, haga clic en Guardar. 

Notas y consideraciones para Píxel de seguimiento de Facebook.

  • Al igual que Google Tag Manager, Facebook recomienda colocar el código "no script" en el principio de la sección "cuerpo". Esta es una solución alternativa como sugerencia para superar las limitaciones de navegadores web muy antiguos que no cargan códigos de encabezado.
  • La sección body-end.html del modo de desarrollador sirve para agregar el código "noscript".
  • Para obtener más información sobre Implementación del píxel de Facebook, consulte esta guía.