Measure Page Scrolling in Google Analytics

A Google Analytics plugin for measuring page scrolling

Earlier today I came across a Google Analytics plugin called Scroll Depth, developed by Rob Flaherty. Here’s how he describes Scroll Depth:

Scroll Depth is a small Google Analytics plugin that allows you to measure how far down the page your users are scrolling. It monitors the 25%, 50%, 75%, and 100% scroll points, sending a Google Analytics Event at each one.

You can also track when specific elements on the page are scrolled into view. On a blog, for example, you could send a Scroll Depth event whenever the user reaches the end of a post.

The plugin supports Universal Analytics, Classic Google Analytics, and Google Tag Manager.

Scroll Depth is available on GitHub and on it’s project page. Getting it setup is easy, the only two requirements are Google Analytics and jQuery.

Below is a basic setup.

<script src="jquery.scrolldepth.min.js"></script>
<script>
$(function() {
  $.scrollDepth();
});
</script>

Just be sure to include jquery.scrolldepth.min.js and the call to .scrollDepth() is made after Google Analytics has been loaded up.

There’s a number of options you can pass, too:. I especially like the elements option. It allows you to define a unique element to record scroll events for. So, if you want to track when users scroll to the footer of a post in WordPress, you could easily set that up!

$.scrollDepth({
  minHeight: 2000,
  elements: ['#comments', 'footer'],
  percentage: false,
  userTiming: false,
  pixelDepth: false
});

As stated, the only requirements are Google Analytics and jQuery. If it doesn’t seem to be working for you, ensure that Scroll Depth isn’t being loaded before your Google Analytics tracking code.

0

Flat Shadow jQuery Plugin

I really dig this Flat Shadow jQuery plugin. You can find a demo here. It can be found on GitHub, too.

Saw this on DesignerNews earlier today and knew I’d have a use for it. Will probably use it to replace the image on the Work With Me page.

The plugin was originally released in August of 2013. It hasn’t seen much for updates, the most recent was in January 2014 and was a simple change to the README to include a license.

Searched on codepen.io quick to see if I could find anything using this plugin. One pen, Long Shadow Icon Prototype, looks to be using the plugin. It was created about the same time that the plugin was pushed to GitHub.

I haven’t used this yet, but the demo is super simple and looks really easy to use. Looking forward to playing around with it.

Detailed usage instructions and other customization options can be found on GitHub.

0

Add Infinite Scroll to Your WordPress Theme Using Jetpack

Scroll Forever, Or Until There’s No More Posts

It’s no secret I’m a big fan of Jetpack. A single plugin adds so many options, not only for end users, but for we developers too! An excellent example would be infinite scroll.

Jetpack is a very popular plugin, so supporting Jetpack-specific features in your themes will end up just making your users happier. Kind of like an added bonus they didn’t realize they could use if they’re using your theme and Jetpack.

Infinite scroll is incredibly easy to add to “well-crafted” themes. The Twenty Twelve theme is a great example. Enabling infinite scroll is slightly more complicated with not-so-well-crafted themes, but it’s still pretty easy.

Enable Infinite Scroll in Well-Crafted Themes

Just add the following to your functions.php file.

add_theme_support( 'infinite-scroll', array(
    'container' => 'content',
    'footer' => 'page',
) );

Enable Infinite Scroll in Not-So-Well-Crafted Themes

Activate Infinite Scroll

Add the following to the functions.php file for your theme.

function mytheme_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content',
        'render'    => 'mytheme_infinite_scroll_render',
        'footer'    => 'wrapper',
    ) );
}
add_action( 'init', 'rootdip_infinite_scroll_init' );

Setup Function for the Render Parameter

The render parameter specifies a function, in this case, mytheme_infinite_scroll_init. That function uses the WordPress loop to load additional posts to be shown for infinite scrolling.

To hook this all up, add the following to your functions.php file.

add_action( 'init', 'mytheme_infinite_scroll_init' );
function rootdip_infinite_scroll_render() {
    get_template_part( 'loop' );
}

In mytheme_infinite_scroll_init, the ‘loop’ parameter value defines the file where your wordpress loop sits. It should be very basic and only contain markup and PHP you want to be included with every post. Have a look at the loop.php file from Rootdip for an example.

That’s It

