Cómo configurar un código de seguimiento en Duda

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

Descripción general

Configurar un código de seguimiento permite un mayor conocimiento y análisis de la actividad de los visitantes. Hay muchos proveedores diferentes de análisis web y soluciones de seguimiento en la web. Este artículo ayudará a explicar 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 implementar el código por usted.

Información importante

Para las siguientes guías, ya deberá tener los fragmentos de código de estos distintos servicios. Estas guías explicarán cómo implementar el código, pero no explicarán el propósito, las mejores prácticas o usabilidad 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".

trackingcode1_en-US.png

2. Coloque la parte "script" del código de Tag Manager en la sección "HTML de encabezado" y haga clic en Guardar. Después de guardar, la sección "HTML de encabezado debe lucir así:

trackingcode2_en-US.png

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.

trackingcode3_en-US.png

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. Esta sección ahora debe lucir así:

trackingcode4_en-US.png 

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.
  • Duda ha realizado extensas pruebas, y la sección body-end.html del modo de desarrollador sirve para agregar el código "no script".
  • 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".

trackingcode5_en-US.png

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

trackingcode6_en-US.png

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){}"

Si hace esto correctamente, el código se parecerá a la siguiente captura de pantalla.

trackingcode7_en-US.png

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 de Duda.

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. Asegúrese de 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 proporcionado en la siguiente captura de pantalla.

trackingcode8_en-US.png

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".

trackingcode9_en-US.png

3. Ingrese su código de Google Analytics. 

trackingcode10_en-US.png

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

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".

trackingcode11_en-US.png

Coloque el código proporcionado por Facebook en la sección HTML de encabezado, luego haga clic en Guardar. El código debe ser similar al siguiente.

trackingcode12_en-US.jpg

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

Para obtener más información sobre Implementación del píxel de Facebook, consulte esta guía.

×

Por favor inicie sesión como Pro

Soporte telefónico prioritario está disponible exclusivamente para DudaPros. Inicie sesión en su cuenta DudaPro ahora para ver nuestros números de asistencia internacional.

Inicie sesión
¿No eres un DudaPro?¡Compra DudaPro!