Adding the MOCA JS SDK to your Website

MOCA JS SDK integration

The integration of the MOCA JS SDK is very straightforward: paste the following code inside the <head> and </head> tags in every page you want to track user data.

<script src="http://bin.mocaplatform.com/libs/moca-latest.min.js"></script>

Once the page has the script location set, the next step is to initialize the MOCA JS SDK. This will start the data collection. Find an example below that contains initialization, a mandatory variable (the API Token) and one of the many properties you can register (logged in user_id):

moca.init({
    "api_token": "<MOCA_API_TOKEN>",  	// choose token for integration or production environment
    "user_id" : "e.g. 923847598"	   	// logged-in user unique ID (optional) 	
});

The moca.init method, after including moca-latest.min.js script, will start the SDK. The api_token acts as a site identifier so the information can be stored adequately and used to present Web Analytics for your specific web application within the MOCA Console tool. Optionally, the user_id refers to the user that has logged into your web application.

MOCA JS SDK Testing

Testing is a fundamental part of any integration and we will detail the steps to test the correct integration.

Please follow the steps below to tests your integration:

Enter the MOCA Console using your credentials.
Go to the Site you created for this project, or create a new one from scratch.
In that Site, click on Settings.
Now navigate to API Keys in order to retrieve the API Token. It’s defined in the console as Site Key.
Example here of how the code on your integration should look like.
In the moca.init api_token field paste the Site Key of your MOCA Console App.
Open your WebApp in a browser that has developer tools available.
Once the page you want to track is opened, check the developer tool logs to ensure the event is submitted to MOCA and MOCA responds with a 204.

<!DOCTYPE html>
<html>
	<head>
		<title>MOCA JS SDK Test</title>
		<script src="http://bin.mocaplatform.com/libs/moca-latest.min.js"> 	
		</script>
	</head>
  <body>
    <script>
      //first initialize the SDK and pass the necessary args
      moca.init({
        "api_token": "your_api_key_here", 
        "user_id" : "test_user_for_SDK_1"
      });	
      //Send an event to api.mocaplatform.com
      moca.trackEvent ("search_view", { 
      category: "test_SDK",
      item: "1337" 
        },
      function () {
         console.log ("Event submitted to MOCA");
        }
      );
    </script>
  </body>
</html>