Introduction

This Tutorial aims to teach the user how to integrate his Website with Appgain.io cloud using appgain.io Web SDK and how to use the appgain.io products.

Required For Setup

Installation (HTTPS)

  • Add the three downloaded files to the root of the Website.

  • Enable HTTPS on your Website: this is a must for AppGain web push to work

  • Add the below script in the head section at all of your website pages

<head>
    <script src="https://www.gstatic.com/firebasejs/3.7.3/firebase.js"></script>
    <script type="text/javascript" src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/appgainsdk.min.js"></script>
</head>

Installation (HTTP)

  • Add the three downloaded files to the root of the Website.

  • Enable HTTPS on your Website: this is a must for AppGain web push to work

  • Add the below script in the head section at all of your website pages

<head>
    <script src="https://www.gstatic.com/firebasejs/3.7.3/firebase.js"></script>
    <script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/jquery.min.js"></script>
    <script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/jquery-ui.css"/>
    <script type="text/javascript" src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/appgainsdk.min.js"></script>
</head>

Initializing (HTTPS)

-Initializing Appgain SDK using Appgain.init requires an appgainConfig object that includes

  • projectId: from Appgain Dashboard -> Project Settings -> Basic Settings ->API and SDK Keys

  • apiKey: from Appgain Dashboard -> Project Settings -> Basic Settings ->API and SDK Keys

  • userId [optional]: If the userId is not passed into the

appgainConfig object, the SDK will search for the userId in the localStorage or in the URL query, if no userId has been found the SDK generate a custom userId.

  • Place this block of code in a script tag before </body> ending
let appgainConfig = {
  projectId: "<appgain-projectId>",
  apiKey: "<appgain-apiKey>",
  userId: "userId", //optional
};

Appgain.init(appgainConfig)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

Initializing (HTTP)

Note: The web push subscription for HTTP Web Apps it works as follows:

  • A POP-UP appears to the User asking him if he wants to receive Notifications from the Website
  • If the User accepts the POP-UP a 450 x 450 px window with this address:'https://project-subdomain.appgain.io/webpush ' pops up asking the User for the default browser Notification Alert.
  • If the User declines the first POP-UP, the User will never be asked about Push Notification Subscription again.
  • If the User accepts the first POP-UP and something goes wrong with the second window that pops up (for example User refresh or close the window before accepting), if the User opens the website again after 24 hours, the first POP-UP will appear again, asking the User if he/she would like to subscribe for notifications.

-Initializing Appgain SDK using Appgain.init requires an appgainConfig object that includes

  • projectId: from Appgain Dashboard -> Project Settings -> Basic Settings ->API and SDK Keys

  • apiKey: from Appgain Dashboard -> Project Settings -> Basic Settings ->API and SDK Keys

  • quickInstall: This attribute's value must be true if your Web App is using HTTP not HTTPS

  • userId [optional]: If the userId is not passed into the

appgainConfig object, the SDK will search for the userId in the localStorage or in the URL query, if no userId has been found the SDK generate a custom userId.

  • Place this block of code in a script tag before </body> ending
let appgainConfig = {
  projectId: "<appgain-projectId>",
  apiKey: "<appgain-apiKey>",
  quickInstall: true, //is a must for HTTP Web Apps,
  userId: "userId", //optional
  websiteName: "Website Name", //optional in case of null, the subdomain will be used in the Request Notification POP-UP
};

Appgain.init(appgainConfig)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

SDK Methods

Once you call Appgain.init(config) you will able to call the rest of the SDK Methods.

Appgain.updateUser: This method takes a userInfo:JSON as a param and updates the current active User (generated by the Appgain.init) with the new values.

Appgain.logPurchase: This method takes (productName, amount(total paid money), currency, campaignId) as input params to log user's purchase action.

Appgain.logEvent: This method takes (eventName, amount, action, extras:json) as input params to log a custom user event, also note that extras requires a {key: value}.

Appgain.webPushSubscribe: This method asks the User to Enable browser Notifications for this website, note that it gets called automatically by calling the Appgain.init method.

Appgain.webPushUnSubscribe: This method unsubscribes the current User from our Notification System.

Updating User info

You can update existing user info or add new data by calling the updateUser() method.

let userData = {
  name: "Username",
  email: "userEmail@example.com",
};

Appgain.updateUser(userData)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

Revenue Tracking

Appgain.logPurchase(productName, amount(total paid money), currency, campaignId)

Appgain.logPurchase("productName", 100, "currency", "campaignId")
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

Events Logging

let type = "type";
let action = "action";
let extras = { key: "value" };
Appgain.logEvent(type, action, extras)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

Marketing Automation

fireAutomator("triggerPoint", { key: "value" })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });