Googleタグマネージャでは、JavaScript変数を使ってウィンドウサイズが取得できます。レスポンシブなサイトでいろいろなトリガーを使うときに便利かもしれません。
こんにちは、Googleタグマネージャ大好きカグア！です。
本記事では、Googleタグマネージャでウィンドウサイズやブラウザサイズ、スクロール量など画面関連の値を取得する方法を解説します。いろいろなトリガーに使えるかと思います。
関連記事
＞＞GoogleタグマネージャのYouTubeトリガーと変数で動画再生を調べる：追記有り
＞＞AMP版Googleタグマネージャで使えるタグ・トリガー・変数一覧2017と計測事例
＞＞Googleタグマネージャだけで仮想PVを計測する方法
＞＞タグマネージャー | カテゴリー
JavaScript変数で取得可能なプロパティ
ウィンドウサイズ、ブラウザサイズ、スクロール量、画面解像度など、画面関連のJavaScriptプロパティを集めました。
- document.body.clientWidth
- document.body.clientHeight
- document.documentElement.clientWidth
- document.documentElement.clientHeight
- document.scrollingElement.scrollTop
- window.outerWidth
- window.outerHeight
- window.screen.width
- window.screen.height
- window.screen.availWidth
- window.screen.availHeight
必要とするJavaScriptのプロパティは上記です。最新のものにキャッチアップ出来ている気はしませんが、他にもありましたら、ぜひお教え下さい。
GMTで取得している値（PC）
実際にはこんな感じにブラウザなどのサイズを取得しています。
- Windows10
- Chrome バージョン: 67.0.3396.99
- ウィンドウは画面4分の1にリサイズ（PC）
- 画面中央までスクロール
レスポンシブで取得している値（スマホ）
Chromeのデベロッパーツールでの、スマホビューでも試してみました。こんな感じのウィンドウサイズになっています。
スマホを想定したレスポンシブな画面サイズではこんな感じに、それぞれのJavaScript変数が値取得していました。
Googleタグマネージャで変数に使う
Googleタグマネージャでは、変数＞新規＞JavaScript変数 、から簡単に作れます。
プレビューモードで、たとえばスクロールさせて、Variablesタブを見てみれば確認ができます。
ウィンドウサイズやスクロール量で発火させたいイベントや計測に使えそうですね。ただ、ブラウザやバージョンごとの確認は必須ですけども。
Googleタグマネージャは本当に便利ですね。
関連書籍や情報リンク
おすすめの関連書籍です。最近のフロントエンドに全くついていけてませんが、じっくり勉強してみたいですね。
＞＞人気の「JavaScript」最新 関連書籍一覧はこちら。
Amazonで詳しく見る
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛
基礎から学ぶ Vue.js | mio
実践 Google タグマネージャ入門 増補版 | 畑岡 大作（アユダンテ株式会社）
Googleタグマネージャの利用規約。Googleのヘルプは更新ログがまとまって記載されていないので定期的にはチェックしましょう。
＞＞Google タグ マネージャー利用規約 – タグマネージャ ヘルプ
変数の扱いに関する公式ヘルプです。
＞＞変数について – タグマネージャ ヘルプ
jQueryをそもそもGoogleタグマネージャで読み込んでおくと便利かも。
＞＞jQuery・JavaScript 高さ、横幅取得方法 – Qiita
プロパティの詳細。
＞＞Window.outerHeight – 全体の高さ | DOMリファレンス
ブラウザやバージョンによって、要確認。
＞＞[JavaScript] レスポンシブに必須！innerWidth, innerHeight, outerWidth, outerHeight, width(), height()を掘り下げる | 制作メモ | 560DESIGNS
スクロールバーを含む含まないなど一覧表が秀逸。
＞＞【Javascript】ブラウザの表示領域サイズ取得について – すたら日記
今回記事に書くまで、知りませんでした。
＞＞スクロール用の要素の取得にはdocument.scrollingElementを使おう – Qiita
FireFoxでもいけるみたい。
＞＞【JavaScript】Chromeの最新版（61）から画面スクロール量を取得する要素がdocument.bodyじゃなくてdocument.documentElementに変わっていた事を知った。 – 鼻ブログ
＞＞javascriptで簡単にスクロール位置を取得する – canonono.com
まとめ
JavaScriptのプロパティには本当にいろいろと便利なものがありますよね。jQueryなどのライブラリを使わなくとも取得できるものなどは、非エンジニアでも知っておいて損はないと思います。
できることを知っておくだけでもマーケターもすることや見積もりの幅が広がると思うんですよね。
そういう意味で、Googleタグマネージャでテストサイトをマーケターも運営することは、本当におすすめです。ぜひ。
・ ・ ・ ・ ・
＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る
↓↓↓無料のニュースレターを配信中です
