@liquidcommerce/elements-sdk 2.7.39 → 2.7.40

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.
@@ -19,6 +19,7 @@ export declare const SHARED_ATTR: {
19
19
  readonly PROMO_CODE_PARAM: "data-promo-code-param";
20
20
  readonly CHECKOUT_PARAM: "data-checkout-param";
21
21
  readonly CHECKOUT_URL: "data-checkout-url";
22
+ readonly GTM_GATEWAY_URL: "data-gtm-gateway-url";
22
23
  };
23
24
  readonly ELEMENT: {
24
25
  readonly CHECKOUT: "data-lce-checkout";
@@ -1,5 +1,5 @@
1
1
  import { type DebugMode, type ElementsEnv } from '@/enums';
2
- import type { IClientCustomThemeConfig, IElementsProxyConfig, ILiquidCommerceElementsCheckoutConfig } from '@/interfaces/config.interface';
2
+ import type { IClientCustomThemeConfig, IElementsGTMConfig, IElementsProxyConfig, ILiquidCommerceElementsCheckoutConfig } from '@/interfaces/config.interface';
3
3
  import type { IPromoTicker } from '@/interfaces/configs';
4
4
  export type DeviceType = 'desktop' | 'tablet' | 'mobile';
5
5
  export interface IClientConfigs {
@@ -12,6 +12,7 @@ export interface IClientConfigs {
12
12
  partnerName?: string;
13
13
  customTheme: IClientCustomThemeConfig | null;
14
14
  proxy: IElementsProxyConfig | null;
15
+ gtm: IElementsGTMConfig | null;
15
16
  deviceType: DeviceType;
16
17
  userDeviceId?: string;
17
18
  localStorageKeyPrefix?: string;
@@ -31,6 +32,7 @@ export interface IClientConfigInput {
31
32
  debugMode?: DebugMode;
32
33
  customTheme?: IClientCustomThemeConfig;
33
34
  proxy?: IElementsProxyConfig;
35
+ gtm?: IElementsGTMConfig;
34
36
  promoTicker?: IPromoTicker[];
35
37
  development?: {
36
38
  customApiUrl?: string;
@@ -51,6 +51,7 @@ export declare class GoogleTagManagerService {
51
51
  private partnerName?;
52
52
  private partnerCode?;
53
53
  private partnerGTMId?;
54
+ private partnerGatewayUrl?;
54
55
  private liquidCommerceGTMId?;
55
56
  private enablePartnerGTM;
56
57
  private enableLiquidCommerceGTM;
@@ -67,6 +68,12 @@ export declare class GoogleTagManagerService {
67
68
  private waitForDOMReady;
68
69
  private isGTMAlreadyLoaded;
69
70
  private isContainerLoaded;
71
+ private isGatewayScriptForContainer;
72
+ private getPartnerGatewayScripts;
73
+ private parseScriptUrl;
74
+ private resolveGatewayUrl;
75
+ private getContainerRegistry;
76
+ private isContainerRegistered;
70
77
  private isContainerInitialized;
71
78
  private loadGTMScript;
72
79
  private waitForContainerInit;
@@ -7,6 +7,9 @@ export interface IElementsProxyConfig {
7
7
  baseUrl: string;
8
8
  headers?: Record<string, string>;
9
9
  }
10
+ export interface IElementsGTMConfig {
11
+ gatewayUrl?: string;
12
+ }
10
13
  export interface ILiquidCommerceElementsDevelopmentConfig {
11
14
  customApiUrl?: string;
12
15
  openShadowDom?: boolean;
@@ -30,6 +33,7 @@ export interface ILiquidCommerceElementsBaseConfig {
30
33
  debugMode?: DebugMode;
31
34
  checkout?: ILiquidCommerceElementsCheckoutConfig;
32
35
  proxy?: IElementsProxyConfig;
36
+ gtm?: IElementsGTMConfig;
33
37
  development?: ILiquidCommerceElementsDevelopmentConfig;
34
38
  }
35
39
  export interface ILiquidCommerceElementsBuilderConfig extends ILiquidCommerceElementsBaseConfig {
@@ -4,5 +4,5 @@ export declare class CheckoutProp65WarningComponent extends BaseComponent<null,
4
4
  constructor();
5
5
  get hostClasses(): string[];
6
6
  private colorMode;
7
- protected template(): HTMLElement;
7
+ protected template(): HTMLElement | HTMLElement[];
8
8
  }
@@ -3,7 +3,7 @@ export type { CartEventLevel, CartEventType, CheckoutEventLevel, CheckoutEventTy
3
3
  export { CART_EVENT_LEVEL, CART_EVENT_TYPE, CHECKOUT_EVENT_LEVEL, CHECKOUT_EVENT_TYPE, COMPONENT_TYPE, DEBUG_MODE, DISPLAY_MODE, ELEMENTS_ACTIONS_EVENT, ELEMENTS_ENV, ELEMENTS_FORM, FULFILLMENT_TYPE, NAVIGATION_SOURCE, } from '../enums/core.enum';
4
4
  export type { ILiquidCommerceElementsActions, ILiquidCommerceElementsBuilderClient, ILiquidCommerceElementsClient, } from '../interfaces/client.interface';
5
5
  export type { IInjectedComponent } from '../interfaces/component.interface';
6
- export type { IElementsProxyConfig, ILiquidCommerceElementsBuilderConfig, ILiquidCommerceElementsCheckoutConfig, ILiquidCommerceElementsConfig, ILiquidCommerceElementsDevelopmentConfig, } from '../interfaces/config.interface';
6
+ export type { IElementsGTMConfig, IElementsProxyConfig, ILiquidCommerceElementsBuilderConfig, ILiquidCommerceElementsCheckoutConfig, ILiquidCommerceElementsConfig, ILiquidCommerceElementsDevelopmentConfig, } from '../interfaces/config.interface';
7
7
  export type * from '../interfaces/configs';
8
8
  export type { IBuilderInjectElementParams, IInjectCheckoutBuilderParams, IInjectCheckoutParams, IInjectProductElement, IInjectProductListFiltersParams, IInjectProductListParams, IInjectProductListSearchParams, ProductListFilterType, } from '../interfaces/injection.interface';
9
9
  export declare function Elements(..._args: any[]): Promise<null>;
@@ -108,6 +108,7 @@ interface ILiquidCommerceElementsConfig {
108
108
  customTheme?: IClientCustomThemeConfig;
109
109
  promoTicker?: IPromoTicker[];
110
110
  proxy?: IElementsProxyConfig;
111
+ gtm?: IElementsGTMConfig;
111
112
  checkout?: ILiquidCommerceElementsCheckoutConfig;
112
113
  development?: ILiquidCommerceElementsDevelopmentConfig;
113
114
  }
@@ -192,6 +193,24 @@ proxy: {
192
193
 
193
194
  See [Proxy Setup Guide](../integration/proxy-setup.md) for implementation.
194
195
 
196
+ #### GTM Configuration
197
+
198
+ ```typescript
199
+ interface IElementsGTMConfig {
200
+ gatewayUrl?: string;
201
+ }
202
+ ```
203
+
204
+ **Example:**
205
+
206
+ ```javascript
207
+ gtm: {
208
+ gatewayUrl: 'https://www.yoursite.com/metrics/'
209
+ }
210
+ ```
211
+
212
+ Set this when your site serves its own GTM container through Google tag gateway. See [Analytics → Google tag gateway](../reference/analytics.md#google-tag-gateway).
213
+
195
214
  #### Checkout Configuration
196
215
 
197
216
  ```typescript
@@ -16,6 +16,7 @@ interface ILiquidCommerceElementsConfig {
16
16
  debugMode?: DebugMode;
17
17
  checkout?: ILiquidCommerceElementsCheckoutConfig;
18
18
  proxy?: IElementsProxyConfig;
19
+ gtm?: IElementsGTMConfig;
19
20
  development?: ILiquidCommerceElementsDevelopmentConfig;
20
21
  }
21
22
  ```
@@ -28,6 +29,7 @@ interface ILiquidCommerceElementsConfig {
28
29
  | `debugMode` | `'none' \| 'console' \| 'panel'` | No | Debug output mode |
29
30
  | `checkout` | `ILiquidCommerceElementsCheckoutConfig` | No | Checkout behavior settings |
30
31
  | `proxy` | `IElementsProxyConfig` | No | Proxy configuration for API requests |
32
+ | `gtm` | `IElementsGTMConfig` | No | Google tag gateway URL of your own GTM container |
31
33
  | `development` | `ILiquidCommerceElementsDevelopmentConfig` | No | Development/testing options |
32
34
 
33
35
  > **Note:** `debugMode` (`'console'` or `'panel'`) is **ignored in production** -- it is forced off when `env` is `'production'`. It only takes effect outside production (`'staging'`).
@@ -530,6 +532,22 @@ See [Proxy Setup Guide](../integration/proxy-setup.md) for implementation detail
530
532
 
531
533
  ---
532
534
 
535
+ ## GTM Configuration
536
+
537
+ ### IElementsGTMConfig
538
+
539
+ ```typescript
540
+ interface IElementsGTMConfig {
541
+ gatewayUrl?: string;
542
+ }
543
+ ```
544
+
545
+ If your site loads its own GTM container through Google tag gateway for advertisers, set `gatewayUrl` to that first-party path (e.g. `'https://www.yoursite.com/metrics/'` or `'/metrics/'`) so the SDK recognizes the container instead of treating the page as having none. Declarative equivalent: `data-gtm-gateway-url`. An empty or non-string value drops the whole `gtm` config with a console warning.
546
+
547
+ See [Analytics → Google tag gateway](../reference/analytics.md#google-tag-gateway).
548
+
549
+ ---
550
+
533
551
  ## Development Configuration
534
552
 
535
553
  ### ILiquidCommerceElementsDevelopmentConfig
@@ -99,6 +99,7 @@ interface ILiquidCommerceElementsConfig {
99
99
  debugMode?: DebugMode;
100
100
  checkout?: ILiquidCommerceElementsCheckoutConfig;
101
101
  proxy?: IElementsProxyConfig;
102
+ gtm?: IElementsGTMConfig;
102
103
  development?: ILiquidCommerceElementsDevelopmentConfig;
103
104
  }
104
105
  ```
@@ -133,6 +134,16 @@ interface IElementsProxyConfig {
133
134
  }
134
135
  ```
135
136
 
137
+ ### IElementsGTMConfig
138
+
139
+ ```typescript
140
+ interface IElementsGTMConfig {
141
+ gatewayUrl?: string;
142
+ }
143
+ ```
144
+
145
+ `gatewayUrl` is the Google tag gateway path your own GTM container is served from (see [Analytics → Google tag gateway](../reference/analytics.md#google-tag-gateway)).
146
+
136
147
  ### ILiquidCommerceElementsDevelopmentConfig
137
148
 
138
149
  ```typescript
@@ -47,6 +47,7 @@ The path segment selects which bundle is served:
47
47
  | `data-liquid-commerce-elements` | Yes | Identifies this as the Elements SDK script |
48
48
  | `data-token` | Yes | Your LiquidCommerce API key |
49
49
  | `data-env` | No | Environment: `staging` or `production`. Defaults to `production` if omitted. |
50
+ | `data-gtm-gateway-url` | No | Google tag gateway path your own GTM container is served from (e.g. `/metrics/`). See [Analytics → Google tag gateway](../reference/analytics.md#google-tag-gateway). |
50
51
  | `defer` | Recommended | Allows non-blocking script loading |
51
52
 
52
53
  ### Where to Place the Script
@@ -269,6 +270,7 @@ const client = await Elements('YOUR_API_KEY', {
269
270
  customTheme: { /* ... */ }, // Optional: Theme customization
270
271
  promoTicker: [ /* ... */ ], // Optional: Promo ticker configuration
271
272
  proxy: { /* ... */ }, // Optional: Proxy configuration
273
+ gtm: { /* ... */ }, // Optional: Google tag gateway URL of your own GTM container
272
274
  checkout: { /* ... */ }, // Optional: Checkout configuration
273
275
  development: { /* ... */ } // Optional: Development/testing options
274
276
  });
@@ -454,16 +454,16 @@ window.addEventListener('lce:actions.checkout_product_add_failed', (event) => {
454
454
 
455
455
  ## California Proposition 65 Warning
456
456
 
457
- The order summary shows a panel directly above the place-order button reading **Adult signature
458
- (21+) required at delivery.** When the shipping address is in California, the panel adds
457
+ When the shipping address is in California, the order summary shows a panel directly above the
458
+ place-order button reading **Adult signature (21+) required at delivery.** followed by
459
459
  **CA WARNING · California Proposition 65 information for these products**, so the warning is
460
460
  presented before the purchase completes. The text links to the OEHHA alcohol page,
461
461
  [www.P65Warnings.ca.gov/alcohol](https://www.p65warnings.ca.gov/alcohol), in a new tab. The full
462
462
  27 CCR § 25607.4 text is on the product element.
463
463
 
464
464
  The panel appears in the drawer checkout, the hosted checkout and the checkout-only build. The
465
- adult-signature notice is always shown; the Prop 65 line follows the shipping address's state and
466
- updates when the address changes. Neither can be turned off or reworded by configuration. Its colours follow `global.layout.poweredByMode` — the same
465
+ whole panel, adult-signature notice included, is shown only for a California shipping address; it
466
+ appears or disappears when the address changes, and nothing renders in its place otherwise. Neither can be turned off or reworded by configuration. Its colours follow `global.layout.poweredByMode` — the same
467
467
  light/dark switch the Stripe payment form uses — as a fixed pair so the copy is always legible:
468
468
  `light` is `#18181B` on `#F5F3EE`, `dark` is `#F5F3EE` on `#2A2824`. The font and corner radius come
469
469
  from your theme. If your checkout is dark, set `poweredByMode: 'dark'`.
@@ -48,7 +48,21 @@ Events fired before GTM finishes initializing are queued (up to 100, oldest drop
48
48
 
49
49
  ## Coexisting With Your Own GTM
50
50
 
51
- The SDK detects an already-present partner/host GTM container rather than replacing it. When a host GTM install (an existing `gtag` function or an existing `googletagmanager.com/gtm.js` script tag) is detected, the SDK integrates with it.
51
+ The SDK detects an already-present partner/host GTM container rather than replacing it. When a host GTM install (an existing `gtag` function, an existing `googletagmanager.com/gtm.js` script tag, or a script served from your configured Google tag gateway) is detected, the SDK integrates with it. A container that has booted is also recognized through GTM's own `window.google_tag_manager[containerId]` registry, whichever host served it.
52
+
53
+ ### Google tag gateway
54
+
55
+ If your site loads its own GTM container first-party through [Google tag gateway for advertisers](https://developers.google.com/tag-platform/tag-manager/gateway/get-started) (e.g. `https://www.yoursite.com/metrics/` instead of `https://www.googletagmanager.com/gtm.js?id=GTM-XXXX`), tell the SDK where that path is so it recognizes your container:
56
+
57
+ ```javascript
58
+ const client = await Elements('YOUR_API_KEY', {
59
+ gtm: { gatewayUrl: 'https://www.yoursite.com/metrics/' }, // or '/metrics/'
60
+ });
61
+ ```
62
+
63
+ Or declaratively, on the script tag: `data-gtm-gateway-url="/metrics/"`.
64
+
65
+ A gateway script URL usually carries no container ID, so without this setting the SDK cannot match the script tag to your partner container. A script with the same origin whose path starts with that value is matched to your partner container by container ID: an `id=` query parameter must equal your partner container ID, and a script without one counts only once GTM's `window.google_tag_manager` registry lists your container ID (or while no container has booted yet). A gateway serving a different container or a GA4/Ads tag is therefore never taken for yours. Relative values resolve against the current page. The setting affects detection only — the SDK never loads your container, and the LiquidCommerce container still loads from `googletagmanager.com`.
52
66
 
53
67
  When both the LiquidCommerce container and a partner container are initialized, events are sent to both using GA4's `send_to` targeting (a dual-container send). Only containers that are actually initialized are added to `send_to`, so events are never routed to a container that failed to load.
54
68
 
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "LiquidCommerce Elements SDK",
4
4
  "license": "UNLICENSED",
5
5
  "author": "LiquidCommerce Team",
6
- "version": "2.7.39",
6
+ "version": "2.7.40",
7
7
  "homepage": "https://docs.liquidcommerce.co/elements-sdk",
8
8
  "repository": {
9
9
  "type": "git",
@@ -122,22 +122,22 @@
122
122
  "@semantic-release/changelog": "^7.0.0",
123
123
  "@semantic-release/commit-analyzer": "^13.0.1",
124
124
  "@semantic-release/git": "^11.0.1",
125
- "@semantic-release/github": "^12.0.9",
126
- "@semantic-release/npm": "^13.1.5",
125
+ "@semantic-release/github": "^12.0.10",
126
+ "@semantic-release/npm": "^13.2.0",
127
127
  "@semantic-release/release-notes-generator": "^14.1.1",
128
128
  "@types/core-js": "^2.5.8",
129
- "@types/node": "^26.6.2",
129
+ "@types/node": "^26.6.3",
130
130
  "conventional-changelog": "8.1.3",
131
131
  "husky": "^9.1.7",
132
- "jsdom": "30.1.0",
132
+ "jsdom": "30.1.1",
133
133
  "process": "^0.11.10",
134
- "rollup": "^4.63.4",
134
+ "rollup": "^4.63.5",
135
135
  "rollup-obfuscator": "^4.1.1",
136
136
  "rollup-plugin-typescript2": "^0.37.0",
137
137
  "semantic-release": "^25.0.9",
138
138
  "ts-node": "^10.9.2",
139
139
  "typescript": "6.0.3",
140
- "vitest": "5.0.1"
140
+ "vitest": "5.0.2"
141
141
  },
142
142
  "engines": {
143
143
  "node": ">=22"