Technical Articles
Using SAP Web Analytics with React
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:
- Develop and deploy React App to Cloud Foundry environment.
Explore UI5 Web Components for React in SAP Business Application Studio(Develop & Deploy)
- 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 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.
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.
Nice blog.