There are three Google Analytics widgets included in the dashboard from start, Web analytics, E-commerce analytics and Page top list.
To use these widgets, you need to save your Google Client ID and Client Secret in Litium. Once this is done, when users log in to back office and want to setup the Google Analytics widgets, only step 9 to 11 below are required.
Create your Google Client ID and Client Secret
To use the Google Analytics widgets, you need to have a Google Analytics account connected to the web site.
To be able to log in you need to use a real domain for your site. The domain http://mydev.local will not work. For easy testing you can assign the domain http://mydev.localtest.me to the bindings in IIS. The localtest.me domain is configured so everything.localtest.me will be pointed to 127.0.0.1/localhost.
1. Create a Google ID
1.1. Go to console.developers.google.com.
1.2. Log in using the Google Analytics account.
1.3. Click Create project.
2. Project name
2.1. Enter a project name, for example "Litium dashboard widgets".
2.1 Click Create.
3. Turn on required API libraries: Analytics Data API and Analytics API
3.1. Click on Library, in the left menu.
3.2. Search for Analytics.
3.3. Make sure both Analytics Data API and Analytics API are enabled.
4. Configure Google Auth Platform:
4.1. Click on Credentials, in the left menu.
4.2. Click on Configure consent screen in the banner at the top of the page.
4.3 If you have not previously configured the Google Auth platform, click Get started. (If Google Auth platform is already configured, you can skip to step 5 below.)
4.4 Enter an App name, eg "Litium dashboard" and a supporr email address. Click Next.
4.5 Select External as your audience. Click Next.
4.6 Enter one or more email addresses to be notified about changes to your Google Cloud platform project. Click Next.
4.7 Select the checkbox to accept Google's policy. Click Continue.
4.8 Click Create.
5. Create a new OAuth Client ID
5.1. Select Clients in the left menu.
5.2. Select Create client to create a new OAuth Client ID.
5.3. Select Web Application as the application type.
5.4. Give the client a name, eg "Litium backoffice"
5.5. Enter the Authorized JavaScript Origins. Note that only www.mydomain.com should be changed to the customer domain name. If there are more than one domain add more rows. Click Create.
6. A confirmation dialog is displayed. You must copy the client secret before closing the dialog. It will not be available to view or download after the dialog has been closed. In that case, you will need to create a new client to generate a new client ID and secret.
6.1 Copy the Client ID and Client Secret keys. Click OK.
7. Paste ID and keys
Log in to Litium backoffice and go to the Settings > System Settings > Settings. Paste the client ID and client secret keys into the respective fields and click Save.
9. Open the Web Analytics or E-commerce Analytics widget in edit mode by clicking the cogwheel icon in the widget. Then click Login to Google.
10. Enter your Google Analytics account credentials and log in. Click the Allow access button.
11. In the widget settings, there are three drop down boxes: Account, Property and View. After logging in to Google, these three boxes will be loaded with data from Google.
11.1. Select Account > Property
11.2. Click View to select the website we want the widget to get data from.
11.3. Click Save.
Note: If you setup widgets with google analytics 4, there are three drop down boxes: Account, Property and Calculate conversion rate per. As Google Analytics 4 has changed recently and doesn't offer a view ID.
Google Analytics 4 offers two conversion rate metrics for each conversion: session-based conversion rate for one conversion and user-based conversion rate for one conversion. Please select the type that you want to request in the reports. Read more at here
12. Select what type of ecommerce tracking that should be used in back office (Track orders with field) - optional
Note: When you choose muilple options for a Track orders with field that has GA4. We will prioritize tracking orders with it.
The Google Analytics widgets are now ready to use. When future users log in to back office and want to setup the Google Analytics widgets, only step 9 to 11 above are required.
If you set up a widget with Google Analytics 4, its analytics data will be delayed for 24 hours. Read more at here