castled-js-sdk 0.0.1 → 0.0.3

package/src/integrations/GoogleAds/browser.js

@@ -0,0 +1,212 @@
+/* eslint-disable class-methods-use-this */
+import logger from '../../utils/logUtil';
+import {
+  getHashFromArrayWithDuplicate,
+  removeUndefinedAndNullValues,
+  getEventMappingFromConfig,
+} from '../../utils/commonUtils';
+import {
+  shouldSendConversionEvent,
+  shouldSendDynamicRemarketingEvent,
+  getConversionData,
+} from './utils';
+import { NAME } from './constants';
+import { loadNativeSdk } from './nativeSdkLoader';
+
+class GoogleAds {
+  constructor(config, analytics, destinationInfo) {
+    if (analytics.logLevel) {
+      logger.setLogLevel(analytics.logLevel);
+    }
+    this.analytics = analytics;
+    this.conversionId = config.conversionID;
+    this.pageLoadConversions = config.pageLoadConversions;
+    this.clickEventConversions = config.clickEventConversions;
+    this.defaultPageConversion = config.defaultPageConversion;
+    this.sendPageView = config.sendPageView || true;
+    this.conversionLinker = config.conversionLinker || true;
+    this.disableAdPersonalization = config.disableAdPersonalization || false;
+    this.trackConversions = config.trackConversions;
+    this.trackDynamicRemarketing = config.trackDynamicRemarketing;
+    this.enableConversionEventsFiltering = config.enableConversionEventsFiltering || false;
+    this.enableDynamicRemarketingEventsFiltering =
+      config.enableDynamicRemarketingEventsFiltering || false;
+    this.eventsToTrackConversions = config.eventsToTrackConversions || [];
+    this.eventsToTrackDynamicRemarketing = config.eventsToTrackDynamicRemarketing || [];
+    this.eventMappingFromConfig = config.eventMappingFromConfig;
+    this.enableConversionLabel = config.enableConversionLabel || false;
+    // Depreciating: Added to make changes backward compatible
+    this.dynamicRemarketing = config.dynamicRemarketing;
+    this.allowEnhancedConversions = config.allowEnhancedConversions || false;
+    this.name = NAME;
+    ({
+      shouldApplyDeviceModeTransformation: this.shouldApplyDeviceModeTransformation,
+      propagateEventsUntransformedOnError: this.propagateEventsUntransformedOnError,
+      destinationId: this.destinationId,
+    } = destinationInfo ?? {});
+  }
+
+  init() {
+    const sourceUrl = `https://www.googletagmanager.com/gtag/js?id=${this.conversionId}`;
+    loadNativeSdk(sourceUrl);
+
+    // Additional Settings
+
+    const config = {
+      send_page_view: this.sendPageView,
+      conversion_linker: this.conversionLinker,
+    };
+
+    // ref:- https://support.google.com/google-ads/answer/12785474?hl=en-GB#Config&zippy=%2Cconfigure-your-conversion-page-google-tag
+    if (this.allowEnhancedConversions) {
+      config.allow_enhanced_conversions = this.allowEnhancedConversions;
+    }
+
+    if (this.disableAdPersonalization) {
+      window.gtag('set', 'allow_ad_personalization_signals', false);
+    }
+
+    window.gtag('config', this.conversionId, config);
+
+    logger.debug('===in init Google Ads===');
+  }
+
+  isLoaded() {
+    return window.dataLayer.push !== Array.prototype.push;
+  }
+
+  isReady() {
+    return this.isLoaded();
+  }
+
+  identify() {
+    logger.debug('[GoogleAds] identify:: method not supported');
+  }
+
+  // https://developers.google.com/gtagjs/reference/event
+  track(htElement) {
+    logger.debug('in GoogleAdsAnalyticsManager track');
+
+    const { event } = htElement.message;
+    const conversionData = getConversionData(
+      this.clickEventConversions,
+      event,
+      this.defaultPageConversion,
+    );
+    if (
+      conversionData.conversionLabel &&
+      shouldSendConversionEvent(
+        event,
+        this.trackConversions,
+        this.enableConversionEventsFiltering,
+        this.eventsToTrackConversions,
+        this.dynamicRemarketing,
+      )
+    ) {
+      const { conversionLabel } = conversionData;
+      const { eventName } = conversionData;
+      const sendToValue = `${this.conversionId}/${conversionLabel}`;
+
+      let properties = {
+        value: htElement.message?.properties?.revenue,
+        currency: htElement.message?.properties?.currency,
+        transaction_id: htElement.message?.properties?.order_id,
+        send_to: sendToValue,
+      };
+      properties = removeUndefinedAndNullValues(properties);
+
+      const eventLabel = this.enableConversionLabel ? 'conversion' : eventName;
+      window.gtag('event', eventLabel, properties);
+    }
+
+    if (!event) {
+      logger.error('Event name not present');
+      return;
+    }
+
+    if (
+      shouldSendDynamicRemarketingEvent(
+        event,
+        this.trackDynamicRemarketing,
+        this.enableDynamicRemarketingEventsFiltering,
+        this.eventsToTrackDynamicRemarketing,
+        this.dynamicRemarketing,
+      )
+    ) {
+      // modify the event name to mapped event name from the config
+      const eventsHashmap = getHashFromArrayWithDuplicate(
+        this.eventMappingFromConfig,
+        'from',
+        'to',
+        false,
+      );
+
+      const { properties } = htElement.message;
+      const payload = properties || {};
+      const sendToValue = this.conversionId;
+
+      payload.send_to = sendToValue;
+      const events = getEventMappingFromConfig(event, eventsHashmap);
+      if (events) {
+        events.forEach((ev) => {
+          window.gtag('event', ev, payload);
+        });
+      } else {
+        window.gtag('event', event, payload);
+      }
+    }
+  }
+
+  page(htElement) {
+    logger.debug('in GoogleAdsAnalyticsManager page');
+
+    const { name } = htElement.message;
+    const conversionData = getConversionData(
+      this.clickEventConversions,
+      name,
+      this.defaultPageConversion,
+    );
+    if (
+      conversionData.conversionLabel &&
+      shouldSendConversionEvent(
+        name,
+        this.trackConversions,
+        this.enableConversionEventsFiltering,
+        this.eventsToTrackConversions,
+        this.dynamicRemarketing,
+      )
+    ) {
+      const { conversionLabel } = conversionData;
+      const { eventName } = conversionData;
+
+      const eventLabel = this.enableConversionLabel ? 'conversion' : eventName;
+      window.gtag('event', eventLabel, {
+        send_to: `${this.conversionId}/${conversionLabel}`,
+      });
+    }
+
+    if (!name) {
+      logger.error('Event name not present');
+      return;
+    }
+
+    if (
+      shouldSendDynamicRemarketingEvent(
+        name,
+        this.trackDynamicRemarketing,
+        this.enableDynamicRemarketingEventsFiltering,
+        this.eventsToTrackDynamicRemarketing,
+        this.dynamicRemarketing,
+      )
+    ) {
+      const event = name;
+      const { properties } = htElement.message;
+      const sendToValue = this.conversionId;
+      const payload = properties || {};
+      payload.send_to = sendToValue;
+      window.gtag('event', event, payload);
+    }
+  }
+}
+
+export default GoogleAds;

