rveitch
7/29/2016 - 3:45 AM

Chartbeat Scroll History to Scroll Depth

Chartbeat Scroll History to Scroll Depth

<?php

/**
 * ChartBeat Scroll History
 */

# Retrieve the data
$response = '{"data":{"stats":{"title":"Microsoft to cut an additional 2,850 jobs | INFORUM","scroll":{"hist":[2,2,3,5,5,2,1,0,0,0],"avg":2.95,"median":3}}}}';
$scroll_hist = json_decode( $response, true )['data']['stats']['scroll']['hist'];

# Total the Concurrent Users
$total = '0';
foreach ( $scroll_hist as $hist ) {
	$total = ($total + $hist);
}

# Create an array of the cumulative values
$scroll_depth_array = array();
$i = '0';
foreach ( $scroll_hist as $hist ) {
	if ( '0' == $i ) {
		$scroll_depth_array[] = $hist;
		$i++;
	} else {
		$index_offset = ($i - 1);
		$scroll_depth_array[] = ( $hist + $scroll_depth_array[ $index_offset ] );
		$i++;
	}
}

# Compute the scroll depth percentages
$scroll_depth_percents = array();
foreach ( $scroll_depth_array as $depth ) {
	$scroll_depth_percents[] = ( ( $total - $depth ) / $total );
}

echo '<pre>';
print_r($scroll_depth_percents);

/** Returns:
Array
(
    [0] => 0.9 // 90% of readers read until here. (10% of the screen height)
    [1] => 0.8 // 80% of readers read until here. (20% of the screen height)
    [2] => 0.65 // 65% of readers read until here. (30% of the screen height)
    [3] => 0.4 // 40% of readers read until here. (40% of the screen height)
    [4] => 0.15 // 15% of readers read until here. (50% of the screen height)
    [5] => 0.05 // 5% of readers read until here. (60% of the screen height)
    [6] => 0 // 0% of readers read until here. (70% of the screen height)
    [7] => 0 // 0% of readers read until here. (80% of the screen height)
    [8] => 0 // 0% of readers read until here. (90% of the screen height)
    [9] => 0 // 0% of readers read until here. (100% of the screen height)
)
*/

/* Misc Notes:
the vast majority of readers’ collective time is spent below the fold (the typical height of a browser window, about 700 pixels)

scroll [h]: Number of concurrents that made it down a certain way of the page--histogram buckets are broken down into 10% intervals of the page.
*/