feature/new integration: Convertflow onboarding

integrations/ConvertFlow/browser.js

@@ -0,0 +1,50 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable class-methods-use-this */
+import { NAME } from "./constants";
+import logger from "../../utils/logUtil";
+import ScriptLoader from "../ScriptLoader";
+
+class ConvertFlow {
+  constructor(config) {
+    this.websiteId = config.websiteId;
+    this.toggleToSendData = config.toggleToSendData;
+    this.eventsList = config.eventsList;
+    this.eventsMappping = config.eventsMappping;
+    this.name = NAME;
+  }
+
+  init() {
+    logger.debug("===In init convertflow===");
+    ScriptLoader(
+      "convertflow-integration",
+      `https://js.convertflow.co/production/websites/${this.websiteId}.js`
+    );
+  }
+
+  isLoaded() {
+    logger.debug("===In isLoaded convertflow===");
+    if (this.toggleToSendData) {
+      this.trigger();
+    }
+    return !!window.convertflow && typeof window.convertflow === "object";
+  }
+
+  isReady() {
+    logger.debug("===In isReady convertflow===");
+    return !!window.convertflow;
+  }
+
+  // identify call to Convertflow
+  identify(rudderElement) {
+    logger.debug("===In convertflow Identify===");
+    const { message } = rudderElement;
+    const email = message.context.traits?.email || message.traits?.email;
+    if (!email) {
+      logger.error("email is rquired for identify call");
+    }
+    const payload = { email, override: true };
+    window.convertflow.identify(payload);
+  }
+}
+
+export default ConvertFlow;

integrations/ConvertFlow/constants.js

@@ -0,0 +1,10 @@
+const NAME = "CONVERTFLOW";
+const CNameMapping = {
+  [NAME]: NAME,
+  Convertflow: NAME,
+  convertflow: NAME,
+  convertFlow: NAME,
+  ConvertFlow: NAME,
+};
+
+export { NAME, CNameMapping };

integrations/ConvertFlow/index.js

@@ -0,0 +1,3 @@
+import ConvertFlow from "./browser";
+
+export default ConvertFlow;

integrations/ConvertFlow/utils.js

@@ -0,0 +1,73 @@
+import {
+  getHashFromArray,
+  isDefinedAndNotNullAndNotEmpty,
+} from "../utils/commonUtils";
+
+// default mapping for the events
+const standardEventsListMapping = {
+  cfReady: "CTA Ready",
+  cfView: "CTA Viewed",
+  cfConversion: "CTA Converted",
+  cfCompletion: "CTA Completed",
+  cfSubmit: "CTA Form Submitted",
+  cfAddToCart: "Product Added to Cart",
+  cfClosed: "CTA Closed",
+};
+
+/**
+ * This function is used to make a track Call to rudderstack.
+ * @param {*} standardEventsMap - mapping of events done by the user
+ * @param {*} eventName - standard event name
+ * @param {*} data
+ */
+const makeACall = (standardEventsMap, eventName, data) => {
+  const eventNames = Object.keys(standardEventsMap);
+  let updatedEvent = standardEventsListMapping[eventName];
+  eventNames.forEach((event) => {
+    if (standardEventsMap[event].includes(eventName)) {
+      updatedEvent = event;
+    }
+  });
+  const properties = {};
+  if (data) {
+    if (data.cta) {
+      const { cta } = data;
+      properties.cta_name = cta.name;
+      properties.cta_type = cta.cta_type;
+      properties.cta_id = cta.id;
+    }
+    if (data.variant) {
+      properties.cta_variant = data.variant.variation;
+    }
+    if (data.step) {
+      properties.cta_step = data.step.position;
+    }
+  }
+  if (isDefinedAndNotNullAndNotEmpty(properties)) {
+    window.rudderanalytics.track(updatedEvent, properties);
+  } else {
+    window.rudderanalytics.track(updatedEvent);
+  }
+};
+
+const trigger = () => {
+  const standardEventsMap = getHashFromArray(this.eventsMappping);
+  const standardEventsList = [
+    "cfReady",
+    "cfView",
+    "cfConversion",
+    "cfCompletion",
+    "cfSubmit",
+    "cfAddToCart",
+    "cfClosed",
+  ];
+  standardEventsList.forEach((events) => {
+    window.addEventListener(events, function (event, data) {
+      if (this.eventsList === event) {
+        makeACall(standardEventsMap, event, data);
+      }
+    });
+  });
+};
+
+export { makeACall, trigger };

integrations/client_server_name.js

@@ -51,6 +51,7 @@ const clientToServerNames = {
   MATOMO: "Matomo",
   ROCKERBOX: "Rockerbox",
   MOUSEFLOW: "Mouseflow",
+  CONVERTFLOW: "ConvertFlow",
 };
 
 export { clientToServerNames };

integrations/index.js

@@ -50,6 +50,7 @@ import * as Vero from "./Vero";
 import * as Matomo from "./Matomo";
 import * as Rockerbox from "./Rockerbox";
 import * as Mouseflow from "./Mouseflow";
+import * as ConvertFlow from "./ConvertFlow";
 
 // the key names should match the destination.name value to keep partity everywhere
 // (config-plan name, native destination.name , exported integration name(this one below))
@@ -107,6 +108,7 @@ const integrations = {
   MATOMO: Matomo.default,
   ROCKERBOX: Rockerbox.default,
   MOUSEFLOW: Mouseflow.default,
+  CONVERTFLOW: ConvertFlow.default,
 };
 
 export { integrations };

integrations/integration_cname.js

@@ -50,6 +50,7 @@ import { CNameMapping as Vero } from "./Vero/constants";
 import { CNameMapping as Matomo } from "./Matomo/constants";
 import { CNameMapping as Rockerbox } from "./Rockerbox/constants";
 import { CNameMapping as Mouseflow } from "./Mouseflow/constants";
+import { CNameMapping as ConvertFlow } from "./ConvertFlow/constants";
 
 // for sdk side native integration identification
 // add a mapping from common names to index.js exported key names as identified by Rudder
@@ -65,6 +66,7 @@ const commonNames = {
   ...Chartbeat,
   ...Clevertap,
   ...Comscore,
+  ...ConvertFlow,
   ...Criteo,
   ...CustomerIO,
   ...DCMFloodlight,