package/src/integrations/GoogleAds/constants.js

@@ -0,0 +1,11 @@
+const NAME = 'GOOGLEADS';
+const CNameMapping = {
+  [NAME]: NAME,
+  'Google Ads': NAME,
+  GoogleAds: NAME,
+  'GOOGLE ADS': NAME,
+  'google ads': NAME,
+  googleads: NAME,
+};
+
+export { NAME, CNameMapping };

package/src/integrations/GoogleAds/index.js

@@ -0,0 +1 @@
+export { default as GoogleAds } from './browser';

package/src/integrations/GoogleAds/nativeSdkLoader.js

@@ -0,0 +1,26 @@
+import { LOAD_ORIGIN } from '../../utils/ScriptLoader';
+import logger from '../../utils/logUtil';
+
+function loadNativeSdk(sourceUrl) {
+  (function (id, src, document) {
+    logger.debug(`in script loader=== ${id}`);
+    const js = document.createElement('script');
+    js.src = src;
+    js.async = 1;
+    js.setAttribute('data-loader', LOAD_ORIGIN);
+    js.type = 'text/javascript';
+    js.id = id;
+    const e = document.getElementsByTagName('head')[0];
+    logger.debug('==script==', e);
+    e.appendChild(js);
+  })('googleAds-integration', sourceUrl, document);
+
+  window.dataLayer = window.dataLayer || [];
+  window.gtag = function () {
+    // eslint-disable-next-line prefer-rest-params
+    window.dataLayer.push(arguments);
+  };
+  window.gtag('js', new Date());
+}
+
+export { loadNativeSdk };

