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

Posted 2023-02-22

【中文标题】是否可以在使用 Angularjs 的网站上使用 Optimizely（或其他 DOM 操作 A/B 测试工具）？

【英文标题】：Is it possible to use Optimizely (or other DOM manipulating A/B testing tools) on a site using Angularjs?

【发布时间】：2014-03-22 05:30:51

【问题描述】：

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

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

【问题讨论】：

“AngularJS 的全部目的是不操纵 DOM”——嗯？我向你保证，AngularJS 对 DOM 进行了很多操作。

【参考方案1】：

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

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

在视图加载时应用的 run 方法中

当您的实验更改与视图加载后 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 来记录自定义事件以记录用户无论如何完成了所需的目标，所以如果我明确地进行事件跟踪，我还不如显式优化激活。这是我在需要激活或记录事件时注入的服务...

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

【讨论】：

如果您想删除某个页面或事件中的某个项目，我正在想象您是否希望在 TrackEvent 中发生这种情况？

【参考方案2】：

可以，但您需要使用 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 示例代码，就会相当简单。

【参考方案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.';
); 

【参考方案4】：

Optimizely 是使用 jQuery 来操作 DOM。 jQuery 适用于所有 XML 文档。 Angular.js 产生的 DOM（我有这方面的经验）仍然只是一个 DOM。所以你可以修改它。

但了解 Optimizely 的工作原理后，您也可以将 Angular.js 糖 JavaScript 代码放入 Optimizely 变体代码中。或 jQuery。或任何其他 JS 框架，或普通的旧 JavaScript。没关系。变体代码将由 Optimizely 获得evaled，如果它是有效的 JS（如果您使用 Angular.js 代码并加载了库，它将变为有效），它将被执行。因此，您可以通过 Angular.js 语法进行所有您想要的修改。

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

【讨论】：

如何从角度范围之外运行角度代码？我是否必须定义在优化运行时可以访问的窗口级辅助函数？

有范围吗？正如我所说，我不熟悉角度。我在jsfiddle.net/KzxB9 中使用了 jquery 和 angular，并且完全可以添加 angular 将与之交互的 DOM 结构。请记住 Optimizely 在您的 JS 已经存在的页面上运行。全球性的一切都可以通过某种方式访问​​。如果您可以在开发控制台中执行此操作，则可以从 Optimizely 使用它。

Angular 实际上使用了一个名为 jqLit​​e 的 jQuery 子集。

【参考方案5】：

我正在尝试使用输入字段绑定到我的模型，使用优化来更改输入字段，然后强制 angular 重新加载字段

但似乎 angular 需要触发 .trigger('input') 事件，该事件在 firebug 中有效，但在优化编辑器中无效

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

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