@graphcommerce/docs 9.0.0-canary.61 → 9.0.0-canary.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/framework/google-gtm.md +143 -0
  3. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Change Log
2
2
 
3
+ ## 9.0.0-canary.62
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2326](https://github.com/graphcommerce-org/graphcommerce/pull/2326) [`1faefa4`](https://github.com/graphcommerce-org/graphcommerce/commit/1faefa424df1f40e0f7d20def7192cf7752f761e) - Create a 'Third-Party Libraries' page that includes further details on tools such as Google Analytics and Google Tag Manager. ([@carlocarels90](https://github.com/carlocarels90))
8
+
3
9
  ## 9.0.0-canary.61
4
10
 
5
11
  ## 9.0.0-canary.60
package/framework/google-gtm.md ADDED
@@ -0,0 +1,143 @@
1
+ ---
2
+ menu: Google TagManager / Analytics
3
+ ---
4
+
5
+ # Google Libraries
6
+
7
+ GraphCommerce integrates with Google Analytics and Google Tagmanager and offers
8
+ a generic Datalayer solution that can be used for other analytics tools.
9
+
10
+ ---
11
+
12
+ - [Google Analytics](#google-analytics)
13
+ - [Google Tag Manager](#google-tag-manager)
14
+ - [Google Datalayer](#datalayer)
15
+ - [Google Recapatcha](#core)
16
+
17
+ ---
18
+
19
+ ## Google TagManager
20
+
21
+ The `@graphcommerce/googletagmanager` package makes it easy to add **Google Tag
22
+ Manager (GTM)** to your GraphCommerce webshop.
23
+
24
+ 1. **Install the Package:** Ensure you have installed the
25
+ `@graphcommerce/googleanalytics` package.
26
+ 2. **Configuration:** Add the following configuration values in your
27
+ `graphcommerce.config.js`:
28
+
29
+ ```js
30
+ // graphcommerce.config.js
31
+ const config = {
32
+ googleTagmanagerId: 'GTM-X1X1X1X',
33
+
34
+ storefront: [
35
+ { locale: 'en', magentoStoreCode: 'en_US', defaultLocale: true },
36
+ {
37
+ locale: 'nl',
38
+ magentoStoreCode: 'nl_NL',
39
+ googleTagmanagerId: 'GTM-X2X2X2X', // Optionally override per storeview
40
+ },
41
+ ],
42
+ }
43
+ ```
44
+
45
+ 3. **GTM Setup:** Ensure you have set up your GTM account and container. Refer
46
+ to the
47
+ [official GTM documentation](https://developers.google.com/tag-manager/quickstart)
48
+ for initial setup steps.
49
+ 4. [Configure Google analytics](#configure-google-analytics)
50
+
51
+ ## Google Analytics
52
+
53
+ The `@graphcommerce/googleanalytics` package makes it easy to add Google
54
+ Analytics GA4 to your GraphCommerce webshop.
55
+
56
+ ### Installation
57
+
58
+ To use this package, follow these steps:
59
+
60
+ 1. **Install the Package:** Ensure you have installed the
61
+ `@graphcommerce/googleanalytics` package.
62
+ 2. **Configuration:** Add the following configuration values in your
63
+ `graphcommerce.config.js`:
64
+
65
+ ```js
66
+ // graphcommerce.config.js
67
+ const config = {
68
+ googleAnalyticsId: 'GTM-X1X1X1X',
69
+
70
+ storefront: [
71
+ { locale: 'en', magentoStoreCode: 'en_US', defaultLocale: true },
72
+ {
73
+ locale: 'nl',
74
+ magentoStoreCode: 'nl_NL',
75
+ googleAnalyticsId: 'GTM-X2X2X2X', // Optionally override per storeview
76
+ },
77
+ ],
78
+ }
79
+ ```
80
+
81
+ ### Configure Google analytics
82
+
83
+ Configure the `Page changes based on browser history events.` in Google
84
+ Analytics. Refer to the
85
+ [official documentation](https://developers.google.com/analytics/devguides/collection/ga4/single-page-applications?implementation=browser-history#implement_single-page_application_measurement)
86
+ for more details.
87
+
88
+ ## Datalayer
89
+
90
+ ### Supported Events
91
+
92
+ The following events are supported by default in GraphCommerce:
93
+
94
+ - `add_to_cart`
95
+ - `add_to_cart_error` (custom)
96
+ - `view_cart`
97
+ - `begin_checkout`
98
+ - `add_payment_info`
99
+ - `purchase`
100
+ - `view_item_list`
101
+ - `select_item`
102
+ - `remove_from_cart`
103
+ - `add_shipping_info`
104
+ - `remove_from_cart`
105
+ - `view_item`
106
+ - `cwv_* metrics`
107
+
108
+ ### Core web vitals
109
+
110
+ Enable core web vitals tracking.
111
+
112
+ ```js
113
+ const confog = {
114
+ dataLayer: { coreWebVitals: true },
115
+ }
116
+ ```
117
+
118
+ ## Google Recaptcha
119
+
120
+ 1. **Install the Package:** Ensure you have installed the
121
+ `@graphcommerce/googleanalytics` package.
122
+ 2. **Configuration:** Add the following configuration values in your
123
+ `graphcommerce.config.js`:
124
+
125
+ ```js
126
+ // graphcommerce.config.js
127
+ const config = {
128
+ googleRecaptchaKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
129
+
130
+ storefront: [
131
+ { locale: 'en', magentoStoreCode: 'en_US', defaultLocale: true },
132
+ {
133
+ locale: 'nl',
134
+ magentoStoreCode: 'nl_NL',
135
+ googleRecaptchaKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', // Optionally override per storeview
136
+ },
137
+ ],
138
+ }
139
+ ```
140
+
141
+ ## Next Steps
142
+
143
+ - Learn about [Translations](../framework/translations.md) in GraphCommerce
package/package.json CHANGED
@@ -2,10 +2,10 @@
2
2
  "name": "@graphcommerce/docs",
3
3
  "homepage": "https://www.graphcommerce.org/docs",
4
4
  "repository": "github:graphcommerce-org/graphcommerce/docs",
5
- "version": "9.0.0-canary.61",
5
+ "version": "9.0.0-canary.62",
6
6
  "sideEffects": true,
7
7
  "peerDependencies": {
8
- "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.61"
8
+ "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.62"
9
9
  },
10
10
  "prettier": "@graphcommerce/prettier-config-pwa"
11
11
  }