こんにちは。スプマロです（@649Ga4）
2017年にGoogle TagManager（以下GTM)にYouTube動画トリガーと動画変数が実装されました。
これにより、ウェブページへ埋め込んだYouTube動画の再生などをカンタンに計測することができるようになりました。
ただ、いざ実際に計測をチャレンジしてみたら、エラーが発生してうまくいかない方も多いのではないでしょうか？
この記事では、YouTube動画トリガーがうまく動かないときの原因と対策をまとめてご紹介しますので、ぜひご参考ください。
enablejsapiパラメータが無い
YouTube動画のURLにはパラメータを付与することができます。
その中でenablejsapiパラメータとは、iFrameやjavaScriptを使ってYouTube動画をコントロールすることを許可/拒否するパラメータになります。
以下サンプルコードのように、enablejsapiの値が「1」の場合は、GTMは動画プレーヤーを操作することができるようになります。
https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1
クエリパラメータを追加する方法は2つありますので、見ていきましょう！
enablejsapiパラメータをコードに追加する
YouTube動画プレーヤーのURLに直接「enablejsapi=1」を追加するのが最もシンプルな方法になります。
可能であれば、まずこの方法を試すのがよいでしょう。
設定をする際にいくつか重要なポイントがあります。
ポイント①YouTube動画プレーヤーに複数のパラメータがある場合
YouTube動画プレーヤーには複数のパラメータが付与されていることがあります。
その場合、パラメータ間は「＆」で接続をする必要があります。
https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&enablejsapi=1
https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1;enablejsapi=1
パラメータがちゃんと有効化されていないとトリガーは動きませんので注意しましょう！
ポイント②enablejsapiパラメータの値に「0」が設定されている場合
enablejsapiパラメータの値が「0」の場合、JavaScriptAPIサポートが無効になるため、「1」になるように変更しましょう。
トリガーの「すべてのYouTube動画にJavaScript APIサポートを追加する」オプションを使う
YouTube動画トリガーには、「すべてのYouTube動画にJavaScript APIサポートを追加する」というオプションがあります。
enablejsapiパラメータがない動画プレーヤーに、パラメータを自動で追加してくれて、かつGTMのみで設定することができるメリットがあります。
設定は以下の図のように、Youtube動画トリガーでオプションにチェックを入れるだけで完了します。
- 動画の再読み込みが発生する可能性がある
GTMはenablejsapiパラメータを追加した後に、YouTube動画プレーヤーを再読み込みします。そのため動画が自動再生中であっても再読み込みが行われます。 - enablejsapiパラメータの値が「0」になっている
動画プレーヤーに「enablejsapi=0」が設定されていた場合、このオプションでは値を1には変更してくれません。直接パラメータを修正する必要があります。
YouTube動画が遅延読み込みされている
YouTube動画トリガーが機能する条件として、「enablejsapi = 1」の設定に加えて以下２つのどちらかを満たしている必要があります。
- GTMコンテナが読み込まれるとき、埋め込まれたYouTube動画がページにすでに存在する(=遅延読み込みではない)
- GTMコンテナが読み込まれるときに、YouTube IframeAPIスクリプトがページに存在する
つまり、YouTube動画が遅延読み込みをされていて①が満たせない場合は、②のYouTube IframeAPIを読み込みする必要があります。
YouTube IframeAPIの読み込み方法は以下になります。
■カスタムHTMLタグで以下コードを設定します
<script src = "https://www.youtube.com/iframe_api">
■トリガーは、ページビュートリガーを使用します。
全てのページ、もしくはYouTube動画が遅延読み込みされるページに配信をします。
この設定をすることで、YouTube動画トリガーよりも早くYouTube IframeAPIが読み込みされているため、YouTube動画トリガーが有効化されます。
カスタムHTMLタグの発火タイミングを「DOM Ready」にする場合は、YouTube動画トリガーの有効化を「ウィンドウの読み込み(gtm.load)」にして、カスタムHTMLタグよりも後に動くようにしてください。
動画プレーヤーのoriginパラメータが正しく設定されていない
動画プレーヤーのURLにoriginパラメータを使用していて、かつ値を「null」にしている場合はYouTube動画トリガーは起動しません。
originパラメータを削除するか、パラメータの値に動画プレーヤーを埋め込むページのドメイン名を指定する必要があります。
originパラメータとは、<iframe>タグ形式の埋め込みコードをつかう場合に、セキュリティを高めるためのパラメータです。
src属性の値がGTM読み込み時にない
YouTube動画を遅延読み込みする際の方法として、動画のサムネイルのみを表示して、ユーザーが再生ボタンをクリックしたときに動画を読み込みするパターンがあります。
このケースのほとんどは、YouTube動画トリガーがそのままでは使えません。
理由としては、多くの場合、src属性の変わりにdata-src属性に動画URLをセットします。
こうすることで、HTMLのレンダリング中に動画の読み込みがスキップされ、遅延読み込みができます。
その後、再生ボタンをクリック、もしくはウェブページを読み込んだ後にsrc属性に動画のURLをセットする流れです。
ここで問題なのが、GTMが読み込んだときには、src属性に動画のURLが無いことです。
GTMは、iframe要素の動画プレｰヤーのsrc属性をチェックし、そのURLからYouTube動画であるかを判定しています。
そして、動画プレーヤーごとの判定結果を「data-gtm-yt-inspected-XX」という新しい属性に固有の識別子でセットします。
つまり、後からsrc属性に動画のURLをセットしても、すでにGTMはYouTube動画ではないと判定しているため、トリガーの対象外となってしまうのです。
この問題を回避するためには、動画プレーヤーの再生時に「data-gtm-yt-inspected」属性をすべて削除する必要があります。
GTMでは対応ができないため、サイトの担当者や開発者に依頼する必要があります。
まとめ
今回は、GTMのYouTube動画トリガーが動かないときの対処法について説明しました。
なかなかYouTube動画トリガーの設定方法については情報があっても、エラー対策については触れられているものが少なかったため、備忘録もかねてまとめてみました。
皆さんのご参考になれば幸いです。
最後までお読みいただき、ありがとうございます！
ご感想やご意見などがあれば、ぜひTwitterまでご連絡ください。
