*

レスポンシブ含むウィンドウサイズをGoogleタグマネージャで取得した

公開日: : 最終更新日:2018/10/31 JavaScript, タグマネージャー , , ,


LINE facebook twitter g+
B! pocket Evernote 楽天


家電&カメラ タイムセール/バーゲン会場/クーポン配布はこちら。
Amazonでクーポンをもらう

【Amazonファッション】メンズ80%オフ商品を見る!
セール商品を見る

ウィンドウサイズいろいろ
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変数 、から簡単に作れます。
Googleタグマネージャでの表記

プレビューモードで、たとえばスクロールさせて、Variablesタブを見てみれば確認ができます。
変数の中身を確認

ウィンドウサイズやスクロール量で発火させたいイベントや計測に使えそうですね。ただ、ブラウザやバージョンごとの確認は必須ですけども。

Googleタグマネージャは本当に便利ですね。

関連書籍や情報リンク

おすすめの関連書籍です。最近のフロントエンドに全くついていけてませんが、じっくり勉強してみたいですね。

>>人気の「JavaScript」最新 関連書籍一覧はこちら。
Amazonで詳しく見る

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛 |本 | 通販 | Amazon
Amazonで詳しく見る

基礎から学ぶ Vue.js | mio

基礎から学ぶ Vue.js | mio |本 | 通販 | Amazon
Amazonで詳しく見る

実践 Google タグマネージャ入門 増補版 | 畑岡 大作(アユダンテ株式会社)

実践 Google タグマネージャ入門 増補版 | 畑岡 大作(アユダンテ株式会社) |本 | 通販 | Amazon
Amazonで詳しく見る

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タグマネージャでテストサイトをマーケターも運営することは、本当におすすめです。ぜひ。

「プロパティ」

関連するほかの記事を見てみよう!
このサイトのトップページへ行く

  • このエントリーをはてなブックマークに追加
  • Pocket

Profile



Yoshihiko Yoshida
メディア運営業界23年目。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