Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

send tracks events when suggestions are displayed, clicked or dismissed: 

- Using temporary stand-in tracks API until PR is merged.
- Also fixed logic so table-view suggestion is not "displayed" if
  empty-state suggestions are shown.
This commit is contained in:
haszari 2019-02-20 15:33:57 +13:00
parent b3ca321669
commit f6299cc512
1 changed files with 74 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
assets/js/admin/marketplace-suggestions.js
View File

@ -5,6 +5,18 @@
return; return;
} }
// Stand-in wcSettings.recordEvent for until tracks PR is merged.
// https://github.com/woocommerce/woocommerce/pull/22746
window.wcSettings = window.wcSettings || {};
window.wcSettings.recordEvent = window.wcSettings.recordEvent || function() { };
// Tracks events sent in this file:
// - marketplace_suggestion_displayed
// - marketplace_suggestion_clicked
// - marketplace_suggestion_dismissed
// All are prefixed by {WC_Tracks::PREFIX}.
// All have one property for `suggestionSlug`, to identify the specific suggestion message.
function dismissSuggestion( suggestionSlug ) { function dismissSuggestion( suggestionSlug ) {
// hide the suggestion in the UI // hide the suggestion in the UI
var selector = '[data-suggestion-slug=' + suggestionSlug + ']'; var selector = '[data-suggestion-slug=' + suggestionSlug + ']';
@ -19,6 +31,10 @@
'slug': suggestionSlug, 'slug': suggestionSlug,
} }
); );
window.wcSettings.recordEvent( 'marketplace_suggestion_dismissed', {
suggestionSlug: suggestionSlug
} );
} }
function renderDismissButton( suggestionSlug ) { function renderDismissButton( suggestionSlug ) {
@ -34,13 +50,19 @@
return dismissButton; return dismissButton;
} }
function renderLinkout( url, text, isButton ) { function renderLinkout( slug, url, text, isButton ) {
var linkoutButton = document.createElement( 'a' ); var linkoutButton = document.createElement( 'a' );
linkoutButton.setAttribute( 'href', url ); linkoutButton.setAttribute( 'href', url );
linkoutButton.setAttribute( 'target', 'blank' ); linkoutButton.setAttribute( 'target', 'blank' );
linkoutButton.textContent = text; linkoutButton.textContent = text;
linkoutButton.onclick = function( event ) {
window.wcSettings.recordEvent( 'marketplace_suggestion_clicked', {
suggestionSlug: slug
} );
}
if (isButton) { if (isButton) {
linkoutButton.classList.add( 'button' ); linkoutButton.classList.add( 'button' );
} }
@ -91,7 +113,7 @@
right.classList.add( 'marketplace-suggestion-container-cta' ); right.classList.add( 'marketplace-suggestion-container-cta' );
if ( url && linkText ) { if ( url && linkText ) {
var linkoutElement = renderLinkout( url, linkText, linkIsButton ); var linkoutElement = renderLinkout( slug, url, linkText, linkIsButton );
right.appendChild( linkoutElement ); right.appendChild( linkoutElement );
} }
@ -243,53 +265,63 @@
$( this ).append( content ); $( this ).append( content );
$( this ).addClass( 'showing-suggestion' ); $( this ).addClass( 'showing-suggestion' );
visibleSuggestions.push( promos[i].context ); visibleSuggestions.push( promos[i].context );
window.wcSettings.recordEvent( 'marketplace_suggestion_displayed', {
suggestionSlug: promos[ i ].slug
} );
} }
} ); } );
// render inline promos in products list // render inline promos in products list
$( '.wp-admin.admin-bar.edit-php.post-type-product table.wp-list-table.posts tbody').first().each( function() { if ( 0 === visibleSuggestions.length ) {
var context = 'products-list-inline'; $( '.wp-admin.admin-bar.edit-php.post-type-product table.wp-list-table.posts tbody').first().each( function() {
var context = 'products-list-inline';
// find promotions that target this context // find promotions that target this context
var promos = getRelevantPromotions( marketplaceSuggestionsApiData, context ); var promos = getRelevantPromotions( marketplaceSuggestionsApiData, context );
if ( ! promos || ! promos.length ) { if ( ! promos || ! promos.length ) {
return; return;
}
// dismiss is allowed by default
var allowDismiss = true;
if ( promos[ 0 ]['allow-dismiss'] === false ) {
allowDismiss = false;
}
// render first promo
var content = renderTableBanner(
promos[ 0 ].slug,
promos[ 0 ].icon,
promos[ 0 ].title,
promos[ 0 ].copy,
promos[ 0 ].url,
promos[ 0 ]['button-text'],
allowDismiss
);
if ( content ) {
// where should we put it in the list?
var rows = $( this ).children();
var minRow = 3;
if ( rows.length <= minRow ) {
// if small number of rows, append at end
$( this ).append( content );
}
else {
// for more rows, append
$( rows[ minRow - 1 ] ).after( content );
} }
visibleSuggestions.push( context ); // dismiss is allowed by default
} var allowDismiss = true;
} ); if ( promos[ 0 ]['allow-dismiss'] === false ) {
allowDismiss = false;
}
// render first promo
var content = renderTableBanner(
promos[ 0 ].slug,
promos[ 0 ].icon,
promos[ 0 ].title,
promos[ 0 ].copy,
promos[ 0 ].url,
promos[ 0 ]['button-text'],
allowDismiss
);
if ( content ) {
// where should we put it in the list?
var rows = $( this ).children();
var minRow = 3;
if ( rows.length <= minRow ) {
// if small number of rows, append at end
$( this ).append( content );
}
else {
// for more rows, append
$( rows[ minRow - 1 ] ).after( content );
}
visibleSuggestions.push( context );
window.wcSettings.recordEvent( 'marketplace_suggestion_displayed', {
suggestionSlug: promos[ 0 ].slug
} );
}
} );
}
hidePageElementsForEmptyState( visibleSuggestions ); hidePageElementsForEmptyState( visibleSuggestions );
} }