首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >是否可以在使用Angularjs的站点上使用Optimizely (或其他DOM操作A/B测试工具)?

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

Stack Overflow用户
提问于 2014-02-21 07:23:50
回答 5查看 3.7K关注 0票数 12

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

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

EN

回答 5

Stack Overflow用户

发布于 2014-03-20 00:33:37

是的,但是你需要使用Optimizely的Javascript API。

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

对于更深入的内容,您还可以查看自己的分页和使用自定义维度

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

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

编辑:

在高层次上,Optimizely是对存储和操作DOM的系统的前端抽象。它旨在供非开发人员或想要使用报告部分的开发人员使用。如果你正在编写一个自定义的angular应用程序,那么你仍然可以使用像GA这样的独立分析工具编写自己的bucketing、splits和功能。这听起来让人望而生畏,但如果您看一下上面的gaab示例代码,就会发现它相当简单。

票数 2
EN

Stack Overflow用户

发布于 2014-08-30 01:08:40

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

然后,为了最佳地检查实验是否应该运行(即满足URL目标),您需要调用window.optimizely.push(["activate"])。这将告诉Optimizely在正常的全页面加载时执行相同的操作。因此,根据您的情况,您可以从几个不同的位置调用optimizely api…

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

当您的实验更改不是绑定到视图加载后angular可能生成的动态部分时,这是有效的。$routeChangeSuccess事件不能以最佳方式激活,因为它在有任何DOM可操作之前就会触发。

代码语言:javascript
运行
复制
app.run(function run($rootScope){
    $rootScope.$on('$viewContentLoaded', function() {
        window.optimizely = window.optimizely || [];
        window.optimizely.push(["activate"]);
    });
});

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

代码语言:javascript
运行
复制
(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);
}());

控制器中的用法...

代码语言:javascript
运行
复制
function MyCtrl(Optimizely) {
    Optimizely.Activate();
    Optimizely.TrackEvent("my_goal_success");
}
票数 2
EN

Stack Overflow用户

发布于 2014-06-25 02:32:21

我不确定Optimizely是如何工作的,但Visual Website Optimizer有一个功能,允许我们使用JS添加变体。我们像这样操作内容:

代码语言:javascript
运行
复制
// 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.';
}); 
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21921930

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档