package/src/integrations/GoogleAds/utils.js

@@ -0,0 +1,117 @@
+import { isDefinedAndNotNull } from '../../utils/utils';
+
+/**
+ * if trackEvents are not enabled then do not send events (return false)
+ * if trackEvents are enabled but event filtering is not enabled then send all events
+ * if trackEvents are enabled and event filtering is also enabled then check if event is configured to event list or not
+ * if non of above is true then do not send event at all (return false)
+ * @param {*} eventName
+ * @param {*} trackEvents
+ * @param {*} enableFiltering
+ * @param {*} events
+ * @returns
+ */
+function shouldSendEvent(eventName, trackEvents, enableFiltering, events) {
+  if (!trackEvents) {
+    return false;
+  }
+
+  if (trackEvents && !enableFiltering) {
+    return true;
+  }
+
+  if (trackEvents && enableFiltering) {
+    const eventNames = [];
+    events.forEach((event) => {
+      if (event.eventName !== '') {
+        eventNames.push(event.eventName);
+      }
+    });
+    return eventNames.includes(eventName.trim());
+  }
+
+  return false;
+}
+
+/**
+ * Returns weather to send conversion event or not
+ * @param {*} eventName - event name
+ * @param {*} trackConversions - decides weather to send conversion event or not
+ * @param {*} enableConversionEventsFiltering - decides weather to apply filtering on event or not
+ * @param {*} eventsToTrackConversions - allowed list of events to send google ads
+ * @param {*} dynamicRemarketing - Depreciating : old config flag to check weather to send event as conversion or dynamic remarketing
+ * @returns
+ */
+function shouldSendConversionEvent(
+  eventName,
+  trackConversions,
+  enableConversionEventsFiltering,
+  eventsToTrackConversions,
+  dynamicRemarketing,
+) {
+  if (isDefinedAndNotNull(trackConversions)) {
+    return shouldSendEvent(
+      eventName,
+      trackConversions,
+      enableConversionEventsFiltering,
+      eventsToTrackConversions,
+    );
+  }
+  return !dynamicRemarketing;
+}
+
+/**
+ * Returns weather to send dynamic remarketing event or not
+ * @param {*} eventName
+ * @param {*} trackDynamicRemarketing - decides weather to send dynamic remarketing event or not
+ * @param {*} enableDynamicRemarketingEventsFiltering - decides weather to apply filtering on event or not
+ * @param {*} eventsToTrackDynamicRemarketing - allowed list of events to send google ads
+ * @param {*} dynamicRemarketing - Depreciating : old config flag to check weather to send event as conversion or dynamic remarketing
+ * @returns
+ */
+function shouldSendDynamicRemarketingEvent(
+  eventName,
+  trackDynamicRemarketing,
+  enableDynamicRemarketingEventsFiltering,
+  eventsToTrackDynamicRemarketing,
+  dynamicRemarketing,
+) {
+  if (isDefinedAndNotNull(trackDynamicRemarketing)) {
+    return shouldSendEvent(
+      eventName,
+      trackDynamicRemarketing,
+      enableDynamicRemarketingEventsFiltering,
+      eventsToTrackDynamicRemarketing,
+    );
+  }
+  return dynamicRemarketing;
+}
+
+/**
+ * returns conversionData object (conversionLabel and eventName)
+ * if eventName is not present but defaultPageConversion is configured then keeping default eventName as Viewed a Page
+ * @param {*} eventTypeConversions
+ * @param {*} eventName
+ * @param {*} defaultPageConversion
+ * @returns
+ */
+function getConversionData(eventTypeConversions, eventName, defaultPageConversion) {
+  const conversionData = {};
+  if (eventTypeConversions) {
+    if (eventName) {
+      eventTypeConversions.forEach((eventTypeConversion) => {
+        if (eventTypeConversion.name.toLowerCase() === eventName.toLowerCase()) {
+          // htElement["message"]["name"]
+          conversionData.conversionLabel = eventTypeConversion.conversionLabel;
+          conversionData.eventName = eventTypeConversion.name;
+        }
+      });
+    } else if (defaultPageConversion) {
+      conversionData.conversionLabel = defaultPageConversion;
+      conversionData.eventName = 'Viewed a Page';
+    }
+  }
+  return conversionData;
+}
+
+export { shouldSendConversionEvent, shouldSendDynamicRemarketingEvent, getConversionData };

