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



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

有人对如何将这些工具结合使用的文件有任何指导吗?也许是一个我可以创建指令来帮助工具工作的结构?

首先,您需要将实验的"激活模式"设置为"手动"。

然后,为了让Optimizely检查实验是否应该运行(即满足URL目标),您需要调用window.optimizely.push(["activate"])。这个命令告诉Optimizely在正常的全页面加载时做同样的事情。因此,根据您的情况,您可以从几个不同的位置调用optimizelyapi。。。

视图加载时应用程序的运行方法

当你的实验变化与视图加载后可能产生的动态片段不相关时,这就起作用了。$routeChangeSuccess事件不适用于激活Optimizely,因为它在有任何DOM可操作之前就启动了。

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

一种更明确的方法是仅在实际进行实验的控制器或指令中调用window.optimizely.push(["activate"])。通过这种方式,您可以控制激活的确切时间,就像加载数据之后一样。我更喜欢这种方法,因为通常情况下,你必须调用optimizely API来记录自定义事件,以记录用户完成了所需的目标,所以如果我显式地进行事件跟踪,我还不如显式地激活optimizeley。这是我在需要激活或记录事件时注入的服务。。。

(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的Javascript API。

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

对于任何更深入的东西,你也可以考虑自己做桶装,并使用自定义尺寸

自己的装箱示例:https://github.com/tomfuertes/gaab

自定义维度文档:https://support.google.com/analytics/answer/2709829?hl=en

编辑:

在高级上,Optimizely是一个前端抽象,用于存储和操作DOM的系统。它旨在供非开发人员或想要使用报告片段的开发人员使用。如果你用GA这样的独立分析工具编写自己的bucketing、Split和功能来定制一个有角度的应用程序,你仍然可以得到同样的东西。听起来很可怕,但如果你看看上面的gaab示例代码,它相当简单。

我不确定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.';
}); 
Optimizely正在使用jQuery来操作DOM。jQuery适用于所有XML文档。Angular.js产生的DOM(我有经验)仍然只是一个DOM。所以你可以修改它。

但是,知道Optimizely是如何工作的,您也可以将Angular.js的sugar JavaScript代码放入Optimizely变体代码中。或者jQuery。或者任何其他JS框架,或者普通的旧JavaScript。这并不重要。变体代码将由Optimizely获得evaled,如果它是有效的JS(如果您使用Angular.JS代码并加载库,它就会变成JS),它就会被执行。因此,您可以通过Angular.js语法进行所有想要的修改。

Optimizely只会决定何时执行并在页面上运行它。它还将为您进行跟踪。Optimizely从Angular.js跟踪射击事件应该没有任何问题。

im试图使用输入字段绑定到我的模型使用optimizely更改输入字段,然后强制angular重新加载字段

但angular似乎需要触发('input')事件,该事件在firebug中有效,但在optimizely编辑器中无效

//optimizely编辑器会添加这一行(用户等)$('.debug.edit ab test'.val('abc');

//在编辑器中不起作用,我尝试过setInterval和setTimeout来延迟等$('.debug.edit-ab-test input[type="text"]').trigger('input');

最新更新