web-dev-qa-db-ja.com

Googleオプティマイズのドキュメント対応でJavascriptを実行するにはどうすればよいですか？

Googleオプティマイズキャンペーンでウィンドウロードまたはドキュメントの準備ができたときにJavaScriptを実行するにはどうすればよいですか？ BodyまでDOM要素を選択できるようですが、ドキュメントでjsを実行する必要があります。

google-optimize
10
Stewie Griffin

これは私がそれについて行く方法です：

  1. ビジュアルエディターで実験バリアントを編集します。
  2. 要素を選択アイコン（左上隅の長方形）をクリックします
  3. Element Selectorフィールドに、bodyと入力します。
  4. Add changeボタンをクリックし、Javascriptを選択します。これにより、本体に対して呼び出されるJS関数を入力できるダイアログが表示されます。
  5. そこに実行したいコードを入れ、タグを閉じた後オプションが選択されていることを確認します。

Googleオプティマイズの性質上、読み込まれるまでDOM要素をいじり始めないだろうと思います。また、bodyタグでタグを閉じた後オプションを選択すると、すべての要素がDOMに読み込まれたことを確認できます。

ただし、100％確実にしたい場合は、次のような関数を記述できます。

function runOnLoad() {
    console.log('this will only run when window is loaded');
}
if(document.readyState === "complete") {
    runOnLoad();
} else {
    window.addEventListener("onload", runOnLoad, false);
}

そのコードスニペットは、 フレームワークなしでDOMの準備ができているかどうかを確認する方法から変更されましたか？

15
Maxime Rainville

上記のコードが機能しない場合。

使用してみてください：

document.onreadystatechange = function() {
    if(document .readyState === "complete") {
      console.log('this will only run when window is loaded');
    }
}

参照： https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

1
PiYa