Source: src/js/models/analytics/GoogleAnalytics.js

  1. define(["models/analytics/Analytics"], function (Analytics) {
  2.   /**
  3.    * @class GoogleAnalytics
  4.    * @classdesc A model that connects with an analytics service to record user
  5.    * interactions with the app
  6.    * @classcategory Models/Analytics
  7.    * @extends Backbone.Model
  8.    * @constructs
  9.    * @extends Analytics
  10.    * @since 2.25.0
  11.    */
  12.   var GoogleAnalytics = Analytics.extend(
  13.     /** @lends GoogleAnalytics.prototype */
  14.     {
  15.       /**
  16.        * The name of this Model
  17.        * @name GoogleAnalytics#type
  18.        * @type {string}
  19.        * @readonly
  20.        */
  21.       type: "GoogleAnalytics",
  23.       /**
  24.        * @inheritdoc
  25.        */
  26.       setupAnalytics: function () {
  27.         try {
  28.           // If analytics is already set up, do nothing
  29.           if (this.ready()) return;
  31.           const tagId = this.getKey();
  33.           // If there is no tag ID, do nothing
  34.           if (!tagId) return;
  36.           // Create a script element and set its src to the GA4 library
  37.           const script = document.createElement("script");
  38.           script.async = true;
  39.           script.src = "https://www.googletagmanager.com/gtag/js?id=" + tagId;
  41.           // Append the script element to the head of document
  42.           document.head.appendChild(script);
  44.           // Create global gtag() function
  45.           window.dataLayer = window.dataLayer || [];
  46.           window.gtag = function () {
  47.             dataLayer.push(arguments);
  48.           };
  50.           // Initialize GA4 with tag ID
  51.           window.gtag("js", new Date());
  52.           window.gtag("config", tagId);
  53.         } catch (e) {
  54.           console.error("Error setting up Google Analytics", e);
  55.         }
  56.       },
  58.       /**
  59.        * @inheritdoc
  60.        */
  61.       getKey: function () {
  62.         return MetacatUI.appModel.get("googleAnalyticsKey");
  63.       },
  65.       /**
  66.        * @inheritdoc
  67.        */
  68.       track: window.gtag,
  70.       /**
  71.        * @inheritdoc
  72.        */
  73.       ready: function () {
  74.         return this.getKey() && typeof this.track === "function";
  75.       },
  77.       /**
  78.        * @inheritdoc
  79.        */
  80.       trackException: function (message, id, fatal) {
  81.         if (!this.ready()) return;
  82.         this.track("event", "exception", {
  83.           description: this.createExceptionDescription(message, id),
  84.           fatal: fatal,
  85.         });
  86.       },
  88.       /**
  89.        * @inheritdoc
  90.        */
  91.       trackEvent: function (category, action, label, value) {
  92.         if (!this.ready()) return;
  93.         // prepare the event parameters
  94.         var params = {
  95.           event_category: category,
  96.           event_label: label,
  97.           value: value,
  98.         };
  99.         // send the event
  100.         this.track("event", action, params);
  101.       },
  103.       /**
  104.        * @inheritdoc
  105.        */
  106.       trackPageView: function (path, title) {
  107.         if (!this.ready()) return;
  108.         if (!path) path = (window.location.pathname || "/").replace("#", "");
  109.         if (!title) title = document.title;
  110.         this.track("config", this.getKey(), {
  111.           page_path: path,
  112.           page_title: title,
  113.         });
  114.       },
  115.     },
  116.   );
  118.   return GoogleAnalytics;
  119. });