package/src/integrations/GoogleOptimize/browser.js

@@ -0,0 +1,79 @@
+/* eslint-disable prefer-rest-params */
+/* eslint-disable no-inner-declarations */
+/* eslint-disable class-methods-use-this */
+import logger from '../../utils/logUtil';
+
+import ScriptLoader, { LOAD_ORIGIN } from '../../utils/ScriptLoader';
+import { NAME } from './constants';
+
+class GoogleOptimize {
+  constructor(config, analytics, destinationInfo) {
+    if (analytics.logLevel) {
+      logger.setLogLevel(analytics.logLevel);
+    }
+    this.analytics = analytics;
+    this.name = NAME;
+    this.ga = config.ga;
+    this.trackingId = config.trackingId;
+    this.containerId = config.containerId;
+    this.async = config.async;
+    this.aflicker = config.aflicker;
+    ({
+      shouldApplyDeviceModeTransformation: this.shouldApplyDeviceModeTransformation,
+      propagateEventsUntransformedOnError: this.propagateEventsUntransformedOnError,
+      destinationId: this.destinationId,
+    } = destinationInfo ?? {});
+  }
+
+  init() {
+    logger.debug('===in init Google Optimize===');
+    if (!this.containerId) {
+      return;
+    }
+    // load optimize script first
+    ScriptLoader(
+      'Google Optimize',
+      `https://www.googleoptimize.com/optimize.js?id=${this.containerId}`,
+      { async: this.async },
+    );
+    if (this.ga) {
+      if (!this.trackingId) {
+        return;
+      }
+      ScriptLoader(
+        'Google Tag Manager',
+        `https://www.googletagmanager.com/gtag/js?id=${this.trackingId}`,
+      );
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        window.dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+      gtag('config', `${this.trackingId}`);
+    }
+
+    // anti flicker snippet contains insertBefore since it needs to be executed before any other script
+    // link -> https://support.google.com/optimize/answer/7100284?hl=en&ref_topic=6197443
+    if (this.aflicker) {
+      const flick = document.createElement('style');
+      flick.innerHTML = '.async-hide { opacity: 0 !important}';
+      const js = document.createElement('script');
+      js.setAttribute('data-loader', LOAD_ORIGIN);
+      js.innerHTML = `(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;})(window,document.documentElement,'async-hide','dataLayer',4000,{'${this.containerId}':true});`;
+      const e = document.getElementsByTagName('script')[0];
+      e.parentNode.insertBefore(flick, e); // style tag in anti flicker snippet should be before the a-flicker script as per docs
+      e.parentNode.insertBefore(js, e);
+    }
+  }
+
+  isLoaded() {
+    logger.debug('=== in isLoaded Google Optimize===');
+    return !!window.dataLayer;
+  }
+
+  isReady() {
+    logger.debug('=== in isReady Google Optimize===');
+    return !!window.dataLayer;
+  }
+}
+export default GoogleOptimize;

