Instalar Optimize con analytics.js

Para usuarios de analytics.js que quieran añadir Optimize
Este artículo contiene información sobre un fragmento antiguo que no es compatible con instalaciones nuevas.
El artículo Descripción general de la instalación de Optimize incluye instrucciones sobre cómo instalar Optimize en sitios web.

Optimize es una línea de código que puede añadir a la etiqueta analytics.js para ofrecer experiencias a los visitantes de su sitio web. En este artículo, le explicaremos cómo añadir Optimize al fragmento analytics.js de su sitio web.

Le recomendamos encarecidamente que use el método de instalación de optimize.js, ya que ofrece los mejores resultados y es la forma más sencilla de instalar Optimize.

Otros métodos de instalación

Nota: Si no tiene Google Analytics instalado en su sitio web, lea primero este artículo.

  • Si usa el fragmento de Optimize (optimize.js), empiece por consultar esta información.
  • Si usa Google Tag Manager (GTM), lea antes este artículo.
  • Si usa la etiqueta de Google (gtag.js), lea antes este artículo.
  • Si usa analytics.js (conocido anteriormente como "Universal Analytics" o "UA"), siga leyendo.

Requisitos

Antes de empezar, debe tener una cuenta de Optimize y un contenedor vinculado a una propiedad de Google Analytics. En el artículo Configurar Optimize, encontrará instrucciones para cumplir ambos requisitos. Para etiquetar el sitio web con el fragmento de Optimize, también necesita permiso para editar su código HTML.

Paso 1: Obtenga la etiqueta analytics.js

Podrá encontrarla en el sistema de gestión de contenido (CMS) de su sitio web o usando el comando de su navegador que permite ver el código fuente.

La etiqueta analytics.js tendrá un aspecto similar a este:

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'GA_MEASUREMENT_ID', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Nota: Sustituya GA_MEASUREMENT_ID por su ID de propiedad de Google Analytics.

La interfaz de administración de Analytics solo ofrece código en el formato de la etiqueta de Google (gtag.js) y no es compatible con analytics.js.

Paso 2: Obtenga su ID de contenedor de Optimize

El ID de contenedor de Optimize es una cadena alfanumérica de 9 caracteres que comienza por "OPT-" o "GTM-" y que permite identificarlo de forma única. El ID de contenedor forma parte del fragmento de Optimize que aparece al hacer clic en INSTALAR OPTIMIZE. También puede encontrarlo en Configuración del contenedor > Información del contenedor. Más información sobre los contenedores de Optimize

El ID de contenedor de Optimize puede tener un aspecto similar a estos:

OPT-A1B2CD
GTM-A1B2CD

Nota: En la documentación se usa "OPT_CONTAINER_ID" para hacer referencia a los ID de contenedor.

Paso 3: Cree el fragmento de Optimize

Para crear el fragmento de Optimize, sustituya "OPT_CONTAINER_ID" por su ID de contenedor de Optimize en la siguiente línea de código:

ga('require', 'OPT_CONTAINER_ID');

Paso 4: Añada Optimize a la etiqueta analytics.js

Añada el fragmento de Optimize que ha creado en el paso 3 a la etiqueta analytics.js, justo antes de la línea que empieza por "ga('create',"

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'GA_MEASUREMENT_ID', 'auto');
ga('require', 'OPT_CONTAINER_ID');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Nota: Sustituya OPT_CONTAINER_ID por su ID de contenedor de Optimize y GA_MEASUREMENT_ID por su ID de propiedad de Google Analytics.

Opciones de configuración avanzada

De forma predeterminada, la capa de datos que inicia y a la que hace referencia Google Tag Manager se llama dataLayer. Si ha cambiado el nombre de la capa de datos, tiene dos formas de usar ese nombre en Optimize:

1. Si carga Optimize a través de Google Analytics, la sintaxis es la siguiente:

ga('require', 'OPT_CONTAINER_ID', {dataLayer: 'CUSTOM_DATALAYER_NAME'});

Nota: Sustituya OPT_CONTAINER_ID por su ID de contenedor de Optimize y CUSTOM_DATALAYER_NAME por el nombre que le ha dado a dataLayer.

2. Si carga Optimize a través de gtag.js, añada el parámetro de consulta dataLayer a la solicitud gtag:

https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID&l=CUSTOM_DATALAYER_NAME

Nota: Sustituya GA_MEASUREMENT_ID por su ID de propiedad o su ID de medición de Google Analytics y CUSTOM_DATALAYER_NAME por el nombre que le ha dado a dataLayer.

Fragmento antiparpadeo con nombre de dataLayer personalizado

Si sigue los pasos que se indican en el artículo sobre la instalación del fragmento de Optimize (y, en concreto, nuestras prácticas recomendadas de instalación), su página web debería cargar Optimize antes que otros recursos necesarios para mostrarla. Si su página carga Optimize primero, no parpadeará y no será necesario instalar el fragmento antiparpadeo.

Si observa que la página parpadea, debe seguir todos los pasos indicados en el artículo sobre cómo instalar Optimize (y las prácticas recomendadas) antes de probar otros recursos para solucionar el problema. En concreto, debe asegurarse de haber incluido el fragmento de Optimize tan arriba como sea posible en la etiqueta <HEAD> de su sitio web. De esta forma, se solucionan la mayoría de los problemas de parpadeo.

Si después de haber seguido los pasos indicados anteriormente su página parpadea al cargar Optimize, la forma más eficaz de evitarlo es ocultarla temporalmente mientras se carga el contenedor de Optimize. Para ello, añada el fragmento antiparpadeo como primera secuencia de comandos de la página.

Código de ejemplo

<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','CUSTOM-DATALAYER-NAME',4000,
{'OPT_CONTAINER_ID':true});</script>

Nota: Sustituya CUSTOM-DATALAYER-NAME por su nombre de dataLayer personalizado y OPT_CONTAINER_ID por su ID de contenedor de Optimize.

Prácticas recomendadas para el etiquetado

Para obtener un rendimiento óptimo, coloque el fragmento de Optimize en la parte superior de la etiqueta <HEAD> de cada página web que quiera optimizar.

Los únicos elementos que deben aparecer encima del fragmento de Optimize son los siguientes:

  • Todo el código de inicialización de dataLayer que haya. Nota: Si se utiliza el fragmento antiparpadeo, la variable dataLayer no debe reasignarse después.
  • Todas las secuencias de comandos que declaren variables de JavaScript, funciones o cookies que utilice en Optimize, como bibliotecas jQuery o JavaScript que se usen en la implementación o la segmentación. Nota: Con Optimize no se instala jQuery de forma predeterminada.
  • El fragmento antiparpadeo opcional, cuando se usa para disminuir el parpadeo de la página.

Si usa una política de seguridad de contenido, consulte el artículo Requisitos de seguridad de Optimize para asegurarse de que esa política permite usar el dominio del fragmento en su sitio web (google-analytics.com o googleoptimize.com).

Pasos siguientes

Una vez implementada la etiqueta analytics.js modificada en sus páginas web, puede comenzar a crear su primera prueba A/B, de redirección o PMV.

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?
Búsqueda
Borrar búsqueda
Cerrar búsqueda
Aplicaciones de Google
Menú principal
Buscar en el Centro de ayuda
true
true
true
true
101337
false
false