問題タブ [optimizely]

Youtube の最近の Q&A で、GTM プロダクト マネージャーが 2 つのことを言いました。この 2 つのことから、body タグの先頭に GTM スクリプトを配置するという現在の推奨事項について考えさせられました。

https://youtu.be/XBCNJo9qGH8?t=6m23s

このビデオでは、早期に取得することの利点と、欠点は HTML 検証であることを強調しています。同期タグは年末までにサポートされる予定であり、それを念頭に置いて将来的に保証したいと考えています (同期 A/B スクリプトの場合)

Google アナリティクスから A/B スニペットを展開し、GTM を介して最適化できることが望ましいと思われます (同期スクリプトを数か月間使用したくないため、非常に望ましいことです)。

スクリプトを head セクションに置くことによるその他の悪影響は何ですか?

Optimizely A/B テスト サービスは.replaceWith("new HTML")、簡単な A/B テストを作成するために広範囲に使用します。これには、新しい要素の ID/クラスが同じであっても、置き換えられた要素からのイベントをリッスンしていたイベント リスナーが削除されるという副作用があります。

例：

1. DOM には以下が含まれます。

   /li>

2. 傾聴者: $("#myButton").click(function() { console.log('clicked!'); });

3. と取り換える： $(".something").replaceWith("some new HTML, containing #myButton");

ステップ 3 の後#myButton、元の DOM 要素が破棄され、新しい要素が追加されたため、 を押しても機能しなくなりました。

この問題を解決するための適切で「クリーンな」方法は何でしょうか?

可能な解決策

1. コードベースを把握し、Optimizely の実験で適切なイベント リスナーを「再追加」します。
   • 問題: A/B テスターは本当のソフトウェア開発者ではないかもしれません。これは面倒だと思います。
   • とてもきれいな方法のようには見えません

2. Optimizely の後にコードを実行する方法を見つけ、その方法ですべてのイベント リスナーを追加します。これを行う良い方法はありますか？

3. ここで説明されているように、「$.on() を使用したイベント委任」を使用します: HTML を jQuery に置き換え、イベント バインディングを保持する方法

   • 問題: 何を A/B テストして置き換えるかを正確に予測するのは難しい

編集： jQuery 1.11.xを使用しています

私は最適化のためにいくつかのドキュメントを読んでいて、それらがスコープに追加する興味深い値を見ました。私はそれを完全に理解しているかどうか確信が持てません。

ドキュメントの関数は次のとおりです

var スコープを完全には守っていませんこれは* $rootscope *に似ていますか?

これを行うことで、関連するスコープの値を取得できることを知っています

ウィンドウが表示され、これがローカル スコープを超えていると想定したい。

Angular.js シングル ページ アプリで Optimizely を実行しています。ドキュメントによると、実験をトリガーする最良の方法は、 callback で条件付きアクティブ化を使用することです。

window.angular.element('body').scope()ただし、コードは実験を正常に実行していないようです。undefined

私が理解している方法は、HTML のメインの Optimizely スクリプトが、ロード時にすぐにアクティブ化関数を呼び出し、コールバックを登録するということです。この時点で、ページ自体が完全に読み込まれず、すべての Angular 変数 ( などscope) が初期化されていない可能性があるため、 にundefined何も登録されないというエラーが発生します$locationChangeSuccess。

誰でもこの問題に対処した経験がありますか? ここで何が間違っていますか？

ありがとう！

Optimizely のドキュメントに従って、反応するネイティブ アプリ (@22.2) を動作させようとしましたが、そのようなバグが発生しました。

何が問題で、どうすればデバッグできますか。私は試します

しかし、それは私に何の情報も与えていません