Install Search Statistics
Edit on GitHubThis document describes how to install the Search Statistics feature.
Prerequisites
Install the required features:
| NAME | VERSION |
|---|---|
| Spryker Core | ^3.46.0 |
| spryker-shop/shop-ui | 1.107.0 |
| spryker-shop/traceable-event-widget | 1.2.0 |
1) Install the required modules using Composer
composer require spryker-eco/google-analytics:"^1.0.0" --update-with-dependencies
Make sure the following modules have been installed:
| MODULE | EXPECTED DIRECTORY |
|---|---|
| GoogleAnalytics | vendor/spryker-eco/google-analytics |
2) Generate transfer objects
console transfer:generate
Verify that the following transfer objects have been generated:
| TRANSFER | TYPE | EVENT | PATH |
|---|---|---|---|
| GoogleAnalyticsEvent | class | created | src/Generated/Shared/Transfer/GoogleAnalyticsEventTransfer |
| GoogleAnalyticsEventConditions | class | created | src/Generated/Shared/Transfer/GoogleAnalyticsEventConditionsTransfer |
| GoogleAnalyticsEventCriteria | class | created | src/Generated/Shared/Transfer/GoogleAnalyticsEventCriteriaTransfer |
| GoogleAnalyticsEventCollection | class | created | src/Generated/Shared/Transfer/GoogleAnalyticsEventCollectionTransfer |
3) Generate translations
console translator:generate-cache
4) Configure navigation
Update the analytics navigation entry in config/Zed/navigation.xml to add Search Statistics as a sub-page. Replace the existing <analytics> entry with the following:
config/Zed/navigation.xml
<analytics>
<label>Analytics</label>
<title>Analytics</title>
<icon>bar_chart_4_bars</icon>
<pages>
<analytics>
<label>Analytics</label>
<title>Analytics</title>
<bundle>analytics-gui</bundle>
<controller>analytics</controller>
<action>index</action>
</analytics>
<google-analytics>
<label>Search Statistics</label>
<title>Search Statistics</title>
<bundle>google-analytics</bundle>
<controller>search-statistics</controller>
<action>index</action>
</google-analytics>
</pages>
</analytics>
Generate the router and navigation caches:
console router:cache:warm-up:backoffice
console navigation:build-cache
Log in to the Back Office and verify that Analytics > Search Statistics appears as a sub-item in the main navigation sidebar.
5) Configure TypeScript paths
In tsconfig.yves.json, add the TraceableEventWidget path alias to compilerOptions.paths:
tsconfig.yves.json
{
"compilerOptions": {
"paths": {
"TraceableEventWidget/*": [
"./vendor/spryker-shop/traceable-event-widget/src/SprykerShop/Yves/TraceableEventWidget/Theme/default/*"
]
}
}
}
6) Set up behavior
6.1) Synchronize configuration definitions
Import the Search Statistics configuration schema into the Configuration module:
console configuration:sync
- Log in to the Back Office.
- Navigate to Configuration.
- Verify that a Google Analytics feature entry appears with the Storefront and Data API tabs.
6.2) Configure Google Analytics 4 credentials
Before you configure the Back Office, obtain the following parameters from Google:
- Measurement ID (format:
G-XXXXXXXXXX): see Find your Measurement ID in the Google Analytics Help Center. - Property ID: see GA4 Property ID in the Google Analytics Data API documentation.
- Service Account Credentials JSON: see Create and delete service account keys in the Google Cloud documentation.
Configure the Google Analytics 4 connection in the Back Office:
- Navigate to Configuration > Google Analytics.
- Under the Storefront tab, enable tracking and set the Measurement ID (format:
G-XXXXXXXXXX). - Under the Data API tab, set the Property ID and paste the full JSON content of a Google Cloud service account key into Service Account Credentials JSON.
- Open the storefront and perform a search.
- Verify that a
search_resultsevent appears in the Google Analytics 4 DebugView for the configured property. To enable and use DebugView, see Monitor events with DebugView in the Google Analytics Help Center. - Navigate to Analytics > Search Statistics in the Back Office and verify that search term data is returned after the GA4 processing delay (up to 48 hours).
Thank you!
For submitting the form