There’s more options that you can play with that are described on the Jetpack Infinite Scroll page, such as styling specifics and JavaScript events.

That’s really all there is to it. With the above code you’ll have a working Jetpack Infinite Scroll in your WordPress theme. Whether you’ve got a well-crafted theme or not, you should be able to add infinite scroll via Jetpack fairly easily.

I’d suggest adding an option to your theme options to allow users to enable or disable Infinite Scroll.

4+

Create Floating Form Labels with FloatLabel.js or JVFloat.js

Floating labels are cool. People tend to have pretty strong opinions about floating labels, but overall, I like the idea, and have liked most implementations I’ve seen. The first one I saw was on CodePen. There’s a good article @mds on how the design pattern got started. There’s a lot of other cool thoughts on floating labels, specifically how they enhance (or undermine) the end user’s experience.

Where It Started

The Floating Labels pattern was based on a concept by Matt D. Smith. You can read more about the history of the floating label pattern at this blog post.
Original from Matt D. Smith
A search for “floating labels” on CodePen return about 200 results. You could probably take code from any of those pens and use it to implement a possibly slimmer floating label pattern for yourself. But, how can you choose which is the best way to do floating labels?

I Like Plugins

Personally, I like to roll with jQuery plugins for this sort of thing. The smaller the plugin, the better.
jvfloat
I’ve used JVFloat and really like it. Super easy to implement and the styling is extremely minimal by default, which is a good thing. The default looks decent with pretty much any UI but can easily be modified via CSS.

FloatLabel.js is similar to JVFloat. The CSS that comes with FloatLabel.js is also extremely minimal and can be easily customized to fit your UI. I am going to be using FLoatLabel.js in future projects, like kegplan.io.

Responsive Ready?

FloatLabel.js appears to have better responsive support. In JVFloat, the floated labels and their respective input fields are really scrunched together, in the default CSS at least.
FloatLabel.jsI haven’t witnessed this problem with FloatLabel.js. Check out the FloatLabel.js demo to see how it responds when you resize your browser window. Now have a look at the JVFloat demo, and again, resize your browser window to see how it responds. JVFloat.js doesn’t look as good as FloatLabel.js, it’s that simple.

So, if you’re looking for a good floating labels plugin I’d suggest FloatLabel.js, as it’s more responsive-friendly than JVFloat. Both are great jQuery plugins, though. And one bonus is that JVFloat is also a Zepto plugin.

Installation, finally!

Both are extremely easy to implement on your site. Just include the js and css like you usually would. But here’s more detail.

JVFloat.js

  1. Upload CSS and JS files.
  2. Add <link rel=”stylesheet” href=”css/jvfloat.css”> to your <head> section.
  3. Add <script src=”js/jvfloat.min.js”></script> right before the closing </body> tag. Be sure you’ve loaded jQuery (or Zepto) first.
  4. Initialize JVFloat somewhere in your javascript (or on page directly in script tags) $(‘.float’).jvFloat();
  5. Add class=”float” to text input fields you wish to have floating labels.

FloatLabel.js

FloatingLabels.js is probably quite similar. Since I’ve never used it, I won’t give you step-by-step directions since I have no experience with it (yet). Instead, refer to the README file at the FLoatLabel.js GitHub repo. It has installation instructions, I just haven’t tested them quite yet.

I really suggest you read this post from Brad Frost before voting. He gives some very good, specific examples of pros and cons of floating labels.

In general, do you think floating labels are a good idea?

View Results

Loading ... Loading ...

Comments are open below or you can discuss on Hacker News.

Update December 30, 2013: Also, check out Label Better, by Pete R. It looks really nice and easy to setup and integrate. You can find a demo over here.

0

Geocaching Hint Encoder/Deocder

Geocaching Hint Encoder/Decoder

So, I wrote this little thing a couple days ago. I was browsing on Geocaching.com and wanted to decode some of the hints. I found a few ROT13 decoders online, but wanted to write one of my own.

Much to my dismay, I learned geocaching.com has a built-in “decode” link right next to the encoded hints. I didn’t learn about this until about 10 minutes after I had finished writing the Geocaching Hint Encoder/Decoder. Thankfully, I didn’t have more than 20 minutes of work into it, so no big deal.

Geocaching Hint Encoder/Decoder was made with PHP and jQuery. I even put all the code up on Github so you can have a look for yourself!

0