Hi Scott,
Where would you insert your GoogleAnalytic's ID, though? There's only one index.html
https://BASE_URL/index.html << this is easy to edit
Here is what you would need to do:
1. clone every widget that you are using in your ExB map.
1.1 example: copy whole folder from c:\ArcGISExperienceBuilder\client\dist\widgets\common\search
1.2 paste in c:\Temp
1.3 Rename the folder from \search\ to \my-search\
1.4 Edit the manifest.json to change the name to my-search
1.5 (while you're at it, change the icon.svg & fix the issues in popper-style.ts 🙂
1.6 Copy your cloned widget into c:\ArcGISExperienceBuilder\client\your-extensions\widgets\my-search
2. Use my-search widget from now on in your ExB maps
3. Edit C:\ArcGISExperienceBuilder\client\your-extensions\widgets\bcc-search\src\runtime\widget.tsx
4.We will use the 'react-ga' library (don't forget to do a npm -ci to fetch the required libraries)
import ReactGA from 'react-ga';
const TRACKING_ID = "UA-XXXXX-X"; // OUR_TRACKING_ID
ReactGA.initialize(TRACKING_ID);
Then modify your render function
//useAnalyticsEventTracker.jsx
import React from "react";
import ReactGA from "react-ga";
const useAnalyticsEventTracker = (category="Blog category") => {
const eventTracker = (action = "test action", label = "test label") => {
ReactGA.event({category, action, label});
}
return eventTracker;
}
export default useAnalyticsEventTracker;
//ContactUs.jsx
import useAnalyticsEventTracker from './useAnalyticsEventTracker';
const ContactUs = () => {
const gaEventTracker = useAnalyticsEventTracker('Contact us');
return(
<div>
<h3>Contact Us</h3> <div>
<a href="#" onClick={()=>gaEventTracker('call')}>Call Us</a> </div> <div>
<a href="mailto:someone@example.com" onClick={()=>gaEventTracker('email')}>Write to us</a> </div> </div>)};
5. Save the widget.tsx , you could also inject your Google Analytics in the sub-components (usually located in the /runtime/components/ folder)
https://blog.saeloun.com/2022/02/17/how-to-integrate-react-app-with-google-analytics.html
(use good old https://unminify.com/ for all obfuscated .js/html)
