Я хочу использовать Optimizely на сайте, где мы будем использовать Angularjs, но из того, что я понимаю, это будет сложно, потому что вся цель Angularjs - не манипулировать DOM, а Optimizely работает, манипулируя DOM.
Есть ли у кого-нибудь указания относительно документов о том, как сделать возможным использование этих инструментов вместе? Возможно, структура, в которой я мог бы создавать директивы, чтобы помочь инструменту работать?
Да, но вам нужно использовать API оптимизаций Javascript.
http://developers.optimizely.com/javascript/
Для чего-нибудь более глубокого, вы также можете посмотреть на свой собственный брокер и использовать пользовательские размеры
Пример собственного Bucketing: https://github.com/tomfuertes/gaab
Пользовательские размеры Документы: https://support.google.com/analytics/answer/2709829?hl=en
Edit:
На высоком уровне Оптимизация - это абстракция переднего конца для системы, которая ведёт и манипулирует DOM. Он предназначен для использования не-разработчиками или разработчиками, которые хотят использовать отчетную часть. Вы все равно можете перейти к тому же, если вы настраиваете приложение angular, создавая собственный брэкетинг, разделение и функции с помощью отдельного инструмента для аналитики, такого как GA. Звучит пугающе, но довольно просто, если вы посмотрите на пример кода gaab выше.
Во-первых, вам нужно сделать "Режим активации" эксперимента "Руководство".
Затем, чтобы оптимизировать проверку, должен ли выполняться эксперимент (т.е. соответствует целевому URL-адресу), вам необходимо вызвать window.optimizely.push(["activate"]). Это говорит Optimizely делать то же самое, что и при нормальной загрузке полной страницы. Поэтому, в зависимости от вашей ситуации, вы можете назвать optimizely api из нескольких разных мест...
В методе запуска приложения при загрузке представлений
Это работает, когда изменения вашего эксперимента не привязаны к динамическим фрагментам, которые angular может сделать после загрузки представления. Событие $routeChangeSuccess не будет работать с активацией Optimizely, потому что оно срабатывает до того, как какой-либо DOM будет работать.
app.run(function run($rootScope){
$rootScope.$on('$viewContentLoaded', function() {
window.optimizely = window.optimizely || [];
window.optimizely.push(["activate"]);
});
});
Более явным способом является вызов window.optimizely.push(["activate"]) только в контроллерах или директивах, которые будут фактически иметь эксперименты. Таким образом вы можете контролировать точное время активации, например, после загрузки данных. Я предпочитаю этот метод, потому что, чаще всего, вам нужно будет вызвать API-интерфейс optimizeely для регистрации пользовательского события для регистрации того, что пользователь выполнил желаемую цель в любом случае, поэтому, если я делаю это отслеживание событий явно, я может также активировать оптимизацию явно. Здесь услуга, которую я вводил, когда мне нужно активировать или регистрировать события...
(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);
}());
Использование в контроллере...
function MyCtrl(Optimizely) {
Optimizely.Activate();
Optimizely.TrackEvent("my_goal_success");
}
Я не уверен, как работает Optimizely, но с Visual Website Optimizer есть функция, которая позволяет нам добавлять вариации с помощью JS. Мы управляем содержимым так:
// 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.';
});
Оптимизация использует jQuery для управления DOM. jQuery работает со всеми XML-документами. DOM, полученный из Angular.js(у меня есть опыт с этим) все еще просто DOM. Поэтому вы можете изменить его.
Но зная, как работает Optimizely, вы также можете просто поместить Angular.js код JavaScript в код оптимизации Optimizely. Или jQuery. Или любой другой JS-фреймворк или простой старый JavaScript. Это не имеет значения. Код вариации получит eval ed Optimizely, и если он будет действительным JS (который будет, если вы используете код Angular.js и загружается библиотека), он будет выполнен. Таким образом, вы можете сделать все изменения, которые вы хотите, с помощью синтаксиса Angular.js.
Оптимизация просто решит, когда это сделать, и запустите его на странице. Он также будет отслеживать вас. Не должно быть никаких проблем с событиями стрельбы для Optimizely для отслеживания от Angular.js вообще.
im пытается использовать поле ввода для привязки к моей модели, чтобы оптимизировать изменение поля ввода, а затем принудительно перезагрузить поле angular
но кажется, что angular требуется событие .trigger('input') для запуска, которое работает в firebug, но не в оптимизированном редакторе
//оптимистический редактор добавит эту строку (пользователи и т.д.), ". Debug.edit-AB-test'.val( '$ (ABC');
//не работает в редакторе, я попробовал setInterval и setTimeout для задержки и т.д. $ ('. debug.edit-ab-test input [type = "text" ]'). trigger ('input');