質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Google Analytics

Google AnalyticsはGoogleが開発した無料のウェブ分析のソリューションです。複数のクライアント側のAPIとデータをエクスポートし管理するREST APIも格納されています。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

agt_
agt_

総合スコア0

Google Analytics

Google AnalyticsはGoogleが開発した無料のウェブ分析のソリューションです。複数のクライアント側のAPIとデータをエクスポートし管理するREST APIも格納されています。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

0クリップ

1393閲覧

投稿2021/08/09 09:42

編集2021/08/09 11:16

前提・実現したいこと

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

<iframe seamless="" style="height: 736px;" class="js-mdrd-block-html-target block-html__frame"></iframe> <html> <head> <base target="_parent"> <script> var parent = null </script> </head> <body> <a href="URL" onClick="ga('send', 'event', 'category', 'action', 'label', 1, { 'nonInteraction': 0 });"> <img src=〜〜〜> </a> </body> </html> </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内に入れてみたところ、エラーは表示されなくなりましたが、イベントトラッキングもできていないようです。

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Google Analytics

Google AnalyticsはGoogleが開発した無料のウェブ分析のソリューションです。複数のクライアント側のAPIとデータをエクスポートし管理するREST APIも格納されています。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。