12

Angularjs を使用するサイトで Optimizely を使用しようとしていますが、Angularjs の全体的な目的は DOM を操作しないことであり、Optimizely は DOM を操作することによって機能するため、それは難しいと理解しています。

これらのツールを一緒に使用できるようにする方法について、ドキュメントに対するガイダンスはありますか? おそらく、ツールの動作を支援するディレクティブを作成できる構造でしょうか?

4

5 に答える 5

2

まず、実験の「起動モード」を「手動」にする必要があります。

次に、Optimizely に実験を実行する必要がある (つまり、URL ターゲットを満たしている) かどうかを確認させるには、 を呼び出す必要がありますwindow.optimizely.push(["activate"])。これにより、Optimizely は、通常のフル ページ ロードで行うのと同じことを行うように指示されます。したがって、状況に応じて、いくつかの異なる場所から最適化 API を呼び出すことができます...

ビューが読み込まれるときのアプリの実行メソッドで

これは、実験の変更内容が、ビューの読み込み後にAngularが作成する可能性のある動的な部分に関連付けられていない場合に機能します。$routeChangeSuccess イベントは、操作する DOM が存在する前に発生するため、Optimizely のアクティブ化では機能しません。

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

より明示的な方法は、window.optimizely.push(["activate"])実際に実験を行うコントローラーまたはディレクティブでのみ呼び出すことです。このようにして、データがロードされた後など、アクティブ化の正確なタイミングを制御できます。多くの場合、optimizedly 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");
}
于 2014-08-29T17:08:40.213 に答える
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上記のサンプル コードを見るとかなり簡単です。

于 2014-03-19T16:33:37.127 に答える
1

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.';
});
于 2014-06-24T18:32:20.677 に答える
0

入力フィールドを使用してモデルにバインドしようとしていますが、最適化を使用して入力フィールドを変更し、角度を強制してフィールドをリロードします

しかし、Angular では .trigger('input') イベントを発生させる必要があるようです。これは firebug では機能しますが、optimizely エディターでは機能しません

//optimizely エディターはこの行を追加します (users など) $('.debug.edit-ab-test'.val('abc');

//エディターでは機能しません。setInterval と setTimeout を遅延させてみました $('.debug.edit-ab-test input[type="text"]').trigger('input');

于 2014-04-07T19:38:03.080 に答える