Можно ли использовать Optimizely (или другие DOM-инструменты, управляющие A/B-тестированием) на сайте, использующем Angularjs?

Question

Я рассчитываю использовать Optimizely на сайте, где мы будем использовать Angularjs, но насколько я понимаю, это будет сложно, потому что вся цель Angularjs - не манипулировать DOM, а Optimizely работает, манипулируя DOM.

Есть ли у кого-нибудь какие-либо рекомендации относительно документов о том, как сделать возможным совместное использование этих инструментов? Возможно структура, где я мог бы создать директивы, чтобы помочь инструменту работать?

Answer 1

Сначала нужно сделать "Режим активации" из эксперимента "Ручной".

Затем, чтобы Optimizely проверил, должен ли эксперимент выполняться (т.е. соответствует цели URL), вам нужно вызвать window.optimizely.push(["activate"]), Это говорит Optimizely о том же, что и при обычной полной загрузке страницы. Таким образом, в зависимости от вашей ситуации, вы можете вызвать API-интерфейс Optimizely из нескольких разных мест...

В методе запуска приложения при загрузке просмотров

Это работает, когда изменения в вашем эксперименте не привязаны к динамическим частям, которые могут быть сделаны под углом после загрузки вида. Событие $ 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 Optimizely, чтобы регистрировать пользовательское событие, чтобы регистрировать, что пользователь все же достиг желаемой цели, поэтому, если я выполняю это отслеживание событий явно, я может также активировать явно явно. Вот сервис, который я добавляю, когда мне нужно активировать или регистрировать события...

(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");
}

Answer 2

Да, но вам нужно будет использовать Javascript API Optimizely.

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

Для чего-то более глубокого вы могли бы также взглянуть на то, как вы ведете свою собственную группировку и используете нестандартные размеры.

Пример собственной группировки: https://github.com/tomfuertes/gaab

Документы по пользовательским измерениям: https://support.google.com/analytics/answer/2709829?hl=en

Редактировать:

На высоком уровне Optimizely - это абстракция внешнего интерфейса системы, которая объединяет DOM и управляет ею. Он предназначен для использования не разработчиками или разработчиками, которые хотят использовать отчетную часть. Вы все еще можете получить то же самое, если будете настраивать угловое приложение, написав свое собственное группирование, разбиения и функции с помощью отдельного инструмента аналитики, такого как GA. Звучит устрашающе, но довольно просто, если вы посмотрите на gaab Пример кода выше.

Answer 3

Я не уверен, как работает 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.';
}); 

Answer 4

Я пытаюсь использовать поле ввода для привязки к моей модели, использовать оптимизировать, чтобы изменить поле ввода, а затем принудительно использовать угловую, чтобы перезагрузить поле

но похоже, что angular нуждается в событии.trigger('input') для запуска, который работает в firebug, но не в оптимизирующем редакторе

// оптимизирующий редактор добавил бы эту строку (пользователи и т. д.) $ ('. debug.edit-ab-test'.val (' abc ');

// не работает в редакторе, я пробовал setInterval и setTimeout для задержки и т. д. $('.debug.edit-ab-test input[type="text"]').trigger('input');

Answer 5

Optimizely использует jQuery для управления DOM. JQuery работает со всеми документами XML. DOM, полученный из Angular.js (у меня есть такой опыт), все еще является DOM. Таким образом, вы можете изменить его.

Но, зная, как работает Optimizely, вы также можете просто вставить сахарный код Angular.js JavaScript в код варианта Optimizely. Или jQuery. Или любой другой JS-фреймворк, или старый добрый JavaScript. Это не имеет значения. Код варианта получит evalпод редакцией Optimizely, и если это допустимый JS (который становится, если вы используете код Angular.js и библиотека загружена), он будет выполнен. Таким образом, вы можете делать все необходимые изменения с помощью синтаксиса Angular.js.

Optimizely просто решит, когда это сделать, и запустит его на странице. Это также сделает отслеживание для вас. Не должно быть никаких проблем с событиями запуска для отслеживания Optimizely из Angular.js.