javascript - 是否可以在使用Angularjs的网站上使用Optimizely(或其他DOM操作A/B测试工具)？

我希望在将要使用Angularjs的网站上使用Optimizely，但是据我所知，这将很困难，因为Angularjs的整个目的是不操纵DOM，而Optimizely通过操纵DOM来工作。

关于如何一起使用这些工具，是否有人对文档有任何指导？也许我可以创建指令来帮助工具工作的结构？

最佳答案

首先，您需要将实验设置为“手动”的“激活模式”。

然后，要优化检查实验是否应该运行(即符合URL目标)，您需要调用window.optimizely.push(["activate"])。这告诉Optimizely执行与正常的整个页面加载相同的操作。因此，根据您的情况，您可以从几个不同的位置调用优化的api ...

在 View 加载时应用程序的运行方法

当您的实验更改未绑定(bind)到 View 加载后 Angular 可能产生的动态片段时，此方法将起作用。 $ routeChangeSuccess事件无法与激活Optimizely一起使用，因为它会在要操作任何DOM之前触发。

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

一种更明确的方法是仅在实际进行实验的 Controller 或指令中调用window.optimizely.push(["activate"])。这样，您可以控制激活的确切时间，例如在加载数据之后。我更喜欢这种方法，因为(通常)您将不得不调用优化API来记录自定义事件，以记录用户无论如何都已完成所需的目标，因此，如果我要明确地进行该事件跟踪，我会可能还需要明确地优化激活。这是我需要激活或记录事件时注入(inject)的服务...

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

Controller 中的用法...

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