[Elizabeth]

The standard “Landing Page + Query String” filter/tag in Google Analytics (GA) strips out the domain and just provides the landing page URL path. This is to accommodate the fact that you may have multiple domains reporting in one GA profile, but it can indeed be frustrating when you need the full URL. While GA4 doesn’t provide an out-of-the-box way to add the domain name to the landing page dimension, the possible workaround is modifying your tracking setup to record the full URL (including the domain) in a custom dimension. You’ll need to have the appropriate permissions and technical know-how or the support of someone who does to implement this. Keep in mind, though, that GA doesn’t retroactively modify data, so this solution would only start collecting the full URL data from the time you implement it forward. As always, be sure to test thoroughly in a staging environment before deploying to production.

[Elizabeth]

Since you are dealing with an Angular application, using the Node.js Google Analytics Data API client library directly may not be the best approach. This library is designed for server-side JavaScript not client-side. Hence, the issue with webpack and Angular may arise.

Consider creating a backend API service in Node.js where you can safely utilize your Google Analytics Data API client library. This server-side function can call the Google Analytics API and return the processed data.

From your Angular app, make HTTP requests to this backend service to fetch the data. This approach can streamline the process and help you bypass the issue of incorporating Node.js libraries directly into Angular. It will also abstract the Google API away, ensuring your client-side app only needs to utilise HTTP requests and your app can be decoupled from the Google API somewhat. You would receive the response data from the HTTP request in a promise, and you can then process and display that data within your Angular components.

This approach is also more secure, as the application credentials used for Google Analytics will not be exposed on the client side(but rather on the server side where it’s much safer). The server-side API service will communicate with Google Analytics and can return the data you need in a format that’s best for your Angular app to consume.

Remember to set up CORS properly on your server-side API to allow your Angular application to fetch the data.