GA4 Ecommerce + Minor UI Updates

package.json

@@ -107,7 +107,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@hms-dbmi-bgm/react-workflow-viz": "0.1.7",
-    "@hms-dbmi-bgm/shared-portal-components": "git+https:github.com/4dn-dcic/shared-portal-components#0.1.68",
+    "@hms-dbmi-bgm/shared-portal-components": "git+https:github.com/4dn-dcic/shared-portal-components#0.1.70",
     "auth0-lock": "^11.33.1",
     "d3": "^7.5.0",
     "date-fns": "^2.28.0",

src/encoded/static/components/browse/components/above-table-controls/SelectedFilesControls.js

@@ -19,7 +19,7 @@ import { uniqueFileCount, SelectedFilesController } from './../SelectedFilesCont
 // eslint-disable-next-line no-unused-vars
 const { Item } = typedefs;
 
-
+const SELECT_ALL_LIMIT = 8000;
 
 export class SelectAllFilesButton extends React.PureComponent {
 
@@ -64,7 +64,7 @@ export class SelectAllFilesButton extends React.PureComponent {
     isEnabled(){
         const { totalFilesCount } = this.props;
         if (!totalFilesCount) return true;
-        if (totalFilesCount > 8000) return false;
+        if (totalFilesCount > SELECT_ALL_LIMIT) return false;
         return true;
     }
 
@@ -140,12 +140,13 @@ export class SelectAllFilesButton extends React.PureComponent {
             "mr-05 icon icon-fw icon-" + (selecting ? 'circle-notch icon-spin fas' : (isAllSelected ? 'square far' : 'check-square far'))
         );
         const cls = "btn " + (isAllSelected ? "btn-outline-primary" : "btn-primary");
+        const tooltip = (!isAllSelected && !isEnabled) ? `"Select All" is disabled since the total file count exceeds the upper limit: ${SELECT_ALL_LIMIT}` : null;
 
         return (
             <div className="pull-left box selection-buttons">
                 <div className="btn-group">
                     <button type="button" id="select-all-files-button" disabled={selecting || (!isAllSelected && !isEnabled)}
-                        className={cls} onClick={this.handleSelectAll}>
+                        className={cls} onClick={this.handleSelectAll} data-tip={tooltip}>
                         <i className={iconClassName}/>
                         <span className="d-none d-md-inline text-400">{ isAllSelected ? 'Deselect' : 'Select' } </span>
                         <span className="text-600">All</span>

src/encoded/static/components/browse/components/above-table-controls/SelectedFilesDownloadButton.js

@@ -319,7 +319,7 @@ const SelectedFilesDownloadStartButton = React.memo(function SelectedFilesDownlo
         });
 
         /**
-         * We're going to consider download of metadata.tsv file to be akin to adding something to shopping cart.
+         * We're going to consider download of metadata.tsv file to be akin to one step before the purchasing.
          * Something they might download later...
          */
         function onClick(evt){
@@ -333,12 +333,13 @@ const SelectedFilesDownloadStartButton = React.memo(function SelectedFilesDownlo
                 };
                 const products = analytics.transformItemsToProducts(fileList, extData);
                 analytics.event(
-                    "purchase",
+                    "add_payment_info",
                     "SelectedFilesDownloadModal",
                     "Download metadata.tsv Button Pressed",
                     function() { console.info(`Will download metadata.tsv having ${productsLength} items in the cart.`); },
                     {
                         items: Array.isArray(products) ? products : null,
+                        payment_type: "Metadata.tsv Download",
                         list_name: extData.item_list_name,
                         value: filenameAccessions.size || 0,
                         filters: analytics.getStringifiedCurrentFilters((context && context.filters) || null)

src/encoded/static/components/static-pages/components/StatisticsPageViewBody.js

@@ -458,13 +458,13 @@ const aggregationsToChartData = {
             if (!resp || !resp['@graph']) return null;
             const { countBy : { file_downloads : countBy } } = props;
 
-            let useReport = 'file_downloads_by_experiment_type';
-            let groupingKey = "ga:dimension5"; // Experiment Type
+            let useReport = 'file_downloads_by_filetype';
+            let groupingKey = "ga:productVariant"; // File Type
             const countKey = 'ga:metric2'; // Download Count
 
-            if (countBy === 'filetype'){
-                useReport = 'file_downloads_by_filetype';
-                groupingKey = 'ga:productVariant'; // File Type
+            if (countBy === 'experiment_type'){
+                useReport = 'file_downloads_by_experiment_type';
+                groupingKey = 'ga:dimension5'; // Experiment Type
             } else if (countBy === 'geo_country'){
                 useReport = 'file_downloads_by_country';
                 groupingKey = 'ga:country';
@@ -573,7 +573,7 @@ export class UsageStatsViewController extends React.PureComponent {
 
         Object.keys(usageAggsToChartData).forEach(function(k){
             if (k === 'file_downloads'){
-                countBy[k] = 'experiment_type'; // For file_downloads, countBy is treated as 'groupBy'.
+                countBy[k] = 'filetype'; // For file_downloads, countBy is treated as 'groupBy'.
                 // Not high enough priority to spend much time improving this file, albeit much straightforward room for it exists.
             } else {
                 countBy[k] = 'views';

src/encoded/static/components/util/file.js

@@ -14,7 +14,8 @@ import { File } from './typedefs';
 /**
  * Generate analytics "add product to cart" event.
  * We don't create an actual "download file" event here
- * because this is done server-side.
+ * because this is done server-side. (instead we use add_payment_info that
+ * is the final step just before the purchase in GA4.)
  *
  * `context` and `fileItem` are likely to be same unless is
  * detailpane on another page showing file info.
@@ -26,12 +27,13 @@ export function downloadFileButtonClick(fileItem, context = null){
         const parameters = {
             items: Array.isArray(products) ? products : null,
             value: !isNaN(fileItem.file_size) ? fileItem.file_size : 0,
-            filters: getStringifiedCurrentFilters((context && context.filters) || null)
+            filters: getStringifiedCurrentFilters((context && context.filters) || null),
+            payment_type: 'File Download'
         };
-        // add_to_cart-begin_checkout-purchase conversions
+        // add_to_cart-begin_checkout-add_payment_info conversions
         event("add_to_cart", "FileDownloadButton", "Click", null, parameters, false);
         event("begin_checkout", "FileDownloadButton", "Select", null, parameters, false);
-        event("purchase", "FileDownloadButton", "Download", null, parameters, false);
+        event("add_payment_info", "FileDownloadButton", "Download", null, parameters, false);
     }, 0);
 }
 

src/encoded/types/file.py

@@ -1477,16 +1477,16 @@ def update_google_analytics(context, request, ga_config, filename, file_size_dow
     if ga_tid is None:
         raise Exception("No valid tracker id found in ga_config.json > hostnameTrackerIDMapping")
 
-    file_extension = file_extension = os.path.splitext(filename)[1][1:]
+    file_extension =  os.path.splitext(filename)[1][1:]
+    item_types = [ty for ty in reversed(context.jsonld_type()[:-1])]
 
     ga_payload = {
         "client_id": ga_cid,
         "timestamp_micros": str(int(datetime.datetime.now().timestamp() * 1000000)),
         "non_personalized_ads": False,
-        # "user_agent": request.user_agent,
         "events": [
             {
-                "name": "file_download",
+                "name": "purchase",
                 "params": {
                     "name": filename,
                     "source": "Serverside File Download",
@@ -1499,12 +1499,24 @@ def update_google_analytics(context, request, ga_config, filename, file_size_dow
                     "experiment_type": file_experiment_type or None,
                     "lab": lab.get("display_title"),
                     # Product Category from @type, e.g. "File/FileProcessed"
-                    "file_classification": "/".join([ty for ty in reversed(context.jsonld_type()[:-1])]),
-                    "file_type": file_type
+                    "file_classification": "/".join(item_types),
+                    "file_type": file_type,
+                    "items": [
+                        {
+                            "item_id": file_at_id,
+                            "item_name": filename,
+                            "item_category": item_types[0] if len(item_types) >= 1 else "Unknown",
+                            "item_category2": item_types[1] if len(item_types) >= 2 else "Unknown",
+                            "item_brand": lab.get("display_title"),
+                            "item_variant": file_type,
+                            "quantity": 1
+                        }
+                    ]
                 }
             }
         ]
     }
+    # import pdb;pdb.set_trace()
 
     if user_uuid:
         ga_payload['events'][0]['params']['user_uuid'] = user_uuid