{"id":21004,"date":"2013-04-03T10:24:09","date_gmt":"2013-04-03T17:24:09","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=21004"},"modified":"2017-02-26T06:40:56","modified_gmt":"2017-02-26T13:40:56","slug":"track-window-resizes-through-google-analytics","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/jquery\/track-window-resizes-through-google-analytics\/","title":{"rendered":"Track Window Resizes through Google Analytics"},"content":{"rendered":"<p>Sparkbox <a href=\"http:\/\/seesparkbox.com\/foundry\/google_analytics_and_the_resize_event\" rel=\"noopener\">has this snippet<\/a> to help figure out how often browser windows really are resized.<\/p>\n<pre rel=\"jQuery\"><code class=\"language-javascript\">(function() {\r\n  var resizeTimer;\r\n  \r\n  \/\/ Assuming we have jQuery present\r\n  $( window ).on( \"resize\", function() {\r\n    \r\n    \/\/ Use resizeTimer to throttle the resize handler\r\n    clearTimeout( resizeTimer );\r\n    resizeTimer = setTimeout(function() {\r\n\r\n     \/* Send the event to Google Analytics\r\n      *\r\n      * https:\/\/developers.google.com\/analytics\/devguides\/collection\/gajs\/methods\/gaJSApiEventTracking\r\n      * _trackEvent(category, action, opt_label, opt_value, opt_noninteraction)   \r\n      *\/\r\n      var $window = $( window );\r\n      _gaq.push( [ \"_trackEvent\", \"User Actions\", \"Browser Resize\", $window.width() + \" x \" + $window.height() ] );\r\n    }, 1000);\r\n  });\r\n})();<\/code><\/pre>\n<p>Note how easy it is to track events in Google Analytics. That can be used for just about anything.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sparkbox has this snippet to help figure out how often browser windows really are resized. (function() { var resizeTimer; \/\/ Assuming we have jQuery present $( window ).on( &#8220;resize&#8221;, function() { \/\/ Use resizeTimer to throttle the resize handler clearTimeout( resizeTimer ); resizeTimer = setTimeout(function() { \/* Send the event to Google Analytics * * [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3245,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[958],"acf":[],"jetpack-related-posts":[{"id":185617,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/done-resizing-event\/","url_meta":{"origin":21004,"position":0},"title":"Done Resizing Event","date":"October 6, 2014","format":false,"excerpt":"If you're used to something like jQuery UI resizeable, you get events you can bind to during the resizing, but also at the end of resizing. No such event exists in native JavaScript. You can fake it by setting a timeout to run the code you want to run when\u2026","rel":"","context":"In \"jQuery\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4422,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/fit-iframe-to-content\/","url_meta":{"origin":21004,"position":1},"title":"Resize Iframe to Fit Content (Same Domain Only)","date":"January 1, 2010","format":false,"excerpt":"Normally you set and width and height for iframes. If the content inside is bigger, scrollbars have to suffice. The script below attempts to fix that by dynamically resizing the iframe to fit the content it loads. Will resize an iframe like this: \u00a0 View Demo Still problematic... The source\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5101,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/jquery-sticky-footer\/","url_meta":{"origin":21004,"position":2},"title":"jQuery Sticky Footer","date":"December 20, 2009","format":false,"excerpt":"In general the CSS Sticky Footer is the best way to go, as it works perfectly smoothly and doesn't require JavaScript. If the markup required simply isn't possible, this jQuery JavaScript might be an option. HTML Just make sure the #footer is the last visible thing on your page. Sticky\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6920,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/detect-first-visible-element\/","url_meta":{"origin":21004,"position":3},"title":"Detect First Visible Element of Certain Class","date":"July 28, 2010","format":false,"excerpt":"Adds a class of \"first\" to the first element that has a class of \"activity\" that is visible in the browser window. $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); var windowHeight = $(window).height(); var first = false; $(\".activity\").each( function() { var offset = $(this).offset(); if (scrollTop","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4454,"url":"https:\/\/css-tricks.com\/snippets\/html\/top-bottom-halves-layout\/","url_meta":{"origin":21004,"position":4},"title":"Top &#038; Bottom Halves Layout","date":"October 19, 2009","format":false,"excerpt":"Top and Bottom Halves Top Half Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4417,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/1024x768-bookmarklet\/","url_meta":{"origin":21004,"position":5},"title":"1024&#215;768 Bookmarklet","date":"October 15, 2009","format":false,"excerpt":"The days of 800x600 screens are all but over, but most of us still try to accommodate 1024px wide screens. Hence the popularity of \"960\" width sites. This bookmarklet will resize the current browser window to that width and height. You know, so us web designers with giant monitors can\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21004"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=21004"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21004\/revisions"}],"predecessor-version":[{"id":251975,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21004\/revisions\/251975"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3245"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=21004"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=21004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}