Skip to content

Commit

Permalink
docs: review + improvement of NGINX and migration parts + extended G…
Browse files Browse the repository at this point in the history
…oogle Tag Manager information (#1612)

 Co-authored-by: Stefan Hauke <s.hauke@intershop.de>
  • Loading branch information
mglatter authored and shauke committed Mar 20, 2024
1 parent a9c5766 commit 2940b05
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 61 deletions.
11 changes: 8 additions & 3 deletions docs/guides/google-tag-manager.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,17 @@ To enable user tracking and setting it up with [Google Tag Manager](https://gith
> [!NOTE]
> The standard Intershop PWA Google Tag Manager integration is very basic and currently only supports the tracking of route changes.
>
> Please refer to the [angulartics2 documentation](https://github.com/angulartics/angulartics2#usage) for information on how to enable tracking for additional events (e.g. ecommerce events).
> Please refer to the [angulartics2 documentation](https://github.com/angulartics/angulartics2#usage) for information on how to enable tracking for additional events (e.g. e-commerce events).
This feature only works in combination with Server Side Rendering, where the initial tracking configuration is set if the feature is enabled.

> [!IMPORTANT]
> The actual tracking on the client side will only work if the user has given his consent for `tracking` via the cookie banner or setting the according cookie preferences.
To activate GTM tracking, set the Tag Manager Token either in the used Angular CLI environment file with the property `gtmToken` or via the environment variable `GTM_TOKEN`.
Additionally, the feature toggle `tracking` has to be added to the enabled feature list.
This feature only works in Universal Rendering mode.
Prefer configuration via system environment variables.

The configuration via system environment variables is recommended since it is more flexible for different deployments and it does not require to add tokens to the PWA source code.

Example via `environment.ts` file:

Expand Down
32 changes: 16 additions & 16 deletions docs/guides/migrations.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,28 @@ kb_sync_latest_only
## From 5.0 to 5.1

The OrderListComponent is strictly presentational, components using it have to supply the data.
The getOrders method of the OrderService doesn't fetch all related order data by default, you can provide an additional parameter to include the data you need.
The getOrders method of the OrderService does not fetch all related order data by default, you can provide an additional parameter to include the data you need.

For accessibility reasons, we use buttons instead of anchor tags for links that trigger only an action and are not intended for navigation purposes.
Be aware of minor styling changes: Use css classes `btn btn-link btn-link-action` for text links and `btn-tool btn-link` for icon links, (see [Accessibility guide/How to fix `'click-events-have-key-events`' problems](https://github.com/intershop/intershop-pwa/blob/develop/docs/guides/accessibility.md#how-to-fix-click-events-have-key-events-problems) for more details).
For accessibility reasons, we use buttons instead of anchor tags for links that only trigger an action and are not intended for navigation purposes.
Note the following minor styling changes: use CSS classes `btn btn-link btn-link-action` for text links and `btn-tool btn-link` for icon links, (see [Accessibility guide/How to fix `'click-events-have-key-events`' problems](https://github.com/intershop/intershop-pwa/blob/develop/docs/guides/accessibility.md#how-to-fix-click-events-have-key-events-problems) for more details).

In ICM 11 the `messageToMerchant` flag can be configured in the back office and its setting is supplied by the `/configurations` REST call.
For this reason the `messageToMerchant` feature toggle is removed as a configurable feature toggle.
To still be able to configure the message to merchant feature via feature toggle in ICM 7.10 environments an [`ICMCompatibilityInterceptor`](../../src/app/core/interceptors/icm-compatibility.interceptor.ts) was introduced that can be enabled in ICM 7.10 based projects in the [`core.module.ts`](../../src/app/core/core.module.ts).
In addition the `'messageToMerchant'` environment feature toggle option needs to be enabled in the [`environment.model.ts`](../../src/environments/environment.model.ts).
For this reason, the `messageToMerchant` feature toggle has been removed as a configurable feature toggle.
To still be able to configure the message to merchant feature via feature toggle in ICM 7.10 environments, an [`ICMCompatibilityInterceptor`](../../src/app/core/interceptors/icm-compatibility.interceptor.ts) has been introduced that can be enabled in ICM 7.10 based projects in the [`core.module.ts`](../../src/app/core/core.module.ts).
In addition, the `'messageToMerchant'` environment feature toggle option needs to be enabled in the [`environment.model.ts`](../../src/environments/environment.model.ts).

To address an Angular hydration issue ([#1585](https://github.com/intershop/intershop-pwa/pull/1585)) the `header` component rendering was changed and in addition a `HeaderType` was introduced for the standard header types `['simple', 'error', 'checkout']`.
If in a project other header types are used these header types and the rendering needs to be adapted accordingly.
To address an Angular hydration issue ([#1585](https://github.com/intershop/intershop-pwa/pull/1585)), the `header` component rendering has been changed and, in addition, a `HeaderType` has been introduced for the standard header types `['simple', 'error', 'checkout']`.
If other header types are used in a project, these header types and the rendering need to be adapted accordingly.

With the introduction of the new [navigation CMS components](../concepts/cms-integration.md#navigation-cms-components) it became necessary to adapt the main navigation styling.
The styling can no longer rely on child selectors (`>`) since the CMS manged components introduce a lot of additional HTML tags around the styling relevant `li` tags.
The styling can no longer rely on child selectors (`>`), since the CMS managed components introduce a lot of additional HTML tags around the styling-relevant `li` tags.

To improve the performance of the 'Static Content Page' component the triggered `/pagetree` REST calls default behavior regarding the used `depth` was changed.
In the past no given 'Navigation Depth' in the ICM backend configuration resulted in no limitation at all ("Define how many levels the navigation tree displays.
To improve the performance of the 'Static Content Page' component, the default behavior of the triggered `/pagetree` REST call regarding the used `depth` has been changed.
Previously, no 'Navigation Depth' specified in the Commerce Management configuration resulted in no limitation at all ("Define how many levels the navigation tree displays.
To show all levels, leave the field empty.").
With the content model adaptions of `icm-as-customization-headless:1.7.0` a depth default value of `5` was introduced and the description was changed accordingly.
In the PWA the rendering was adapted as well so that an empty `NavigationDepth` value of the 'Static Content Page' component now defaults to `0` instead of no depth limitation, that resulted in the whole content page tree being fetched and saved to the state.
To keep the current behavior in an existing project either adapt the `0` default in `pagelet.numberParam('NavigationDepth', 0)"` to a reasonable number or set the 'Navigation Depth' values for all 'Static Content Page' component instances in the ICM backend to reasonable depth values instead of leaving them empty.
With the content model adaptions of `icm-as-customization-headless:1.7.0`, a depth default value of `5` has been introduced and the description has been changed accordingly.
In the PWA, the rendering was adapted as well so that an empty `NavigationDepth` value of the 'Static Content Page' component now defaults to `0` instead of no depth limitation that resulted in the whole content page tree being fetched and saved to the state.
To keep the current behavior in an existing project, either adapt the `0` default in `pagelet.numberParam('NavigationDepth', 0)"` to a reasonable number or set the 'Navigation Depth' values for all 'Static Content Page' component instances in Intershop Commerce Management to reasonable depth values instead of leaving them empty.

The [Brotli NGINX module](https://github.com/google/ngx_brotli) is used instead of gzip for compression on the NGINX server now, see [NGINX Optimizations](./optimizations.md#nginx-optimizations).

Expand All @@ -43,11 +43,11 @@ In the [changelog](../../CHANGELOG.md) of this project we will inform about feat
With the transition to ICM 11 the configured default `icmBaseURL` is now `'https://develop.icm.intershop.de'`.

With the switch to ICM 11 we switched to ICM deployments without the Responsive Starter Store as well.
Because of this the default `icmApplication` is now configured to `'-'`.
Because of this, the default `icmApplication` is now configured to `'-'`.
For ICM deployments with the Responsive Starter Store this probably has to be configured as it was before with `'rest'`.

The project has been updated to work with Angular 16.
Besides this a lot of other dependencies (NgRx, Typescript) have also been updated.
Besides this, a lot of other dependencies (NgRx, Typescript) have also been updated.

The spelling of the OCI punchout actions has changed due to a changed naming schema of the NgRx action creator functions.

Expand Down
Loading

0 comments on commit 2940b05

Please sign in to comment.