はじめに
こんにちは。株式会社Rehab for JAPANでオンラインリハビリサービス「Rehab Studio」の開発チームに所属している徳永です。
私たちのチームでは、オンラインリハビリを提供するための社内向け管理画面と、お客様が利用する画面を開発しています。
今回は、最近リリースした「運動プログラム一覧」画面で発生した事象と、その解決方法について共有します。
ターゲット
この記事は、Google Tag ManagerとYouTubeの動画埋め込みを連携させる際に、データ送信がうまくいかず困っている方々を対象としています。
背景
あるお客様向けの画面を実装しており、その中で YouTube を埋め込まれていました。
遅延再生を入れました。
また、もともと Google Tag Manager と Google Analytics を連携させていました。
ただ、本機能が一通り出揃ったところでデータが送信されているか開発環境で確認したところ、Google Tag Managerにデータが送信されていないことが発覚しました。
リリース予定の期日も迫っており、焦りながらも無事に問題を解消することができ、リリースすることができました。
解決方法と解決までの道のり
解決方法
結果としては、ページのトップに以下のScriptタグを差し込むことで対処しました。
こちらの記事を参考に実装してます。
+ <Script src="https://www.YouTube.com/iframe_api"
+ strategy="afterInteractive" // インタラクション後にスクリプトを読み込むように設定
+ />
解決までの道のり
問題が発生した際、原因特定を効率よく行うために、問題発生前のプログラムと比較しました。今回は遅延再生を導入したことが大きな差分でしたので、比較的早い段階で原因を絞り込むことができました。しかし、修正方法が分からず頭を抱えていたところ、社内のエンジニア(@nekoze_matchan)に解決方法に記載したWebの記事を教えてもらうことで解決することができました。
まとめ
今回は、Google Tag ManagerとYouTubeの動画埋め込みを連携させる際に発生した問題とその解決方法について共有しました。
今回Google Tag Managerとの連携は将来的に必要な機能であり、リリースに間に合わせるためには問題解決に迅速な対応が求められました。 ただ、そのような状況でも、問題の原因特定箇所を素早く絞り込み、社内のエンジニアと相談して解決方法を見つけることができました。
本記事が、同じような問題で困っている方々の解決に役たちましたら幸いです。
Discussion