我希望在我们将使用 Angularjs 的网站上使用 Optimizely,但据我了解,这将很困难,因为 Angularjs 的全部目的是不操纵 DOM,而 Optimizely 通过操纵 DOM 来工作。
有没有人对如何使这些工具一起使用成为可能的文档有任何指导?也许我可以创建指令来帮助工具工作的结构?
我希望在我们将使用 Angularjs 的网站上使用 Optimizely,但据我了解,这将很困难,因为 Angularjs 的全部目的是不操纵 DOM,而 Optimizely 通过操纵 DOM 来工作。
有没有人对如何使这些工具一起使用成为可能的文档有任何指导?也许我可以创建指令来帮助工具工作的结构?
首先,您需要将实验的“激活模式”设置为“手动”。
然后,为了使优化检查实验是否应该运行(即满足 URL 目标),您需要调用window.optimizely.push(["activate"])
. 这告诉 Optimizely 做与正常整页加载相同的事情。因此,根据您的情况,您可以从几个不同的位置调用优化 api...
在视图加载时应用程序的运行方法中
当您的实验更改与视图加载后角度可能产生的动态片段无关时,此方法有效。$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 来记录自定义事件以记录用户无论如何完成了所需的目标,所以如果我明确地进行事件跟踪,我还不如显式优化激活。这是我需要激活或记录事件时注入的服务...
(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)编写自己的分桶、拆分和功能来自定义编码 Angular 应用程序,您仍然可以达到同样的效果。听起来令人生畏,但如果您看一下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 糖 JavaScript 代码放入 Optimizely 变体代码中。或 jQuery。或任何其他 JS 框架,或普通的旧 JavaScript。不要紧。变体代码将由eval
Optimizely 编辑,如果它是有效的 JS(如果您使用 Angular.js 代码并加载了库,则会变成有效的 JS),它将被执行。因此,您可以通过 Angular.js 语法进行所有您想要的修改。
Optimizely 只会决定何时执行它并在页面上运行它。它还将为您进行跟踪。从 Angular.js 跟踪 Optimizely 的触发事件应该没有问题。
我试图使用输入字段绑定到我的模型使用优化来更改输入字段,然后强制角度重新加载字段
但似乎 angular 需要触发 .trigger('input') 事件,该事件在 firebug 中有效,但在优化编辑器中无效
//优化编辑器将添加这一行(用户等) $('.debug.edit-ab-test'.val('abc');
//在编辑器中不起作用,我试过 setInterval 和 setTimeout 来延迟等 $('.debug.edit-ab-test input[type="text"]').trigger('input');