¿Es posible utilizar Optimizely (u otras herramientas de testing A / B que manipulen DOM) en un sitio usando Angularjs?

Estoy buscando utilizar Optimizely en un sitio donde utilizaremos Angularjs, pero por lo que entiendo, será difícil porque todo el propósito de Angularjs es no manipular el DOM, y Optimizely funciona manipulando el DOM.

¿Alguien tiene alguna orientación hacia los documentos sobre cómo hacer posible el uso de estas herramientas juntas? ¿Quizás una estructura donde podría crear directivas para ayudar a que la herramienta funcione?

Primero, debe hacer que el "Modo de activación" del experimento sea "Manual".

Luego, para que Optimizely compruebe si el experimento debe ejecutarse (es decir, cumple el objective de la URL), debe llamar a window.optimizely.push(["activate"]) . Esto le dice a Optimizely que haga lo mismo que haría en una carga normal de página completa. Entonces, dependiendo de su situación, puede llamar a la API optimizada desde algunas ubicaciones diferentes …

En el método de ejecución de la aplicación cuando se cargan las vistas

Esto funciona cuando lo que cambia su experimento no está vinculado a las piezas dinámicas que angular puede hacer después de la carga de la vista. El evento $ routeChangeSuccess no funcionará con la activación de Optimizely porque se dispara antes de que haya DOM para manipular.

 app.run(function run($rootScope){ $rootScope.$on('$viewContentLoaded', function() { window.optimizely = window.optimizely || []; window.optimizely.push(["activate"]); }); }); 

Una forma más explícita es llamar a window.optimizely.push(["activate"]) solo en los controlleres o directivas que realmente tendrán experimentos. De esta forma puede controlar el momento exacto de la activación, como después de cargar los datos. Prefiero este método porque, en la mayoría de las ocasiones, tendrá que llamar a la API de forma optimizada para registrar un evento personalizado para registrar que el usuario haya completado el objective deseado de todos modos, por lo que si hago ese seguimiento de events explícitamente, también podría activarse de forma optimizada de forma explícita. Aquí hay un service que inyecto cuando necesito activar o registrar events …

 (function () { 'use strict'; function Optimizely($window) { $window.optimizely = $window.optimizely || []; this.Activate = function () { $window.optimizely.push(["activate"]); }; this.TrackEvent = function (eventName) { $window.optimizely.push(["trackEvent", eventName]); }; } angular.module('myApp').service('Optimizely', Optimizely); }()); 

Uso en un controller …

 function MyCtrl(Optimizely) { Optimizely.Activate(); Optimizely.TrackEvent("my_goal_success"); } 

Sí, pero deberá usar la API de JavaScript de Optimizely.

http://developers.optimizely.com/javascript/

Para cualquier cosa más en profundidad, también podrías ver cómo haces tus propios cubos y cómo usar dimensiones personalizadas

Ejemplo propio de creación de bloques: https://github.com/tomfuertes/gaab

Documentos de dimensiones personalizadas: https://support.google.com/analytics/answer/2709829?hl=en

Editar:

En un nivel alto, Optimizely es una abstracción frontal de un sistema que agrupa y manipula el DOM. Está destinado a ser utilizado por no desarrolladores o desarrolladores que quieran usar la pieza de informe. Todavía puede get lo mismo si está personalizando la encoding de una aplicación angular escribiendo sus propias agrupaciones, divisiones y características con una herramienta de análisis separada como GA. Suena desalentador, pero es bastante simple si gaab un vistazo al código de muestra de gaab anterior.

No estoy seguro de cómo funciona Optimizely, pero con Visual Website Optimizer hay una function que nos permite agregar una variación usando JS. Manipulamos el contenido así:

 // get Angular scope from a known DOM element e = document.getElementById('some-dom-id'); scope = angular.element(e).scope(); // update the model with a wrap in $apply(fn) which will refresh the view for us scope.$apply(function() { scope.campaign.headline = 'This is a headline.'; }); 

Optimizely está utilizando jQuery para manipular el DOM. jQuery funciona con todos los documentos XML. El DOM resultante de Angular.js (tengo experiencia en eso) sigue siendo solo un DOM. Entonces puedes modificarlo.

Pero sabiendo cómo funciona Optimizely, también puedes simplemente poner el código JavaScript Sugar de Angular.js en el código de variación de Optimizely. O jQuery. O cualquier otro marco JS, o simple JavaScript antiguo. No importa. El código de variación será eval por Optimizely, y si es JS válido (que se convierte si usa el código Angular.js y la biblioteca está cargada) se ejecutará. Entonces puede hacer todas las modificaciones que desee a través de su syntax Angular.js.

Optimizadamente solo decidirá cuándo hacerlo y lo ejecutará en la página. También hará seguimiento para usted. No debería haber problemas con los events de activación para que Optimizely rastree desde Angular.js en absoluto.

Estoy tratando de usar un campo de input para vincularme a mi model de forma óptima para cambiar el campo de input y luego forzar angular para volver a cargar el campo

pero parece que angular necesita el evento .trigger ('input') para disparar que funciona en firebug pero no en el editor optimizely

// el editor optimizely agregaría esta línea (usuarios, etc.) $ ('. debug.edit-ab-test'.val (' abc ');

// no funciona en el editor, he intentado setInterval y setTimeout para retrasar etc $ ('. debug.edit-ab-test input [type = "text"]'). trigger ('input');