Using SAP Web Analytics with React

[former_member245576]

Dear Readers,

I hope this blog post will be helpful for you to set up and use the Web Analytics with the React App to track the usage of your application.

 

SAP Web Analytics

It is a Software-as-a-service (SaaS) on the SAP Cloud Platform. The application lets you collect, report, and analyze your website usage data that helps you to identify meaningful patterns from various digital channels. The application can offer insights on how well your websites perform in key channels. These insights can lead you to implement critical improvements that help you optimize web usage to measure organizational goals, drive strategy, and improve the overall user experience of your web applications.

React

It can be used as a base in the development of single-page or mobile applications. UI5 Web Components for React is a Fiori3 compliant React library built on top of the UI5 Web Components.It also providing complex components and layouts on top of the UI5 Web Components

 

Prerequisite:

1. Develop and deploy React App to Cloud Foundry environment.
   

   Explore UI5 Web Components for React in SAP Business Application Studio(Develop & Deploy)

   
   


2. Web Analytics
   

 

Now lets see the step by step procedure,

NOTE: If you have Web Analytics step up, you can ignore step 1 to step 11.

Step 1: In your CF subaccount, go to "Entilements" and click  "Configure Entilements".

 

Step 2: Click "Add Service Plans".

 

Step 3: Search and select "Web Analytics" and choose available plans "standard" and click "Add 1 Service Plan".

 

Step 4: Click "Save" to save your entitlement.

 

Step 5: Once you save the entitlement you could see your "Web Analytics" in subscriptions. Go to Web Analytics and hit "Subscribe".

 

Step 6: Now click the link "Go to Application".

 

Step 7: You will be facing the below warning message as we haven't added the roles in trust configuration.

 

Step 8: Go to "Security" and click "+" to create a new "Role Collection".

 

Give the name and description of the new Role Collection and hit "Create".

 

Step 9: Once your role collection got created. Click the role collection "SAP Web Analytics Admin", then click "Edit' and chose the role as highlighted below and click "Save".

 

Step 10: Go to "Security", "Trust Configuration", then click "sap.default", give your E-Mail Address and hit "Show Assignments".

 

Step 11: Choose the Web Analytics role collection and hit "Assign Role Collection".

 

Step 12: Now repeat "Step 6". Now you will not get the warning message as in Step 7 as you are authorized and could see the below screen. Click "Add Space".

 

Step 13:Give space "Name", "Description", user email id as user ID and user name and hit "Add' and click "Save" to add the new space in Web Analytics.



 

Step 14: Once the space is added successfully, now its time to add your site for which you need to track the usage. Click "Add Site".

 

Step 15: Give the "Website URL". (Here I have used the React application routes deployed in a cloud foundry environment), "Name" for the site and provide other privacy settings as required and hit "Save".

 

Step 16: Click on the icon as highlighted in the below screen to get the tracking snippet.

Click "Copy Snippet" to copy the tracking snippet code

 

Step 17: In your React App, go to "public" folder of your project directory and inside index.html copy the tracking snippet.

Note: To develop and deploy React App refer the blog post mentioned in prerequisite.

 

Step 18: Run your deployed application. Click "Allow" for tracking.

Note: To develop and deploy React App refer the blog post mentioned in prerequisite.

 

Step 19: Now lets go to the Web Analytics, select the space and site to view the usage

 

 

That’s it you have successfully tracked the usage of your React Application. In this way you can track any of your web applications.

 

Conclusion

In this blog post, We have learnt how to set up Web Analytics and to track the usage of your React App.

Suggestions are welcome
Thank you:)

#HappyLearning

Regards,
Hemalatha B.

 

[imsuryapandiyan]

Nice blog.