GA4では外部コンテンツへのリンククリックは計測されますが、HTMLで別のコンテンツを埋め込むiframeタグは対象外です．本記事では，iframeTracker jQueryプラグインとGoogleタグマネージャーを利用した具体的な設定手順を，図解を交えながら丁寧に説明します．
目次
1．はじめに
iframe（アイフレーム、インラインフレーム）は，HTMLで記述されたWebページ内に別のWebページやコンテンツを埋め込んで表示するためのタグで， <iframe></iframe>で挟まれたタグです．
例えば，YouTubeの動画を自分のサイトのページ内に組み込んで表示したとき使われたりします．YouTubeで該当する動画ページで，動画の下にある「共有」ボタン（図1の赤枠内参照）をクリックすると，図1のような各種媒体への共有や動画のURLを表示するダイアログボックスが表示されます．ここで「埋め込む」を選ぶと，図2のような画面が表示され，ページに動画を埋め込むためのコード（iframeタグ）として以下のようなものが取得できます．
<iframe width="560" height="315" src="https://www.youtube.com/embed/jjfFRdFusZk?si=N6O2eNxevzoRBQFK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
図1．YouTubeの動画共有機能
図2．YouTubeの動画共有の「埋め込む」を選択した場合
このiframeタグを，動画を組み込みたいページのHTMLソースコードの該当箇所に貼り付けます．
YouTubeのようなコンテンツの場合，このiframeタグを組み込むと，ページ内で動画を再生可能な表示ができます．
しかし，その他の場合ではiframe要素をクリックすると，そこに表示されていた別のWebページがブラウザで開く（遷移する）ような動作をすることがあります．この機能から，アフィリエイト広告など，特定の用途でiframeタグが多用されてきました．
iframeの詳しい解説は，検索すれば多数見つかります．例えば以下のようなサイトが参考になると思いますので，もっと詳しいことを知りたい場合はそちらを参照してください．
- インラインフレーム（iframe）とは？ 使われる場面や設定方法をご紹介
https://www.geo-code.co.jp/webdev/mag/iframe/
- iframeとは何か？非推奨の理由は？仕組み・メリット・デメリットを完全ガイド
上記のサイトにもあるように，iframeにはデメリットもあるため，最近では異なる手段が用いられることが増えているように感じます．
しかし，依然としてiframeしか利用できない（提供されていない、または利用したい）ケースもあります．そのような場合で，iframeで表示していたものがクルックされたかを知りたいと思った場合，そのままではGA4（Google Analytics 4）ではそのクリックを計測しません．GA4では，外部コンテンツ（外部サイト）へのリンククリックはデフォルトで計測されますが，iframeは対象外です（YouTubeのように専用の計測タグが用意されている場合は除きます）．
「GA4でiframeのクリックを計測」といったキーワードで検索すると，AIモードでの説明を含め解説ページが見つかりますが，情報が不親切であったり，古い情報（ユニバーサルアナリティクス/UA）に基づいているケースが散見されます．そこで、本記事では設定と方法をより丁寧に説明します。
なお本記事は，GA4の計測にはGTM（Googleタグマネージャー）を使っている場合を想定しています．
2．準備
iframe要素をクリックしたことを計測するのに，iframeTracker jQueryのプラグインを利用します．GitHubの「iframeTracker jQuery」にアクセスして，右上の「< > Code」ボタンをクリックし，「Download ZIP」を選択します（図3参照）．ダウンロードされた「iframeTracker-jquery-master.zip」を展開し，「src」フォルダ内の「jquery.iframetracker.js」を取り出します．
図3．GitHubの「iframeTracker jQuery」から「iframeTracker-jquery-master.zip」をダウンロード
図4．「jquery.iframetracker.js」ファイル
次に，ページ内に配置したいiframeタグを準備します．今回の例では，MetaのFacebookが提供するページプラグイン「 https://developers.facebook.com/docs/plugins/page-plugin 」で取得できるコードをサンプルとして使用することにします（サイズは，widthを400，heightを200としてみました．hrefはデフォルトで入力されているFacebookのURLをそのまま利用しました）．
図5．MetaのFacebookが提供するページプラグインのページ
下記の「コード取得」ボタンを押すとダイアログボックスが表示されますが，デフォルトはJavaScript用のコードであるため，タブにある「IFrame」をクリックしてiframeタグのコードを取得します（図6参照）．
実際に取得したコードは下記です．
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=400&height=200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="400" height="200" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
図6．Facebookが提供するページプラグイン「IFrame」
3．ページのhtmlにコードを追加する
まず，取得したiframeタグを，下記の赤字のように「id=”facebook_link_iframe”」を追加した形に変更します．
<iframe id="facebook_link_iframe" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=400&height=200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="400" height="200" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>追加する「id=”facebook_link_iframe”」は，トラッキングのための目印となるIDです．「facebook_link_iframe」は任意に変更可能ですが，同一ページ内の他の「id=”***”」の「***」部分と重複しないように注意してください．iframeタグは基本的に内部のパラメータを直接変更できませんが（サイズなどの調整可能なパラメータは除く），上記のように「id=”***”」を追加しても表示に影響はありません。
次に，「jquery.iframetracker.js」をWebサイトのサーバーにアップします．アップする場所は，該当する（iframeを設置したい）htmlファイルと同じ階層（フォルダ）内でもいいですが，今回は そのhtmlファイルがある階層にある「js」というフォルダに設置する（アップする）ことにします（図7参照）．
図7．「jquery.iframetracker.js」をWebサイトのサーバーにアップ（FTPの画面）
計測するためのコードを＜head></head>内に設置します．
先ほどアップした「jquery.iframetracker.js」を読み込むためのコードが以下のようになります．
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/jquery.iframetracker.js"></script>上述したように，htmlファイルがある階層にある「js」というフォルダに「jquery.iframetracker.js」を設置したので，上記の2行目の「src=” “」内が「js/jquery.iframetracker.js」となっています．ここは，ご自分の環境によって適切に書き換えてください．
そして，クリックしたことをGA4に通知する（データプッシュする）ために次のコードを用います．
<script>
$(document).ready(function() {
$('#facebook_link_iframe').iframeTracker({
blurCallback: function(){
//alert("iframe click!");
dataLayer.push({'event': 'iframe-click'})
}
});
});
</script>上述したようにiframeに追加したidとして「facebook_link_iframe」を用いたので，上記のコードの3行目の$(‘#facebook_link_iframe’)では「facebook_link_iframe」を記述しています（つまり，ここにはidで用いたテキストの先頭に「#」を付けた記述を$(‘ ‘)内に入力します）．これで，「id=”facebook_link_iframe”」があるiframe要素がクリックしたとき，上記のコードが動きます．
6行目にある「dataLayer.push({‘event’: ‘iframe-click‘})」は，GA4に「iframe-click」というイベントがあったことを送信します．「iframe-click」は任意に変更可能ですが，GA4で使われているイベント名と重複しないようにします．ただし，本例ではGA4はGTMを使って測定しているので，「iframe-click」はGTMのトリガーのためのイベントとして使います．GA4でクリックしたことを計測するイベントは，GTMでGA4のイベントタグを使います（4節で説明します）．
以上でコードの準備ができたので，それらを該当するページのhtmlに追加していきます．
まず，<head></head>内のGTMの計測タグより上に以下のコードを設置します（図8参照）．
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/jquery.iframetracker.js"></script>
<script>
$(document).ready(function() {
$('#facebook_link_iframe').iframeTracker({
blurCallback: function(){
//alert("iframe click!");
dataLayer.push({'event': 'iframe-click'})
}
});
});
</script>このとき，「jquery.iframetracker.js」を読み込むためのコードを，「dataLayer.push({‘event’: ‘iframe-click’})」を含むコードより上にしてください．また，GTMの計測タグよりも先に上記のコードが読み込まれていないと，6行目の「dataLayer.push({‘event’: ‘iframe-click’})」によるデータ送信が機能しないため，GTMの計測タグより上に設置するのが安全です．
図8．内のGTMの計測タグより上に以下のコードを設置
そして<body></body>内の表示したい箇所に，「id=”facebook_link_iframe”」を追加したiframeタグ
<iframe id="facebook_link_iframe" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=400&height=200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="400" height="200" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
を設置します．
さて，GA4にデータを送る前に，実際にクリックしたら追加したコードが動くかを確認したいと思うかもしれません．その場合は，
<script>
$(document).ready(function() {
$('#facebook_link_iframe').iframeTracker({
blurCallback: function(){
alert("iframe click!");
//dataLayer.push({'event': 'iframe-click'})
}
});
});
</script>のように，元のコードの5行目の「//alert(“iframe click!”);」の先頭の「//」を削除して「alert(“iframe click!”);」とし，6行目の「dataLayer.push({‘event’: ‘iframe-click’})」をの先頭に「//」を追加して「//dataLayer.push({‘event’: ‘iframe-click’})」としてください．
この変更を反映した状態でhtmlを保存し，サーバーにそのhtmlファイルをアップしてください．そして上記の変更が反映された状態のページにアクセスして，表示されたiframe要素をクリックしてみましょう．すると，コードが問題なく動けば図9のような「iframe click!」と表示されたアラートが表示されます（このアラートが表示された場合，iframe要素として表示されていた別ページは開かれません．ただし，iframe要素の内容やクリック箇所によってはアラートが出ないケースがあることも確認済みです．実際，本例のFacebookコードではアラートが表示される箇所とされない箇所がありました）．
以上で，サイト側の準備は終わりました．
図9．「alert(“iframe click!”);」で表示されるアラート
4．GTMの設定
GTMでトリガーを作成します．新規で「カスタム イベント」のトリガーを選択（図10参照）し，「イベント名」に「iframe-click」と入力（dataLayer.push({‘event’: ‘iframe-click’})で使った「iframe-click」を入力）し，「このトリガーの発生場所」は「すべてのカスタム イベント」を選び，名前を付けて保存します（図11参照）．本例では「iframe-clickのトリガー」と名付けました．
図10．新規で「カスタム イベント」のトリガーを選択
図11．GTMでトリガーの作成
次に，GTMでGA4のイベントタグを作成します．新規で「Google アナリティクス: GA4 イベント」タグを選択し（図12参照），測定IDを入力し，本例では「click_iframe_facebook」をイベント名として入力しました（図13参照）この「click_iframe_facebook」がGA4でイベントとして計測されます．ECなどの計測で用いられるキーイベント「purchase」を，ここでのイベント名として使うことも可能です．ただし，使用されているイベント名と意図せずに重複しないようにしましょう．
図12．新規で「Google アナリティクス: GA4 イベント」タグを選択
図13．GTMでGA4のイベントタグの作成
そして，先ほど作ったトリガー「iframe-clickのトリガー」を配信トリガーに選び，名前を付けて保存します．本例では「click_iframe_facebookのイベント用タグ」としました．
最後は，プレビューで実際にタグが動いているかなどを確認し（図14参照），問題なければ公開します．
図14．プレビューで確認
5．計測（探索レポートで確認）
実際に計測したイベント「click_iframe_facebook」をGA4の探索レポートを使って確認した結果が図15です．
図15のように「年月日時」や「ページロケーション」のディメンションを組み合わすことで，クリックがあった年月日・時間とページのURLもわかります．このように他のディメンションを組み合わすことで，複数のページに同じiframeタグがある場合などではどのページでのクリックが多いかなどもわかるようになります．
図15．探索レポートでデータ確認
6．おわりに
近年は，iframe（アイフレーム、インラインフレーム）自体が使われることがさけられる方向になっているのかもしれません．その理由のひとつは，広告ブロックアドオンの存在だと推測します．
ブラウザに広告ブロックアドオンを入れている場合は，iframe要素に該当する箇所が表示されない場合があるからです．今回の例で広告ブロックを有効にしているブラウザにおいて，YouTubeのiframe要素は表示されるが，例として使ったFacebookのiframe要素は表示されなくなるのを確認しました（図16と17参照）．
おそらく，広告ブロックのアドオンを作っているところが，iframe要素の内容によって表示を有効・無効にするかの初期設定をある程度しているのだと推測します．iframeタグがアフィリエイトなどの広告で使われているため，有名どころの（広告配信をしているような）サービスのiframeタグは初期設定で無効にされると推測しました（今回使ったFacebookは広告ではありませんが，Facebook自体が広告を配信しているので初期設定で無効にする対象になっているのだと推測します．一方で，日本のマイナーなサービスのiframe要素だと同じ広告ブロックアドオンでも普通に表示されているのも確認しています）．
ともかく，iframeタグをどうしても使う必要があり，そしてGA4でそのiframe要素のクリックを計測したい場合において，この記事で紹介した方法が役に立つと幸いです．
図16．広告ブロックを有効にしているブラウザでの表示
図17．広告ブロックが使われていないブラウザでの表示
