Skip to content

Commit

Permalink
Merge branch 'master' into school-model-tweak
Browse files Browse the repository at this point in the history
  • Loading branch information
higs4281 committed Jan 19, 2017
2 parents aebf5c5 + b0fedd3 commit 4f21ee9
Show file tree
Hide file tree
Showing 6 changed files with 170 additions and 9 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ We follow the [Semantic Versioning 2.0.0](http://semver.org/) format.

## 2.3.0
- Update school model to remove settlement_school options
- Fix CSS issue on feedback page
- Prep for onboarding school system
- Adding Google Analytics module and event triggers.

## 2.2.9
- Update `load_programs` to load from specific s3 bucket location
Expand Down
24 changes: 15 additions & 9 deletions paying_for_college/templates/worksheet.html
Original file line number Diff line number Diff line change
Expand Up @@ -177,13 +177,15 @@ <h2 class="verify_prompt">
<div class="verify_controls">
<a href="#info-right"
class="btn btn__full-small"
title="Yes, this information is correct">
title="Yes, this information is correct"
data-gtm_ignore="true">
Yes, this is correct
</a>
<a href="#info-wrong"
class="btn btn__full-small btn__link
verify_wrong-info-btn"
title="No, this is not my information">
title="No, this is not my information"
data-gtm_ignore="true">
No, this is not my information
</a>
</div>
Expand Down Expand Up @@ -912,10 +914,10 @@ <h3 class="offer-part_heading">
</label>
<p class="aid-form_definition">
Money you borrow from the federal
government this year and have to
pay back over time. Interest rates
and loan fees on future federal
loans may increase or decrease
government this year and have to
pay back over time. Interest rates
and loan fees on future federal
loans may increase or decrease
year to year.
</p>
</div>
Expand Down Expand Up @@ -2968,7 +2970,8 @@ <h2 class="step_heading step_nonsettlement">
<button class="btn btn__grouped-last"
id="question_answer-not-sure"
name="question_answer-not-sure"
type="button">
type="button"
data-gtm_ignore="true">
Not sure
</button>
</div>
Expand Down Expand Up @@ -3255,7 +3258,8 @@ <h2 class="step_heading">
</p>
<div class="next-steps_controls">
<button class="btn btn__full-small"
type="button">
type="button"
data-gtm_ignore="true">
<span class="btn_icon__left cf-icon
cf-icon-print"></span>
Print
Expand All @@ -3282,7 +3286,9 @@ <h2 class="step_heading">
<a class="btn btn__full-small"
title="Give feedback on this tool"
href="/{{url_root}}/understanding-your-financial-aid-offer/feedback"
target="_blank">
target="_blank"
data-qa='feedback-btn'
data-gtm_ignore="true">
Tell us how
</a>
</div>
Expand Down
89 changes: 89 additions & 0 deletions src/disclosures/js/utils/Analytics.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
'use strict';

var Analytics = {

tagManagerIsLoaded: false,

EVENT_CATEGORY: 'PFC Dynamic Disclosure Tool Interaction',

/**
* Get data layer object.
* @param {string} action Name of event.
* @param {string} label DOM element label.
* @param {string} category Type of event.
* @param {Function} callback Function to call on GTM submission.
* @param {number} timeout Callback invocation fallback time.
* @returns {object} Data layer object.
*/
getDataLayerOptions: function( action, label, category, callback, timeout ) {
return {
event: category || Analytics.EVENT_CATEGORY,
action: action,
label: label || '',
eventCallback: callback,
eventTimeout: timeout || 500
};
},

/**
* Initialize the Analytics module.
*/
init: function() {
// detect if Google tag manager is loaded
if ( window.hasOwnProperty( 'google_tag_manager' ) ) {
Analytics.tagManagerIsLoaded = true;
} else {
var _tagManager;
Object.defineProperty( window, 'google_tag_manager', {
enumerable: true,
configurable: true,
get: function() {
return _tagManager;
},
set: function( value ) {
_tagManager = value;
Analytics.tagManagerIsLoaded = true;
}
} );
}
},

/**
* @name sendEvent
* @kind function
*
* @description
* Pushes an event to the GTM dataLayer.
* @param {object} dataLayerOptions Type of event.
*/
sendEvent: function( dataLayerOptions ) {
var callback = dataLayerOptions.eventCallback;
if ( Analytics.tagManagerIsLoaded ) {
window.dataLayer.push( dataLayerOptions );
} else if ( callback && typeof callback === 'function' ) {
callback(); // eslint-disable-line callback-return, inline-comments, max-len
}
},

/**
* @name sendEvents
* @kind function
*
* @description
* Pushes multiple events to the GTM dataLayer.
*
* @param {array} eventsArray Array of event objects.
*/
sendEvents: function( eventsArray ) {
if ( Array.isArray( eventsArray ) ) {
for ( var i = 0, len = eventsArray.length; i < len; i++ ) {
Analytics.sendEvent( eventsArray[i] );
}
}
}

};

Analytics.init();

module.exports = Analytics;
4 changes: 4 additions & 0 deletions src/disclosures/js/utils/print-page.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
'use strict';

var Analytics = require( './Analytics' );
var getDataLayerOptions = Analytics.getDataLayerOptions;
require( '../libs/google-cloud-print' );

var ua = navigator.userAgent.toLowerCase(),
isAndroid = ua.indexOf( 'android' ) > -1;

Expand All @@ -23,5 +26,6 @@ $( document ).ready( function() {
} else {
window.print();
}
Analytics.sendEvent( getDataLayerOptions( 'Step Completed', 'Print' ) );
} );
} );
29 changes: 29 additions & 0 deletions src/disclosures/js/views/expenses-view.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
'use strict';

