Track when story is scrolled to bottom

cygnusb2b · Aug 28, 2018 · d9ef164 · d9ef164
1 parent 6e3cc3a
commit d9ef164
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/src/components/StoryView/Body.jsx b/src/components/StoryView/Body.jsx
@@ -1,12 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Container } from 'reactstrap';
+import VisibilitySensor from 'react-visibility-sensor';
 import SocialShare from './SocialShare';
 import { GTAGTracker } from '../../lib/gtag';
 
 const createMarkup = html => ({ __html: html });
 
 class StoryViewBody extends React.Component {
+  constructor(props) {
+    super(props);
+    this.trackEndOfContent = this.trackEndOfContent.bind(this);
+  }
+
   /**
    *
    */
@@ -22,6 +28,11 @@ class StoryViewBody extends React.Component {
     });
   }
 
+  trackEndOfContent(isVisible) {
+    const { tracker } = this.props;
+    if (isVisible) tracker.trackEndOfContent();
+  }
+
   /**
    *
    */
@@ -104,6 +115,7 @@ class StoryViewBody extends React.Component {
           />
           {/* eslint-disable-next-line react/no-danger */}
           <div id={`body-${storyId}`} className="fr-view" dangerouslySetInnerHTML={createMarkup(body)} />
+          <VisibilitySensor onChange={this.trackEndOfContent} />
           <hr className="mt-4 mb-4" />
           <SocialShare
             title={title}

diff --git a/src/lib/gtag.js b/src/lib/gtag.js
@@ -28,6 +28,14 @@ export const trackOutboundLink = (url, props) => {
   });
 };
 
+export const trackEndOfContent = (props) => {
+  trackEvent('scroll_to_bottom', {
+    ...props,
+    event_category: 'engagement',
+    value: 1,
+  });
+};
+
 export class GTAGTracker {
   constructor(config = {}, enabled = true) {
     this.config = config;
@@ -53,4 +61,8 @@ export class GTAGTracker {
   outboundLink(url) {
     if (this.enabled) trackOutboundLink(url, this.config);
   }
+
+  trackEndOfContent() {
+    if (this.enabled) trackEndOfContent(this.config);
+  }
 }