From 046ea360745de2b0586fcc6d62004ec5a4ab5935 Mon Sep 17 00:00:00 2001 From: Ben Lowery Date: Thu, 3 Dec 2015 11:03:54 -0500 Subject: [PATCH 1/3] Reader: Add tracking with Tracks, matching what we do on native. --- client/reader/comments/form.jsx | 1 + client/reader/controller.js | 6 ++++++ client/reader/full-post/index.jsx | 1 + client/reader/like-button/index.jsx | 1 + client/reader/sidebar/sidebar.jsx | 13 +++++++------ client/reader/stats.js | 8 +++++++- client/reader/tag-stream/index.jsx | 6 +++++- 7 files changed, 28 insertions(+), 8 deletions(-) diff --git a/client/reader/comments/form.jsx b/client/reader/comments/form.jsx index 59f14eed6eceb..38d8319297c80 100644 --- a/client/reader/comments/form.jsx +++ b/client/reader/comments/form.jsx @@ -117,6 +117,7 @@ var PostCommentForm = React.createClass( { stats.recordAction( 'posted_comment' ); stats.recordGaEvent( 'Clicked Post Comment Button' ); + stats.recordTrack( 'calypso_reader_article_commented_on' ); this.resetCommentText(); diff --git a/client/reader/controller.js b/client/reader/controller.js index 0d8cc200acadb..8aa50bbd7cb9d 100644 --- a/client/reader/controller.js +++ b/client/reader/controller.js @@ -44,6 +44,7 @@ function trackScrollPage( path, title, category, readerView, pageNum ) { debug( 'scroll [%s], [%s], [%s], [%d]', path, title, category, pageNum ); analytics.ga.recordEvent( category, 'Loaded Next Page', 'page', pageNum ); + analytics.tracks.recordEvent( 'calypso_reader_infinite_scroll_performed' ); analytics.pageView.record( path, title ); analytics.mc.bumpStat( { newdash_pageviews: 'scroll', @@ -137,6 +138,7 @@ module.exports = { ensureStoreLoading( feedStore ); trackPageLoad( basePath, fullAnalyticsPageTitle, mcKey ); + analytics.tracks.recordEvent( 'calypso_reader_blog_preview' ); React.render( React.createElement( FeedStream, { @@ -169,6 +171,7 @@ module.exports = { ensureStoreLoading( feedStore ); trackPageLoad( basePath, fullAnalyticsPageTitle, mcKey ); + analytics.tracks.recordEvent( 'calypso_reader_blog_preview' ); React.render( React.createElement( SiteStream, { @@ -282,6 +285,7 @@ module.exports = { ensureStoreLoading( tagStore ); trackPageLoad( basePath, fullAnalyticsPageTitle, mcKey ); + analytics.tracks.recordEvent( 'calypso_reader_tag_loaded' ); React.render( React.createElement( TagStream, { @@ -313,6 +317,7 @@ module.exports = { ensureStoreLoading( listStore ); trackPageLoad( basePath, fullAnalyticsPageTitle, mcKey ); + analytics.tracks.recordEvent( 'calypso_reader_list_loaded' ); React.render( React.createElement( ListStream, { @@ -521,6 +526,7 @@ module.exports = { ensureStoreLoading( feedStore ); trackPageLoad( basePath, fullAnalyticsPageTitle, mcKey ); + analytics.tracks.recordEvent( 'calypso_reader_discover_viewed' ); React.render( React.createElement( SiteStream, { diff --git a/client/reader/full-post/index.jsx b/client/reader/full-post/index.jsx index c405b68fbac20..f89369bda3814 100644 --- a/client/reader/full-post/index.jsx +++ b/client/reader/full-post/index.jsx @@ -77,6 +77,7 @@ function readerPageView( blogId, blogUrl, postId, isPrivate ) { params.priv = 1; } analytics.mc.bumpStatWithPageView( params ); + analytics.tracks.recordEvent( 'calypso_reader_article_opened' ); } /** diff --git a/client/reader/like-button/index.jsx b/client/reader/like-button/index.jsx index 39fc595ead6dd..ea50aff19d340 100644 --- a/client/reader/like-button/index.jsx +++ b/client/reader/like-button/index.jsx @@ -8,6 +8,7 @@ var ReaderLikeButton = React.createClass( { recordLikeToggle: function( liked ) { stats.recordAction( liked ? 'liked_post' : 'unliked_post' ); stats.recordGaEvent( liked ? 'Clicked Like Post' : 'Clicked Unlike Post' ); + stats.recordTrack( liked ? 'calypso_reader_article_liked' : 'calypso_reader_article_unliked' ); }, render: function() { diff --git a/client/reader/sidebar/sidebar.jsx b/client/reader/sidebar/sidebar.jsx index 0c9c2f3ff43b5..f20ebe5c22c6d 100644 --- a/client/reader/sidebar/sidebar.jsx +++ b/client/reader/sidebar/sidebar.jsx @@ -118,12 +118,13 @@ module.exports = React.createClass( { event.preventDefault(); tag = React.findDOMNode( this.refs.addTagInput ).value; subscription = Tags.getSubscription( TagActions.slugify( tag ) ); - stats.recordAction( 'followed_topic' ); - stats.recordGaEvent( 'Clicked Follow Topic', tag ); if ( subscription ) { this.highlightNewTag( subscription ); } else { TagActions.follow( tag ); + stats.recordAction( 'followed_topic' ); + stats.recordGaEvent( 'Clicked Follow Topic', tag ); + stats.recordTrack( 'calypso_reader_reader_tag_followed' ) } }, @@ -296,14 +297,14 @@ module.exports = React.createClass( { } { - config.isEnabled( 'reader/recommendations' ) ? - (
  • + config.isEnabled( 'reader/recommendations' ) + ? (
  • { this.translate( 'Recommendations' ) } -
    • ) : - (
  • +
    • ) + : (
  • { this.translate( 'Recommended Blogs' ) } diff --git a/client/reader/stats.js b/client/reader/stats.js index 4c72022c268e6..e45ce4390077b 100644 --- a/client/reader/stats.js +++ b/client/reader/stats.js @@ -1,4 +1,4 @@ -import { mc, ga } from 'analytics'; +import { mc, ga, tracks } from 'analytics'; export function recordAction( action ) { mc.bumpStat( 'reader_actions', action ); @@ -53,8 +53,14 @@ function getLocation() { export function recordFollow() { mc.bumpStat( 'reader_follows', getLocation() ); + tracks.recordEvent( 'calypso_reader_site_followed' ); } export function recordUnfollow() { mc.bumpStat( 'reader_unfollows', getLocation() ); + tracks.recordEvent( 'calypso_reader_site_unfollowed' ); +} + +export function recordTrack( eventName, eventProperties ) { + tracks.recordEvent( eventName, eventProperties ); } diff --git a/client/reader/tag-stream/index.jsx b/client/reader/tag-stream/index.jsx index 69b6a6f6c423d..661970f915f18 100644 --- a/client/reader/tag-stream/index.jsx +++ b/client/reader/tag-stream/index.jsx @@ -6,7 +6,8 @@ var FollowingStream = require( 'reader/following-stream' ), ReaderTags = require( 'lib/reader-tags/tags' ), ReaderTagActions = require( 'lib/reader-tags/actions' ), TagSubscriptions = require( 'lib/reader-tags/subscriptions' ), - StreamHeader = require( 'reader/stream-header' ); + StreamHeader = require( 'reader/stream-header' ), + stats = require( 'reader/stats' ); var FeedStream = React.createClass( { @@ -64,6 +65,9 @@ var FeedStream = React.createClass( { toggleFollowing: function( isFollowing ) { var tag = ReaderTags.get( this.props.tag ); ReaderTagActions[ isFollowing ? 'follow' : 'unfollow' ]( tag ); + stats.recordAction( isFollowing ? 'followed_topic' : 'unfollowed_topic' ); + stats.recordGaEvent( isFollowing ? 'Clicked Follow Topic' : 'Clicked Unfollow Topic', tag ); + stats.recordTrack( isFollowing ? 'calypso_reader_reader_tag_followed' : 'calypso_reader_reader_tag_unfollowed' ); }, render: function() { From 2b6be3a51a64a2214adef85086ad0686a4226ad8 Mon Sep 17 00:00:00 2001 From: Ben Lowery Date: Thu, 3 Dec 2015 14:30:43 -0500 Subject: [PATCH 2/3] Reader: Send article opened more aggressively than page views --- client/reader/full-post/index.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/reader/full-post/index.jsx b/client/reader/full-post/index.jsx index f89369bda3814..af4bee647529b 100644 --- a/client/reader/full-post/index.jsx +++ b/client/reader/full-post/index.jsx @@ -77,7 +77,6 @@ function readerPageView( blogId, blogUrl, postId, isPrivate ) { params.priv = 1; } analytics.mc.bumpStatWithPageView( params ); - analytics.tracks.recordEvent( 'calypso_reader_article_opened' ); } /** @@ -380,6 +379,8 @@ FullPostContainer = React.createClass( { readerPageView( site.get( 'ID' ), site.get( 'URL' ), post.ID, site.get( 'is_private' ) ); this.hasSentPageView = true; } + + analytics.tracks.recordEvent( 'calypso_reader_article_opened' ); }, // Add change listeners to stores From 4f59d596bf5c7f7bfa7536abce70239a3d885232 Mon Sep 17 00:00:00 2001 From: Ben Lowery Date: Thu, 3 Dec 2015 14:37:48 -0500 Subject: [PATCH 3/3] Reader: Track list follows and unfollows --- client/reader/list-stream/index.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/client/reader/list-stream/index.jsx b/client/reader/list-stream/index.jsx index b1ca7fdc2419d..56eaae443d7e8 100644 --- a/client/reader/list-stream/index.jsx +++ b/client/reader/list-stream/index.jsx @@ -13,7 +13,8 @@ var FollowingStream = require( 'reader/following-stream' ), ReaderLists = require( 'lib/reader-lists/lists' ), ReaderListActions = require( 'lib/reader-lists/actions' ), ReaderListSubscriptions = require( 'lib/reader-lists/subscriptions' ), - StreamHeader = require( 'reader/stream-header' ); + StreamHeader = require( 'reader/stream-header' ), + stats = require( 'reader/stats' ); var FeedStream = React.createClass( { @@ -73,6 +74,9 @@ var FeedStream = React.createClass( { toggleFollowing: function( isFollowing ) { var list = ReaderLists.get( this.props.list.owner, this.props.list.slug ); ReaderListActions[ isFollowing ? 'follow' : 'unfollow' ]( list.owner, list.slug ); + stats.recordAction( isFollowing ? 'followed_list' : 'unfollowed_list' ); + stats.recordGaEvent( isFollowing ? 'Clicked Follow List' : 'Clicked Unfollow List', this.props.list.owner + ':' + this.props.list.slug ); + stats.recordTrack( isFollowing ? 'calypso_reader_reader_list_followed' : 'calypso_reader_reader_list_unfollowed' ); }, render: function() {