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

For all of the following guides, you will need to already have the code snippets from these various services. These guides will explain how to implement the code, but will not explain the purpose, best practices, or usability of the code. Duda recommends that you familiarize yourself with these services before implementing them by reviewing the extensive online discussions about these tracking solutions, which you can find on their websites or through web searches.

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.


Note: All of the below code is just an example - do not copy this directly into your site. Please be sure to obtain the correct tracking code from 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.

Once you have added the tracking code into the header section, you need to add code to the widget that you want to be considered the tracking event.
Please note that AdWords does not differentiate between click and load tracking.

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]);"
After modification: 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".

trackingcode11_en-US.png

Place the <script> part of the code provided by Facebook into the header HTML section, then click Save. The code should look similar to the one below.

trackingcode12_en-US.png

Note: All of the above code is just an example - do not copy this directly into your site. Please be sure to obtain the correct code from Facebook Pixel Code.

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í:

trackingcode13_en-US.png

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

  • Like with Google Tag Manager, Facebook recommends to place the "noscript" code in the beginning of the "body" section. This is a workaround they suggests to get around limitations of very old web browsers which do not load header code.
  • Duda ha realizado extensas pruebas, y la sección body-end.html del modo de desarrollador sirve para agregar el código "no script".
  • For more information about Facebook Pixel Implementation, check out this guide.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 1 de 4

Comentarios

0 comentarios

Inicie sesión para dejar un comentario.

×

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!