Install Search Statistics

This document describes how to install the Search Statistics feature.

Prerequisites

Install the required features:

1) Install the required modules using Composer

composer require spryker-eco/google-analytics:"^1.0.0" --update-with-dependencies

2) Enable the protobuf PHP extension

Search Statistics requires the protobuf PHP extension. The spryker/php Docker image includes the extension but does not load it by default, so you must enable it in the deploy file.

The Docker SDK has no separate switch for protobuf. Use one of the following options in every deploy file you use, such as local, staging, and production.

Option 1: Enable the otel extension

The otel extension loads opentelemetry, grpc, and protobuf together. To enable it, add otel to image: php: enabled-extensions:

image:
    tag: spryker/php:8.3
    php:
        enabled-extensions:
            - otel

Option 2: Load only the protobuf extension

If your project uses New Relic or otherwise does not need opentelemetry and grpc, load only protobuf through the php.ini configuration of the deploy file:

image:
    tag: spryker/php:8.3
    php:
        ini:
            extension: protobuf

After you choose an option, rebuild the images and restart the application:

docker/sdk boot your_deploy_file.yml && docker/sdk up

docker/sdk cli php --ri protobuf

3) Generate transfer objects

console transfer:generate

4) Generate translations

console translator:generate-cache

5) 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

6) 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/*"
            ]
        }
    }
}

7) Set up behavior

7.1) Synchronize configuration definitions

Import the Search Statistics configuration schema into the Configuration module:

console configuration:sync

7.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:

1. In the Back Office, go to Configuration, select Integrations in the sidebar, and open the Google Analytics tab.
2. In Storefront Tracking, set the Measurement ID (for example, G-XXXXXXXXXX).
3. In Data API Connection, set the Property ID and paste the complete JSON content of your Google Cloud service account key into Service Account Credentials JSON.
4. In Event Tracking > Product Events, enable Search. The storefront sends search events to GA4 only when this event is enabled. For details, see Google Analytics Event Tracking.