Google Tag ManagerのカスタムHTMLで設定した変数を別のJSファイルで使用したい。

前提

Google Tag ManagerのカスタムHTMLで
jsを記述して、そこで設定した変数を
GTMを埋め込んだページに直接記述しているjsで
使用したいのですが、受け取り側で「not defined」のエラーが発生しました。

実現したいこと

GTMのカスタムHTMLで設定した変数を
別のscriptで使いたい。

該当のソースコード

Javascript
1//GTM内で設定している変数
2var hoge = "huga";

Javascript
1//GTMが埋め込まれているページ内
2var hogehoge = document.getElementsById('hogehoge');
3hogehoge.setAttribute('hogehoge', hoge);
4``
5
6

行動規範の内容に同意します

回答1件

ベストアンサー

前提として、GTMはFirefoxのセーフモードや広告ブロッカーなどによって読み込まれないことがありますので、GTM側の変数をサイト側に渡すような実装は望ましくありません。

そのうえで今回の事象の場合、GTMによるタグの発火が行われる前に、サイト側のJavascriptが動き始めていることが要因であると考えられます。
Javascriptに長ける人であればよりよい同期処理の方法をご存知かと思いますが、一案として下記のようにカスタムイベントを利用するのはいかがでしょうか。

html
1<script>
2// カスタムHTML
3  var event = new CustomEvent("fuga");
4  var hoge = "hoge";
5  var element = document.getElementsById('hogehoge');
6  element.dispatchEvent(event);
7</script>

html
1<script>
2// サイト側
3   var element = document.getElementsById('hogehoge');
4  element.addEventListener("fuga", function(e) { element.setAttribute('hogehoge', hoge); });
5</script>