package/src/integrations/GoogleOptimize/constants.js

@@ -0,0 +1,13 @@
+const NAME = 'GOOGLE_OPTIMIZE';
+const CNameMapping = {
+  [NAME]: NAME,
+  'Google Optimize': NAME,
+  GoogleOptimize: NAME,
+  Googleoptimize: NAME,
+  GOOGLEOPTIMIZE: NAME,
+  'google optimize': NAME,
+  'Google optimize': NAME,
+  'GOOGLE OPTIMIZE': NAME,
+};
+
+export { NAME, CNameMapping };

package/src/integrations/GoogleOptimize/index.js

@@ -0,0 +1 @@
+export { default as GoogleOptimize } from './browser';

package/src/integrations/GoogleTagManager/browser.js

@@ -0,0 +1,95 @@
+/* eslint-disable class-methods-use-this */
+import logger from '../../utils/logUtil';
+import { NAME } from './constants';
+import { loadNativeSdk } from './nativeSdkLoader';
+
+class GoogleTagManager {
+  constructor(config, analytics, destinationInfo) {
+    if (analytics.logLevel) {
+      logger.setLogLevel(analytics.logLevel);
+    }
+    this.analytics = analytics;
+    this.containerID = config.containerID;
+    this.name = NAME;
+    this.serverUrl = config.serverUrl;
+    ({
+      shouldApplyDeviceModeTransformation: this.shouldApplyDeviceModeTransformation,
+      propagateEventsUntransformedOnError: this.propagateEventsUntransformedOnError,
+      destinationId: this.destinationId,
+    } = destinationInfo ?? {});
+  }
+
+  init() {
+    logger.debug('===in init GoogleTagManager===');
+
+    loadNativeSdk(this.containerID, this.serverUrl);
+  }
+
+  identify(htElement) {
+    // set the traits to the datalayer and put everything under the key traits
+    // keeping it under the traits key as destructing might conflict with `message.properties`
+    const rudderMessage = htElement.message;
+    const props = { traits: rudderMessage.context.traits };
+    this.sendToGTMDatalayer(props);
+  }
+
+  track(htElement) {
+    logger.debug('===in track GoogleTagManager===');
+    const rudderMessage = htElement.message;
+    const props = {
+      event: rudderMessage.event,
+      userId: rudderMessage.userId,
+      anonymousId: rudderMessage.anonymousId,
+      // set the traits as well if there is any
+      // it'll be null/undefined before identify call is made
+      traits: rudderMessage.context.traits,
+      ...rudderMessage.properties,
+    };
+    this.sendToGTMDatalayer(props);
+  }
+
+  page(htElement) {
+    logger.debug('===in page GoogleTagManager===');
+    const rudderMessage = htElement.message;
+    const pageName = rudderMessage.name;
+    const pageCategory = rudderMessage.properties ? rudderMessage.properties.category : undefined;
+
+    let eventName;
+
+    if (pageName) {
+      eventName = `Viewed ${pageName} page`;
+    }
+
+    if (pageCategory && pageName) {
+      eventName = `Viewed ${pageCategory} ${pageName} page`;
+    }
+    if (!eventName) {
+      eventName = 'Viewed a Page';
+    }
+    const props = {
+      event: eventName,
+      userId: rudderMessage.userId,
+      anonymousId: rudderMessage.anonymousId,
+      // set the traits as well if there is any
+      // it'll be null/undefined before identify call is made
+      traits: rudderMessage.context.traits,
+      ...rudderMessage.properties,
+    };
+
+    this.sendToGTMDatalayer(props);
+  }
+
+  isLoaded() {
+    return !!(window.dataLayer && Array.prototype.push !== window.dataLayer.push);
+  }
+
+  sendToGTMDatalayer(props) {
+    window.dataLayer.push(props);
+  }
+
+  isReady() {
+    return !!(window.dataLayer && Array.prototype.push !== window.dataLayer.push);
+  }
+}
+
+export { GoogleTagManager };

