Google Optimizeでjsファイルの読み込み・メソッド呼び出し方法

無料でABテストが行えるツール『Google Optimize』。
テキストやHTML・CSSの編集は直感的にできるけど、JavaScriptの追加はハマりどころがあります。

僕の場合は下記を行おうとしてハマりました。

  • ABテスト用のjsファイルを読み込ませたい
  • 読み込んだjsファイルからメソッドを発動させたい

レアケースかもしれませんが、解決方法を紹介していきます。

①『Google Optimize』でjsファイルを読み込ませたい

ABテスト用のjsファイルを読み込ませたかったんですが、 『Google Optimize』の編集画面である「ビジュアルエディタ」ではどの項目でもscriptタグを追加することができませんでした。
Google Optimizeではscriptタグを埋め込めない

そもそもscriptタグの追加を禁止しているようです。

初期の HTML コンテンツがブラウザによって解析された後に HTML の変更が発生するため、初期の HTML コンテンツに含まれるどのスクリプトもすでに実行済みになります。このため、編集用に HTML コンテンツを読み込む際は、ビジュアル エディタはスクリプトタグを削除します。新しい HTML コンテンツにスクリプトを含めることはできません。

https://support.google.com/optimize/answer/6369964?hl=ja

外部のjsファイルを読み込ませたい場合は、scriptタグ自体をJavaScriptで生成すればOKです。「JavaScriptの実行」を選択して表示されたエディタに下記のコードを記述します。

var script = document.createElement('script'); //scriptタグを生成
script.src = "○○○"; //生成したscriptタグで、読み込みファイルのパスを記載
document.body.appendChild(script); //bodyタグの最後にscriptタグを追加

「JavaScriptの実行」でscriptタグを生成

②読み込んだjsファイル内のメソッドを呼び出したい

①のスクリプトの内容が即実行するものであれば読み込ませるだけでいいのですが、メソッドの呼び出しが必要な場合「JavaScriptの実行」記述が必要です。

そのままメソッドを呼び出してもhoge_script is not definedとなります。

//実行されない
hoge_script();

「window.onload」を使ってHTMLの読み込みが完了してから呼び出せば実行されます。

//実行される
window.onload = function () {
        hoge_script();
}

ちなみに読み込んだjsファイルはvue.jsで、呼び出しメソッドをグローバル化するため以下のようにしています。

var hoge_script = function hoge_script(){
    // メソッドの内容
}
window.hoge_script = hoge_script;

まとめ

  1. 『Google Optimize』で外部jsファイルを読み込ませるには、CreateElementでscriptタグを生成して、appendChildで追加する。
  2. 1のファイルの実行にメソッドの呼び出しが必要な場合、「window.onload」を使って、HTMLの読み込みが完了してからメソッドの呼び出しを行う

以上となります。
お読みいただきありがとうございました!

タイトルとURLをコピーしました