Install Search Statistics

Edit on GitHub

This 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
Verification

Make sure the following modules have been installed:

MODULE EXPECTED DIRECTORY
GoogleAnalytics vendor/spryker-eco/google-analytics

2) Generate transfer objects

console transfer:generate
Verification

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
Verification

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
Verification
  1. Log in to the Back Office.
  2. Navigate to Configuration.
  3. 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:

Configure the Google Analytics 4 connection in the Back Office:

  1. Navigate to Configuration > Google Analytics.
  2. Under the Storefront tab, enable tracking and set the Measurement ID (format: G-XXXXXXXXXX).
  3. 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.
Verification
  1. Open the storefront and perform a search.
  2. Verify that a search_results event 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.
  3. 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).