How to add a device mode SDK to the RudderStack JavaScript SDK

class SampleIntegration {
  constructor(apiKey) {
    this.apiKey = apiKey // destination api key
    this.name = "SampleDestination"
  }

  // Provides an iife for downloading and initializing the destination library/javascript
  // Once initialized, the destination object will be available for making a call and pushing event data
  init() {}

  // rudderElement.message contains event data
  // Add custom implementation here
  identify(rudderElement) {
    // sd('set', 'userId', rudderElement.message.anonymous_id);
  }

  // rudderElement.message contains event data
  // Add custom implementation here
  track(rudderElement) {
    // sd('send', 'event', rudderElement.message.event);
  }

  // rudderElement.message contains event data
  // Add custom implementation here
  page(rudderElement) {
    // sd('set', 'page', rudderElement.properties.path);
    // sd ('send', 'pageview');
  }

  // Depend on the destination, where it enlists how to ensure if
  // the destination is ready
  isLoaded() {
    return !!window.sdplugins
  }
}

export { SampleIntegration }

// browser.js

import logger from "../../utils/logUtil"
class GA {
  constructor(trackingID) {
    this.trackingID = trackingID //UA-1010101-1
    this.name = "GA"
  }

  init() {
    // iife that initailizes the destination

    ;(function (i, s, o, g, r, a, m) {
      i["GoogleAnalyticsObject"] = r
      ;(i[r] =
        i[r] ||
        function () {
          ;(i[r].q = i[r].q || []).push(arguments)
        }),
        (i[r].l = 1 * new Date())
      ;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
      a.async = 1
      a.src = g
      m.parentNode.insertBefore(a, m)
    })(
      window,
      document,
      "script",
      "https://www.google-analytics.com/analytics.js",
      "ga"
    )

    //window.ga_debug = {trace: true};

    ga("create", this.trackingID, "auto")
    ga("send", "pageview")

    logger.debug("===in init GA===")
  }

  identify(rudderElement) {
    ga("set", "userId", rudderElement.message.anonymous_id)
    logger.debug("in GoogleAnalyticsManager identify")
  }

  track(rudderElement) {
    var eventCategory = rudderElement.message.event
    var eventAction = rudderElement.message.event
    var eventLabel = rudderElement.message.event
    var eventValue = ""
    if (rudderElement.message.properties) {
      eventValue = rudderElement.message.properties.value
        ? rudderElement.message.properties.value
        : rudderElement.message.properties.revenue
    }

    var payLoad = {
      hitType: "event",
      eventCategory: eventCategory,
      eventAction: eventAction,
      eventLabel: eventLabel,
      eventValue: eventValue,
    }
    ga("send", "event", payLoad)
    logger.debug("in GoogleAnalyticsManager track")
  }

  page(rudderElement) {
    logger.debug("in GoogleAnalyticsManager page")
    var path =
      rudderElement.properties && rudderElement.properties.path
        ? rudderElement.properties.path
        : undefined
    if (path) {
      ga("set", "page", path)
    }
    ga("send", "pageview")
  }

  isLoaded() {
    logger.debug("in GA isLoaded")
    return !!window.gaplugins
  }
}

export { GA }

// index.js

// Ignore the node counter-part, we already have a seperate Node.js SDK
// that sends events directly to the data-plane (server-mode)

import { GANode } from "./node"
import { GA } from "./browser"

export default process.browser ? GA : GANode

// root integrations/index.js

import * as HubSpot from "./HubSpot"
import * as GA from "./GA"
import * as Hotjar from "./Hotjar"
import * as GoogleAds from "./GoogleAds"

// Note the key name is same as we have configured in our config-plane

let integrations = {
  HS: HubSpot.default,
  GA: GA.default,
  HOTJAR: Hotjar.default,
  GOOGLEADS: GoogleAds.default,
}

export { integrations }