{"id":625,"date":"2017-03-16T22:18:28","date_gmt":"2017-03-16T21:18:28","guid":{"rendered":"https:\/\/www.thediar.com\/?p=625"},"modified":"2019-07-09T19:43:35","modified_gmt":"2019-07-09T17:43:35","slug":"como-hacer-un-test-ab-en-convert-experiments","status":"publish","type":"post","link":"https:\/\/www.thediar.com\/es\/blog\/como-hacer-un-test-ab-en-convert-experiments\/","title":{"rendered":"C\u00f3mo hacer un test A\/B en Convert Experiments"},"content":{"rendered":"<p>En este art\u00edculo vamos a explicar c\u00f3mo puedes hacer un test A\/B en la plataforma de testing\u00a0<strong>Convert Experiments<\/strong>. Damos por sentado, que has realizado ya tu <a href=\"https:\/\/www.thediar.com\/es\/what-we-do\/digital-analytics-and-cro\/\">an\u00e1lisis<\/a>, has formulado tu hip\u00f3tesis y tienes un dise\u00f1o preparado para implementar.<\/p>\n<h2>Instalaci\u00f3n de la herramienta de testing Convert Experiments<\/h2>\n<p>Todas las p\u00e1ginas del sitio web deber\u00edan incluir el c\u00f3digo javascript de convertexperiments.com para que el visitante que visite nuestra p\u00e1gina tenga\u00a0Convert Experiments cargado de forma directa. Si usamos Google Tag Manager o similar podr\u00edamos estar mostrando la versi\u00f3n original durante el proceso de carga de las versiones alternativas.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-627\" src=\"https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-code.png?resize=300%2C87&#038;ssl=1\" alt=\"\" width=\"300\" height=\"87\" srcset=\"https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-code.png?resize=300%2C87&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-code.png?resize=768%2C223&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-code.png?resize=700%2C203&amp;ssl=1 700w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-code.png?resize=520%2C151&amp;ssl=1 520w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-code.png?resize=360%2C104&amp;ssl=1 360w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-code.png?resize=250%2C73&amp;ssl=1 250w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-code.png?resize=100%2C29&amp;ssl=1 100w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-code.png?w=800&amp;ssl=1 800w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>La realidad, poner el c\u00f3digo directo en el &lt;head&gt; puede ralentizar el sitio web, entre 0.1s o 3s dependiendo de la herramienta y el c\u00f3digo usado.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-628 size-full\" src=\"https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/speed-testing-tools.jpg?resize=568%2C264&#038;ssl=1\" alt=\"\" width=\"568\" height=\"264\" srcset=\"https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/speed-testing-tools.jpg?w=568&amp;ssl=1 568w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/speed-testing-tools.jpg?resize=300%2C139&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/speed-testing-tools.jpg?resize=520%2C242&amp;ssl=1 520w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/speed-testing-tools.jpg?resize=360%2C167&amp;ssl=1 360w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/speed-testing-tools.jpg?resize=250%2C116&amp;ssl=1 250w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/speed-testing-tools.jpg?resize=100%2C46&amp;ssl=1 100w\" sizes=\"auto, (max-width: 568px) 100vw, 568px\" \/><\/p>\n<h2>Configuraci\u00f3n del test en Convert Experiments<\/h2>\n<p>Ante todo, debemos tener en cuenta todos los tests que creamos para los distintos\u00a0pa\u00edses y categor\u00edas de\u00a0dispositivo. No es lo mismo testear para Espa\u00f1a que para Alemania o para una experiencia mobile o desktop.<\/p>\n<p>Lo m\u00e1s importante cuando defines un test es:<\/p>\n<ul>\n<li>Configurar la audiencia con el pa\u00eds y la categor\u00eda de dispositivo.<\/li>\n<li>Seleccionar correctamente las p\u00e1ginas que debe activar el experimento.<\/li>\n<li>Crear y seleccionar aquellos objetivos primarios y secundarios que necesites (Ej: Tracking de revenue para testear Revenue Per Visitor, P\u00e1ginas de confirmaci\u00f3n, Custom events, etc)<\/li>\n<\/ul>\n<h2>Editor de la variaci\u00f3n en Convert Experiments<\/h2>\n<p>La secci\u00f3n \u00abCode editor\u00bb es una secci\u00f3n especial que contiene c\u00f3digo JavaScript y que se carga lo m\u00e1s pronto posible, sin esperar a que la p\u00e1gina est\u00e9 lista.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-626\" src=\"https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/code-editor-300x111.jpg?resize=300%2C111&#038;ssl=1\" alt=\"\" width=\"300\" height=\"111\" srcset=\"https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/code-editor.jpg?resize=300%2C111&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/code-editor.jpg?resize=520%2C193&amp;ssl=1 520w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/code-editor.jpg?resize=360%2C134&amp;ssl=1 360w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/code-editor.jpg?resize=250%2C93&amp;ssl=1 250w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/code-editor.jpg?resize=100%2C37&amp;ssl=1 100w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/code-editor.jpg?w=649&amp;ssl=1 649w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>La secci\u00f3n \u00abCustom CSS\u00bb es la manera m\u00e1s r\u00e1pida que tenemos para cargar cambios de aspecto \u00a0(color, espacios, borders, tipograf\u00eda, etc) en nuestra variaci\u00f3n.<\/p>\n<p>La secci\u00f3n de \u00abCustom JavaScript\u00bb puedes realizar la ejecuci\u00f3n segura de c\u00f3digo JavaScript, tales como el env\u00edo de datos a Google Tag Manager. Por ejemplo, para poder analizar los datos en Google Analytics,\u00a0para\u00a0lanzar una encuesta distinta para la versi\u00f3n original o para la versi\u00f3n alternativa, tener mapas de calor segmentados, grabaciones etiquetadas, etc<\/p>\n<p>Aqu\u00ed ya deberias tener tu test A\/B custom listo.<\/p>\n<h2>Uso jQuery para implementar el test en Convert Experiments<\/h2>\n<p>La librer\u00eda jQuery es la librer\u00eda JavaScript m\u00e1s usada, y por eso Convert Experiments y otras herramientas de testing ofrecen maneras de usarla en la implementaci\u00f3n de tus tests.<\/p>\n<p>Para a\u00f1adir al final HTML dentro de los elementos con class .inner<\/p>\n<pre class=\" language-javascript\"><code class=\" language-javascript\">$( \".inner\" ).append( \"&lt;p&gt;Test&lt;\/p&gt;\" );<\/code><\/pre>\n<p>Para a\u00f1adir HTML a justo a continuaci\u00f3n de los elementos con class .inner<\/p>\n<pre class=\" language-javascript\"><code class=\" language-javascript\">$( \".inner\" ).after( \"&lt;p&gt;Test&lt;\/p&gt;\" );<\/code><\/pre>\n<p>Para a\u00f1adir HTML al inicio del contenido de los elementos con class .inner<\/p>\n<pre class=\" language-javascript\"><code class=\" language-javascript\">$( \".inner\" ).prepend( \"&lt;p&gt;Test&lt;\/p&gt;\" );<\/code><\/pre>\n<p>Para a\u00f1adir HTML justo antes de los elementos con class .inner<\/p>\n<pre class=\" language-javascript\"><code class=\" language-javascript\">$( \".inner\" ).before( \"&lt;p&gt;Test&lt;\/p&gt;\" );<\/code><\/pre>\n<p>Para mover el elemento .whatToMove justo antes del .whereToMove<\/p>\n<pre class=\"default prettyprint prettyprinted\"><code><span class=\"pln\">$<\/span><span class=\"pun\">(<\/span><span class=\"str\">'.whatToMove'<\/span><span class=\"pun\">).<\/span><span class=\"pln\">insertBefore<\/span><span class=\"pun\">(<\/span><span class=\"str\">'.whereToMove'<\/span><span class=\"pun\">);<\/span><\/code><\/pre>\n<p>Para mover el elemento whatToMove justo despu\u00e9s del .whereToMove<\/p>\n<pre class=\"default prettyprint prettyprinted\"><code><span class=\"pln\">$<\/span><span class=\"pun\">(<\/span><span class=\"str\">'.whatToMove'<\/span><span class=\"pun\">).<\/span><span class=\"pln\">insertAfter<\/span><span class=\"pun\">(<\/span><span class=\"str\">'.whereToMove'<\/span><span class=\"pun\">);<\/span><\/code><\/pre>\n<p>Para mover el elemento .whatToMove al inicio del contenido del elemento .whereToMove<\/p>\n<pre class=\"default prettyprint prettyprinted\"><code><span class=\"pln\">$<\/span><span class=\"pun\">(<\/span><span class=\"str\">'.whatToMove'<\/span><span class=\"pun\">).<\/span><span class=\"pln\">prependTo<\/span><span class=\"pun\">(<\/span><span class=\"str\">'.whereToMove'<\/span><span class=\"pun\">);<\/span><\/code><\/pre>\n<p>Para mover el elemento .whatToMove\u00a0justo al final del contenido del elemento .whereToMove<\/p>\n<pre class=\"default prettyprint prettyprinted\"><code><span class=\"pln\">$<\/span><span class=\"pun\">(<\/span><span class=\"str\">'.whatToMove'<\/span><span class=\"pun\">).<\/span><span class=\"pln\">appendTo<\/span><span class=\"pun\">(<\/span><span class=\"str\">'.whereToMove'<\/span><span class=\"pun\">);\r\n\r\n<\/span><\/code><\/pre>\n<h2>Evitar el efecto destello en lo tests con Convert Experiments<\/h2>\n<p>En la secci\u00f3n de \u00abCode editor\u00bb\u00a0puede que jQuery a\u00fan no haya cargado, por eso Convert Experiments proporciona a trav\u00e9s de\u00a0<strong>convert._$\u00a0<\/strong>una referencia a una librer\u00eda jQuery algo modificada para no tener que esperar a que todo el documento est\u00e9 listo (dom ready).<\/p>\n<p>Esta es la manera en la que podemos evitar un efecto \u00abdestello\u00bb. Un efecto en que, durante la carga de la variante alternativa, \u00a0se muestra la variante original.<\/p>\n<p>Cada 50ms se ejecuta el c\u00f3digo JavaScript que pongas dentro de \u00abCode Editor\u00bb. Si encuentra una referencia no disponiblee durante su ejecuci\u00f3n, volver\u00e1 a ejecutarse. En otro caso habr\u00e1 acabado de ejecutar todo el c\u00f3digo y no se volver\u00e1 a ejecutar.<\/p>\n<p>Por ejemplo:<\/p>\n<pre class=\" language-javascript\"><code class=\" language-javascript\">convert<span class=\"token punctuation\">.<\/span><span class=\"token function\">_$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"a.login\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Login here\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\nconvert<span class=\"token punctuation\">.<\/span><span class=\"token function\">_$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"a.loginFooter\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Login\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p>Una vez se carga Convert Experiments, se ejecuta el c\u00f3digo de la variaci\u00f3n dentro de \u00abCode editor\u00bb. As\u00ed que\u00a0\u00aba.login\u00bb est\u00e9 disponible, el texto se cambiar\u00e1. Si \u00aba.loginFooter\u00bb no lo est\u00e1, volver\u00e1 a esperar 50ms las ocasiones que haga falta hasta que est\u00e9 disponible para efectuar el cambio. En realidad, la l\u00ednea anterior tambi\u00e9n se vuelve a ejecutar.<\/p>\n<p>Debemos tener en cuenta que la reejecuci\u00f3n del c\u00f3digo, en algunos casos podr\u00eda producir efectos indeseados y multiplicar\u00a0los cambios. Para evitarlos, es recomendable ejecutar el c\u00f3digo cuando los elementos a cambiar m\u00e1s profundos en el DOM est\u00e9n ya disponibles.<\/p>\n<p>Ejemplo:<\/p>\n<pre class=\" language-javascript\">if(convert._$(\"a.loginFooter\").length &gt; 0) { convert._$(\"a.loginFooter\").after(\" after\");}<\/pre>\n<p>A menudo es necesario disponer de una referencia no modificada a jQuery. Con esta finalidad disponemos de\u00a0<strong>convert.$<\/strong>, aunque ser\u00eda preferible usarla solo dentro de la secci\u00f3n de Custom JavaScript<\/p>\n<h2>Previsualizaci\u00f3n y preactivaci\u00f3n de las variaciones de Convert Experiments<\/h2>\n<p>Para revisar que todo est\u00e9 correcto, podemos previsualizar los experimentos sin activarlos. Esto nos ayuda a poder <strong>comprobar con distintos dispositivos y navegadores<\/strong> que las\u00a0funcionalidades y no s\u00f3lo el aspecto sea el esperado.<\/p>\n<p>Ejemplos:<\/p>\n<ul>\n<li>En iPhone no funcionan los acordeones din\u00e1micos.<\/li>\n<li>En Internet Explorer se rompe el CSS.<\/li>\n<li>En pantallas peque\u00f1as se desajusta un texto.<\/li>\n<li>El tel\u00e9fono se muestra distinto si tienen instalado Skype.<\/li>\n<li>Etc<\/li>\n<\/ul>\n<p>Si quieres preativarlo de forma privada, antes de realizar el lanzamiento puedes podemos activarlo de forma controlada con un \u00abutm_medium\u00bb espec\u00edfico. De esta manera nos aseguramos que la audiencia y las condiciones de activaci\u00f3n sean las que tienen que ser. En este ejemplo, puedes ver\u00a0una audiencia avanzada con una condici\u00f3n adicional.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-631 size-large\" src=\"https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-audience.png?resize=640%2C389&#038;ssl=1\" alt=\"\" width=\"640\" height=\"389\" srcset=\"https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-audience.png?resize=1024%2C622&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-audience.png?resize=300%2C182&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-audience.png?resize=768%2C466&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-audience.png?resize=700%2C425&amp;ssl=1 700w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-audience.png?resize=520%2C316&amp;ssl=1 520w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-audience.png?resize=360%2C219&amp;ssl=1 360w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-audience.png?resize=250%2C152&amp;ssl=1 250w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-audience.png?resize=100%2C61&amp;ssl=1 100w, https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert-Experiences-audience.png?w=1265&amp;ssl=1 1265w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>Si la URL de previsualizaci\u00f3n de la variaci\u00f3n 1 es\u00a0https:\/\/www.dominio.com\/?convert_action=convert_vpreview&amp;convert_e=100118591&amp;convert_v=1001166649<\/p>\n<ul>\n<li>Si quieres visualizar una \u00abpreactivaci\u00f3n\u00bb y ver la asignaci\u00f3n de forma aleatoria de todas las variaciones, usa https:\/\/www.dominio.com\/?utm_medium=my_test<\/li>\n<li>Para forzar la visualizaci\u00f3n de la variaci\u00f3n 1 \u00abpreactivada\u00bb, deber\u00edas abrir\u00a0una ventana en inc\u00f3gnito y visualizar https:\/\/www.dominio.com\/?utm_medium=my_test&amp;_conv_eforce=100118591.1001166649c<\/li>\n<\/ul>\n<p>Para ver qu\u00e9 est\u00e1 pasando y detectar posibles problemas, puedes instalar y usar la extensi\u00f3n de <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/convert-experiences-debug\/mcjjomjpjfaaaiieieaecenabgidlhid\">Convert Experiences para Google Chrome<\/a>. Cuando la activas (puesta en \u00abON\u00bb), tendr\u00e1s los logs en la consola con los experimentos que activas y la evaluaci\u00f3n de condiciones de activaci\u00f3n.<\/p>\n<p>Para que el test quede definitivamente activado para la audiencia deseada, s\u00f3lo quedar\u00eda quitar la condici\u00f3n de utm_medium como condici\u00f3n de la audiencia avanzada.<\/p>\n<h2>Duraci\u00f3n del test\u00a0en\u00a0Convert Experiments<\/h2>\n<p>Por \u00faltimo, sabiendo el efecto m\u00ednimo que quieres detectar, ajusta el m\u00ednimo de d\u00edas de ejecuci\u00f3n del test. Por defecto Convert Experiments define 7 d\u00edas y esto podr\u00eda ser insuficiente.<\/p>\n<p>No vale con parar el test autom\u00e1ticamente al conseguir significancia estad\u00edstica si lo que quieres\u00a0estar seguro que hay un efecto m\u00ednimo a\u00a0detectar. Debes planificar el test el n\u00famero suficiente de d\u00edas para tener una muestra suficientemente grande y <span style=\"font-weight: 400;\">representativa<\/span>.<\/p>\n<p>\u00danete al club de la lucha contra los tests inconcluyentes. Realiza un buen an\u00e1lisis y plantea una hip\u00f3tesis pontente \ud83d\ude42<\/p>\n<p>Cualquier duda o sugerencia, deja tu comentario o <a href=\"https:\/\/www.thediar.com\/contact\/\">contacta con nosotros<\/a>. Y si te a gustado, comparte ;)<\/p>","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo vamos a explicar c\u00f3mo puedes hacer un test A\/B en la plataforma de testing\u00a0Convert Experiments. Damos por sentado, que has realizado ya tu an\u00e1lisis, has formulado tu hip\u00f3tesis y tienes un dise\u00f1o preparado para implementar. Instalaci\u00f3n de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":652,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","clearfix"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.thediar.com\/wp-content\/uploads\/Convert.com_-1.png?fit=489%2C200&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p8d1gX-a5","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.thediar.com\/es\/wp-json\/wp\/v2\/posts\/625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thediar.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thediar.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thediar.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thediar.com\/es\/wp-json\/wp\/v2\/comments?post=625"}],"version-history":[{"count":13,"href":"https:\/\/www.thediar.com\/es\/wp-json\/wp\/v2\/posts\/625\/revisions"}],"predecessor-version":[{"id":1908,"href":"https:\/\/www.thediar.com\/es\/wp-json\/wp\/v2\/posts\/625\/revisions\/1908"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.thediar.com\/es\/wp-json\/wp\/v2\/media\/652"}],"wp:attachment":[{"href":"https:\/\/www.thediar.com\/es\/wp-json\/wp\/v2\/media?parent=625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thediar.com\/es\/wp-json\/wp\/v2\/categories?post=625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thediar.com\/es\/wp-json\/wp\/v2\/tags?post=625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}