var Analytics = require( '../utils/Analytics' );
var getDataLayerOptions = Analytics.getDataLayerOptions;
var getExpenses = require( '../dispatchers/get-expenses-values' );
var publish = require( '../dispatchers/publish-update' );
var formatUSD = require( 'format-usd' );
Expand All @@ -11,8 +13,10 @@ var expensesView = {
currentInput: '',

init: function() {
this.expenseInputChangeListener();
this.keyupListener();
this.regionSelectListener();
this.feedbackBtnListener();
},

/**
Expand Down Expand Up @@ -54,6 +58,8 @@ var expensesView = {
}
if ( values.monthlyLeftover > 0 ) {
expensesHigherThanSalary.hide();
Analytics.sendEvent( getDataLayerOptions( 'Total left at the end of the month',
'Zero left to pay' ) );
} else { expensesHigherThanSalary.show(); }
} );
},
Expand Down Expand Up @@ -113,6 +119,18 @@ var expensesView = {
} );
},

/**
* Listener function for change events on expenses INPUT fields
*/
expenseInputChangeListener: function() {
$( '[data-expenses]' ).one( 'change', function() {
var expenses = $( this ).data( 'expenses' );
if ( expenses ) {
Analytics.sendEvent( getDataLayerOptions( 'Value Edited', expenses ) );
}
} );
},

/**
* Listener for the BLS region SELECT
*/
Expand All @@ -121,6 +139,17 @@ var expensesView = {
var region = $( this ).val();
publish.updateRegion( region );
expensesView.updateView( getExpenses.values() );
Analytics.sendEvent( getDataLayerOptions( 'Region Changed', region ) );
} );
},

/**
* Listener for the Feedback BUTTON
*/
feedbackBtnListener: function() {
$( '[data-qa=feedback-btn]' ).click( function() {
Analytics.sendEvent( getDataLayerOptions(
'Was this page helpful?', 'Tell us how' ) );
} );
}

Expand Down
31 changes: 31 additions & 0 deletions src/disclosures/js/views/financial-view.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use strict';

var Analytics = require( '../utils/Analytics' );
var getFinancial = require( '../dispatchers/get-financial-values' );
var getExpenses = require( '../dispatchers/get-expenses-values' );
var publish = require( '../dispatchers/publish-update' );
Expand All @@ -13,6 +14,8 @@ var postVerification = require( '../dispatchers/post-verify' );

require( '../libs/sticky-kit' );

var getDataLayerOptions = Analytics.getDataLayerOptions;

