iframe内におけるJavaScriptによるイベントトラッキング (Google Tag Managerを使えないAmebaOwnd上でイベントトラッキングを実現するために)

前提・実現したいこと

AmebaOwndというWEBサイト作成サービスで作ったページ上でイベントトラッキングをし、Google Analytics(GA)にデータを送信したいです。

以下の制約があり、難航しております。
・ページの<head>タグ内の変更が不可
・上記により、Google Tag Manager(GTM)の使用が不可

そこで
「HTMLを挿入」機能を使って、Javascriptによるイベントトラッキングを試行してみました。

発生している問題・エラーメッセージ

「HTMLを挿入」機能を用いて以下のHTMLを挿入しました(バナー)。


<a href="URL" onClick="ga('send', 'event', 'category', 'action', 'label', 1, { 'nonInteraction': 0 });"> <img src=〜〜〜> </a>

表示されたバナーをクリックしたところ、以下のようなエラーがコンソールに表示され、イベントトラッキングに失敗しました。

Uncaught ReferenceError: ga is not defined at HTMLAnchorElement.onclick (19678537:1)

該当のソースコード

「HTMLを挿入」機能を使って挿入したHTMLは、実際のページを表示させた際には以下のようにiframeとして挿入されます

HTML
1<iframe seamless="" style="height: 736px;" class="js-mdrd-block-html-target block-html__frame"></iframe>
2 <html>
3  <head>
4   <base target="_parent">
5   <script>
6    var parent = null
7   </script>
8  </head>
9  <body>
10   <a href="URL" onClick="ga('send', 'event', 'category', 'action', 'label', 1, { 'nonInteraction': 0 });"> <img src=〜〜〜> </a>
11  </body>
12 </html>
13</iframe>

エラーを見る限り、おそらく、iframeの親フレームの<head>内にあるanalytics.js及びga関数(以下script)を呼び出せておりません。

<script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 if ('UA-171513306-1' && window.ga) {window.ga('create', 'UA-171513306-1', 'auto', {'name': 'usertrack'});}
</script>

ちなみに「HTMLを挿入」でHTMLを挿入すると、
iframeの<body>内に記載されますが、

<script> </script>を挿入すると、
挿入箇所は自動でiframeの<head>内に移る仕様なようです

試したこと

試しに親フレームのhead内にある

<script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 if ('UA-171513306-1' && window.ga) {window.ga('create', 'UA-171513306-1', 'auto', {'name': 'usertrack'});}
</script>

を子フレームのhead内に入れてみたところ、エラーは表示されなくなりましたが、イベントトラッキングもできていないようです。

どのように修正したらよろしいでしょうか。
よろしくお願いいたします

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

回答1件

自己解決

無理やりiframe内でGTMを導入する方法でイベント計測できるようになりました

①GTMのアカウント作成
②以下のコードを「HTMLを挿入」する

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

　
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM- XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->


<!-- トラッキングしたいリンク等 -->
<a href="URL"> <img src=〜〜〜> </a>
<!-- End トラッキングしたいリンク等 -->

③GTMでイベントトラッキング用のタグとトリガーを作成

でトラッキングできます。

トラッキングしたいリンク等を作るたびに毎回GTMをifame内に導入するような方式となります。

※