package/src/integrations/GoogleTagManager/constants.js

@@ -0,0 +1,10 @@
+const NAME = 'GTM';
+const CNameMapping = {
+  [NAME]: NAME,
+  'Google Tag Manager': NAME,
+  'google tag manager': NAME,
+  'googletag manager': NAME,
+  googletagmanager: NAME,
+};
+
+export { NAME, CNameMapping };

package/src/integrations/GoogleTagManager/index.js

@@ -0,0 +1 @@
+export { GoogleTagManager } from './browser';

package/src/integrations/GoogleTagManager/nativeSdkLoader.js

@@ -0,0 +1,21 @@
+import { LOAD_ORIGIN } from '../../utils/ScriptLoader';
+
+function loadNativeSdk(containerID, serverUrl) {
+  const defaultUrl = `https://www.googletagmanager.com`;
+  // ref: https://developers.google.com/tag-platform/tag-manager/server-side/send-data#update_the_gtmjs_source_domain
+
+  window.finalUrl = serverUrl ? serverUrl : defaultUrl;
+  (function (w, d, s, l, i) {
+    w[l] = w[l] || [];
+    w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+    const f = d.getElementsByTagName(s)[0];
+    const j = d.createElement(s);
+    const dl = l !== 'dataLayer' ? `&l=${l}` : '';
+    j.setAttribute('data-loader', LOAD_ORIGIN);
+    j.async = true;
+    j.src = `${window.finalUrl}/gtm.js?id=${i}${dl}`;
+    f.parentNode.insertBefore(j, f);
+  })(window, document, 'script', 'dataLayer', containerID);
+}
+
+export { loadNativeSdk };

package/src/integrations/Heap/browser.js

@@ -0,0 +1,67 @@
+/* eslint-disable class-methods-use-this */
+import processHeapProperties from './util';
+import { NAME } from './constants';
+import logger from '../../utils/logUtil';
+import { loadNativeSdk } from './nativeSdkLoader';
+
+class Heap {
+  constructor(config, analytics, destinationInfo) {
+    if (analytics.logLevel) {
+      logger.setLogLevel(analytics.logLevel);
+    }
+    this.analytics = analytics;
+    this.appId = config.appId;
+    this.name = NAME;
+    ({
+      shouldApplyDeviceModeTransformation: this.shouldApplyDeviceModeTransformation,
+      propagateEventsUntransformedOnError: this.propagateEventsUntransformedOnError,
+      destinationId: this.destinationId,
+    } = destinationInfo ?? {});
+  }
+
+  /**
+   * Initialise Heap
+   * DOC: https://developers.heap.io/docs/web
+   */
+
+  init() {
+    loadNativeSdk(this.appId);
+  }
+
+  /**
+   * Check if loaaded
+   */
+
+  isLoaded() {
+    return !!(window.heap && window.heap.appid);
+  }
+
+  /**
+   * Check if Ready
+   */
+
+  isReady() {
+    return !!(window.heap && window.heap.appid);
+  }
+
+  // DOC: https://developers.heap.io/reference#identify
+
+  identify(htElement) {
+    const { userId, context } = htElement.message;
+    if (userId) {
+      window.heap.identify(userId);
+    }
+    const { traits } = context;
+    // DOC: https://developers.heap.io/reference#adduserproperties
+    window.heap.addUserProperties(processHeapProperties(traits));
+  }
+
+  // DOC: https://developers.heap.io/reference#track
+
+  track(htElement) {
+    const { event, properties } = htElement.message;
+    window.heap.track(event, processHeapProperties(properties));
+  }
+}
+
+export default Heap;

package/src/integrations/Heap/constants.js

@@ -0,0 +1,9 @@
+const NAME = 'HEAP';
+const CNameMapping = {
+  [NAME]: NAME,
+  Heap: NAME,
+  heap: NAME,
+  'Heap.io': NAME,
+};
+
+export { NAME, CNameMapping };

package/src/integrations/Heap/index.js

@@ -0,0 +1 @@
+export { default as Heap } from './browser';