var financialView = {
$elements: $( '[data-financial]' ),
$reviewAndEvaluate: $( '[data-section="review"], [data-section="evaluate"]' ),
Expand Down Expand Up @@ -45,6 +48,7 @@ var financialView = {
keyupDelay: null,
currentInput: null,


/**
* Initiates the object
*/
Expand All @@ -57,6 +61,7 @@ var financialView = {
this.resetPrivateLoanView();
this.continueStep2Listener();
this.termToggleListener();
this.financialInputChangeListener();
},

/**
Expand Down Expand Up @@ -412,6 +417,7 @@ var financialView = {
$container.find( '[data-private-loan]:last .aid-form_input' ).val( '0' );
publish.addPrivateLoan();
financialView.updateView( getFinancial.values() );
Analytics.sendEvent( getDataLayerOptions( 'Private Loan Changed', 'Added' ) );
} );
},

Expand All @@ -427,6 +433,7 @@ var financialView = {
financialView.enumeratePrivateLoanIDs();
publish.dropPrivateLoan( index );
financialView.updateView( getFinancial.values() );
Analytics.sendEvent( getDataLayerOptions( 'Private Loan Changed', 'Removed' ) );
} );
},

Expand Down Expand Up @@ -490,6 +497,7 @@ var financialView = {
*/
inputChangeListener: function() {
this.$reviewAndEvaluate.on( 'keyup focusout', '[data-financial]', function() {

clearTimeout( financialView.keyupDelay );
financialView.currentInput = $( this ).attr( 'id' );
if ( $( this ).is( ':focus' ) ) {
Expand Down Expand Up @@ -534,8 +542,10 @@ var financialView = {
* Listener function for offer verification buttons
*/
verificationListener: function() {
var $programLengthElement = this.$programLength;
this.$verifyControls.on( 'click', '.btn', function( evt ) {
var values = getFinancial.values();
var hrefText = $( this ).text();
// Graph points need to be visible before updating their positions
// to get all the right CSS values, so we'll wait 100 ms
if ( $( this ).attr( 'href' ) === '#info-right' ) {
Expand All @@ -549,6 +559,10 @@ var financialView = {
financialView.$aboutThisTool.focus();
financialView.stickySummariesListener();
} );

Analytics.sendEvent( getDataLayerOptions( 'Years to Complete Program',
$programLengthElement.val() ) );
Analytics.sendEvent( getDataLayerOptions( 'Step Completed', hrefText ) );
} else {
evt.preventDefault();
financialView.$infoIncorrect.show();
Expand All @@ -559,6 +573,7 @@ var financialView = {
window.location.hash = '#info-wrong';
financialView.$programLength.focus();
} );
Analytics.sendEvent( getDataLayerOptions( 'Step Completed', hrefText ) );
}
financialView.$verifyControls.hide();
} );
Expand Down Expand Up @@ -779,6 +794,8 @@ var financialView = {
}, 900, 'swing', function() {
// Noop function.
} );
Analytics.sendEvent( getDataLayerOptions( 'Step Completed',
'Continue to Step 2' ) );
} );
},

Expand Down Expand Up @@ -810,6 +827,8 @@ var financialView = {
$toggles.filter( '[value="' + term + '"]' ).prop( 'checked', true );
financialView.updateView( getFinancial.values() );
expensesView.updateView( getExpenses.values() );
Analytics.sendEvent( getDataLayerOptions( 'See how loan length affects your payments',
term + ' years' ) );
} );
},

Expand All @@ -822,6 +841,18 @@ var financialView = {
if ( $( '[data-missing-data-error]:visible' ).length === 0 ) {
$( '[data-missing-data-error="' + dataType + '"]').show();
}
},

/**
* Listener function for change events on financial INPUT fields
*/
financialInputChangeListener: function() {
$( '[data-financial]' ).one( 'change', function() {
var dataFinancial = $( this ).data( 'financial' );
if ( dataFinancial ) {
Analytics.sendEvent( getDataLayerOptions( 'Value Edited', dataFinancial ) );
}
} );
}
};

Expand Down

0 comments on commit 4f21ee9

Please sign in to comment.