Mobile Web (JS) Integration

Welcome to the Affle MAAS Mobile Web (Javascript SDK) Integration Section. Our SDK provides developers the flexibility to choose and integrate one or more components based on their requirements.



Getting the Affle Tracker SDK

You can download the latest SDK from the link below:

Mobile Web SDK(Last updated: 30/November/2015)

1. affle.tracking.js: This is the java script file that has to be integrated in the application.
2. affle.config.js: This is the java script file that has to be integrated in the application.
3. jquery.min.js: This is the java script file that has to be integrated in the application.
4. SDKProjectSettings.txt : This file contains Tracking URL and other key settings specific to the application.

The step-by-step integration process has been described in detail in the coming sections. Your developer must have sound knowledge of web development.

Integration Guide

To include the SDK in your Project add the jquery.min.js , affle.config.js , affle.tracking.js files, In the mWeb application project.

To track in-app stats like Page Views, Engagements, Events, Purchase Events & other Analytics use the following settings:

1. Open affle.config.js available in the Project.

2. Set affleTrackerUrl value provided in the SDKProjectSettings.txt file.

var affleTrackerUrl = <"Use the Affle_TRACKER_URL provided in the SDKProjectSettings.txt";>

3. Include the, jquery.min.js, affle.config.js, affle.tracking.js in your html file where you will call events, purchaseEvents methods.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="affle.config.js"></script>
<script type="text/javascript" src="affle.tracking.js"></script>

4. Call the following methods in your program to capture the Page Views, Engagements, Events, Purchase Events & other analytics.

a) Page View

To track your page views in the msite call, the method “events(page, event, extraParams)” and pass the View Name that should be displayed on the analytics interface.

Method: events

events("ACTUAL_VIEW_NAME",null,null)

Example for Home Screen:

<script type="text/javascript">
events ("Home", null,null);
</script>

Example for Category List Screen:

<script type="text/javascript">
            events ("CategoryList",null,null);
</script>

b) Engagement/Events

To track your Engagement/Events in the mWeb site, call the method “events(page, event, extraParams)” and pass the View Name, Event/Engagement Name that should be displayed on the analytics interface.

Method
events ("ACTUAL_VIEW_NAME", " ENGAGEMENT_OR_EVENT_NAME", null)

Example for FB_LIKE on Home Screen:

<script type="text/javascript">
            events ("Home ", "fb_like",null);
</script>

Example for TW_SHARE on Category List Screen: –

<script type="text/javascript">
            events ("Category2Detail"," fb_tw_share",null);
</script>

c) Engagement/Events Extra Parameter

To track your Engagement/Events Events in the mWeb site, call the method “events(page, event, extraParams)” and pass the View Name, Event/Engagement Name with extra params that should be displayed on the analytics interface.
Method

events ("ACTUAL_VIEW_NAME", " ENGAGEMENT_OR_EVENT_NAME", "EVENT_EXTRA_PARAMETER")

Example for FB_LOGIN on Home Screen with Extra Parameter:

<script type="text/javascript">
                  var extraParamObj = {"key1":"fname","key2":"lastname","key3":"xyz@gmail.com"};
   events ("Home ","fb_like", extraParamObj);
</script>

d) Purchase

Track your Purchase Events in the mWeb site, call the method (page, pevent, ptid, pqty, pamount, extraParams) “purchaseEvents (page, pevent, ptid, ,pqty, pamount, pCurrencyCode, extraParams)” and pass the View Name, Purchase Event Name, Transaction Id, Purchase Amount of Transaction, and Purchase Quantity that should be displayed on the analytics interface.

Method

purchaseEvents ("ACTUAL_VIEW_NAME", "PURCHASE_EVENT_NAME", "PURCHASE_TRANSACTION_ID"," PURCHASE_QUANTITY", "PURCHASE_AMOUNT", "PURCHASE_CURRENCY_CODE"," PURCHASE_EXTRA_PARAMETER")
* PURCHASE_EXTRA_PARAMETER (extraParams) value is "KEY-VALUE" (JSON) format

Example for Purchase on Movie Booking Detail Page:

<script type="text/javascript">
            purchaseEvents ("MovieTitle", "Movie1Name", "A12345",  "4", "1000", "INR",null);
</script>
* Price of 1 Ticket = 250, 4 Tickets Total Amount = 1000

Example for Purchase on Taxi Booking Detail Page:

<script type="text/javascript">
            purchaseEvents ("TaxiCategory1", "YelloTaxi", "A12345xxxuz", "1", "1500", "USD",null);
</script>
*Price of 1 Ticket = 1500

Example for Credit Purchase on Game Credit Purchase Page With Extra Parameters:

<script type="text/javascript">
       var extraParamObj = {"key1":"AFF011","key2":"hello-3","key3":"EA"};
       purchaseEvents ("Game1", "Credit", "A12345xxxuz", "1000", "50","INR", extraParamObj);
</script>
*Price of 1000 credit = 50