tatvic-implementation-sdk 0.0.0-stage → 1.0.1
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.
- package/README.md +102 -2
- package/dist/bundle.d.ts +3 -0
- package/dist/custom-element.d.ts +17 -0
- package/dist/defaults.d.ts +13 -0
- package/dist/express.d.ts +28 -0
- package/dist/index.d.ts +28 -0
- package/dist/index.js +871 -0
- package/dist/interceptor.d.ts +58 -0
- package/dist/morph-gtm.d.ts +7 -0
- package/dist/next.d.ts +16 -0
- package/dist/react.d.ts +26 -0
- package/dist/server-proxy.d.ts +7 -0
- package/dist/tatvic.js +13 -0
- package/dist/types.d.ts +103 -0
- package/dist/url-matcher.d.ts +30 -0
- package/package.json +69 -4
package/README.md
CHANGED
|
@@ -1,3 +1,103 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Tatvic Universal First-Party App Wrapper & Morphed GTM Loader
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A zero-configuration, universal wrapper that converts all third-party analytics and tracking requests into **first-party requests**, preventing client-side ad blockers (like Brave Shields, uBlock Origin, and AdGuard) from blocking them.
|
|
4
|
+
|
|
5
|
+
> 📖 **Looking for a deep-dive, framework-agnostic developer guide?**
|
|
6
|
+
> See the [Comprehensive Framework-Agnostic Developer Integration Guide (Normal vs. Server-Side sGTM)](./docs/INTEGRATION_GUIDE.md).
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## 🎯 The Problem Solved
|
|
11
|
+
|
|
12
|
+
Standard Google Tag Manager scripts request `https://www.googletagmanager.com/gtm.js`. Ad blockers immediately flag and block this request:
|
|
13
|
+
1. `googletagmanager.com/gtm.js` is blocked at the network layer.
|
|
14
|
+
2. Internal Google endpoints (`adservice.google.com`, `doubleclick.net`, `google-analytics.com`) called inside the container are blocked.
|
|
15
|
+
|
|
16
|
+
### The Solution: Morphed First-Party Loader
|
|
17
|
+
This SDK introduces a **Morphed First-Party GTM Loader** (`/_tatvic/gtm.js`):
|
|
18
|
+
1. **First-Party Script Delivery:** Loads `gtm.js` from your own domain (`/_tatvic/gtm.js?id=GTM-XXXX`).
|
|
19
|
+
2. **AST / Endpoint Morphing:** The server fetches Google's container server-to-server and dynamically rewrites internal tracking endpoints to route through your first-party relay (`/_tatvic/relay`).
|
|
20
|
+
3. **Preserves Tag Assistant Preview & Debug Mode:**
|
|
21
|
+
- Detects `gtm_debug`, `gtm_auth`, `gtm_preview`, and `gtm_cookies_win` parameters.
|
|
22
|
+
- Forwards them upstream so Google serves the workspace draft container.
|
|
23
|
+
- Bypasses caching in debug mode (`Cache-Control: no-cache, no-store`).
|
|
24
|
+
- Keeps `tagassistant.google.com` postMessage handshake intact so Tag Assistant connects instantly.
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## 🚀 Usage
|
|
29
|
+
|
|
30
|
+
### 1. Plain HTML / PHP / WordPress
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
<!-- 1. Load Tatvic Standalone Script in <head> -->
|
|
34
|
+
<script src="/dist/tatvic.js"></script>
|
|
35
|
+
|
|
36
|
+
<!-- 2. Wrap your entire application -->
|
|
37
|
+
<tatvic-wrapper>
|
|
38
|
+
<!-- Morphed First-Party GTM Script (Zero Shields block!) -->
|
|
39
|
+
<script async src="/_tatvic/gtm.js?id=GTM-T32XGF8F"></script>
|
|
40
|
+
<script>
|
|
41
|
+
window.dataLayer = window.dataLayer || [];
|
|
42
|
+
function gtag(){dataLayer.push(arguments);}
|
|
43
|
+
gtag('js', new Date());
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<!-- Your app code and buttons -->
|
|
47
|
+
</tatvic-wrapper>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
> **Note:** If you keep the original Google URL `<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-T32XGF8F"></script>`, `<tatvic-wrapper>` will automatically intercept and morph it to `/_tatvic/gtm.js` at runtime!
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
### 2. React (Vite / CRA / Remix)
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
import { TatvicWrapper } from 'tatvic-implementation-sdk';
|
|
58
|
+
|
|
59
|
+
export default function Root() {
|
|
60
|
+
return (
|
|
61
|
+
<TatvicWrapper>
|
|
62
|
+
<App />
|
|
63
|
+
</TatvicWrapper>
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
### 3. Next.js (App Router)
|
|
71
|
+
|
|
72
|
+
In `app/layout.tsx`:
|
|
73
|
+
```tsx
|
|
74
|
+
import { TatvicWrapper } from 'tatvic-implementation-sdk';
|
|
75
|
+
|
|
76
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
77
|
+
return (
|
|
78
|
+
<html lang="en">
|
|
79
|
+
<head>
|
|
80
|
+
<script async src="/_tatvic/gtm.js?id=GTM-T32XGF8F" />
|
|
81
|
+
</head>
|
|
82
|
+
<body>
|
|
83
|
+
<TatvicWrapper>
|
|
84
|
+
{children}
|
|
85
|
+
</TatvicWrapper>
|
|
86
|
+
</body>
|
|
87
|
+
</html>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
In `app/_tatvic/[...path]/route.ts` or `app/_tatvic/relay/route.ts`:
|
|
93
|
+
```typescript
|
|
94
|
+
import { tatvicRelayRoute } from 'tatvic-implementation-sdk';
|
|
95
|
+
export const { GET, POST, OPTIONS } = tatvicRelayRoute();
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
### 4. Server-Side Morphed GTM Endpoints
|
|
101
|
+
|
|
102
|
+
* **Node / Express / Bun:** Handled automatically by `createProxyHandler()` and `tatvicExpressMiddleware()`.
|
|
103
|
+
* **PHP / WordPress:** Handled automatically by [`src/php/tatvic-proxy.php`](file:///home/jimitchavda/Jotaro/bakhodi/tatvic-implementation-sdk/src/php/tatvic-proxy.php).
|
package/dist/bundle.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
declare const TatvicWrapperElement_base: {
|
|
2
|
+
new (): HTMLElement;
|
|
3
|
+
prototype: HTMLElement;
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* Standard Web Component: <tatvic-wrapper>
|
|
7
|
+
*
|
|
8
|
+
* Allows wrapping the entire application in any framework or plain HTML/PHP:
|
|
9
|
+
*
|
|
10
|
+
* <tatvic-wrapper>
|
|
11
|
+
* <app>...</app>
|
|
12
|
+
* </tatvic-wrapper>
|
|
13
|
+
*/
|
|
14
|
+
export declare class TatvicWrapperElement extends TatvicWrapperElement_base {
|
|
15
|
+
connectedCallback(): void;
|
|
16
|
+
}
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Comprehensive pre-configured lists for zero-configuration setup.
|
|
3
|
+
*/
|
|
4
|
+
export declare const DEFAULT_PROXY_ENDPOINT = "/_tatvic/relay";
|
|
5
|
+
export declare const DEFAULT_HEADER_NAME = "x-tatvic-target";
|
|
6
|
+
/**
|
|
7
|
+
* Pre-configured list of all major third-party tracking, analytics, and advertising domains.
|
|
8
|
+
*/
|
|
9
|
+
export declare const DEFAULT_TARGET_DOMAINS: (string | RegExp)[];
|
|
10
|
+
/**
|
|
11
|
+
* Sensitive services that must NEVER be intercepted (payment, auth, core cloud).
|
|
12
|
+
*/
|
|
13
|
+
export declare const DEFAULT_EXCLUDE_DOMAINS: (string | RegExp)[];
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { ServerProxyOptions } from './types.js';
|
|
2
|
+
interface ExpressLikeRequest {
|
|
3
|
+
method: string;
|
|
4
|
+
url?: string;
|
|
5
|
+
originalUrl?: string;
|
|
6
|
+
headers: Record<string, string | string[] | undefined>;
|
|
7
|
+
body?: any;
|
|
8
|
+
}
|
|
9
|
+
interface ExpressLikeResponse {
|
|
10
|
+
status(code: number): this;
|
|
11
|
+
setHeader(name: string, value: string): this;
|
|
12
|
+
end(chunk?: any): void;
|
|
13
|
+
send(body?: any): void;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Express / Connect / Node.js middleware for the Tatvic First-Party Relay.
|
|
17
|
+
*
|
|
18
|
+
* Usage:
|
|
19
|
+
* ```typescript
|
|
20
|
+
* import express from 'express';
|
|
21
|
+
* import { tatvicExpressMiddleware } from 'tatvic-implementation-sdk/express';
|
|
22
|
+
*
|
|
23
|
+
* const app = express();
|
|
24
|
+
* app.use('/_tatvic/relay', tatvicExpressMiddleware());
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
export declare function tatvicExpressMiddleware(options?: ServerProxyOptions): (req: ExpressLikeRequest, res: ExpressLikeResponse, next?: (err?: any) => void) => Promise<void>;
|
|
28
|
+
export {};
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { RequestInterceptor } from './interceptor.js';
|
|
2
|
+
import type { ProxySdkOptions } from './types.js';
|
|
3
|
+
export * from './types.js';
|
|
4
|
+
export * from './defaults.js';
|
|
5
|
+
export * from './url-matcher.js';
|
|
6
|
+
export * from './interceptor.js';
|
|
7
|
+
export * from './server-proxy.js';
|
|
8
|
+
export * from './morph-gtm.js';
|
|
9
|
+
export * from './custom-element.js';
|
|
10
|
+
export * from './react.js';
|
|
11
|
+
export * from './next.js';
|
|
12
|
+
export * from './express.js';
|
|
13
|
+
/**
|
|
14
|
+
* Initialize the First-Party Request Wrapper SDK.
|
|
15
|
+
*
|
|
16
|
+
* Intercepts outgoing tracking/analytics requests (fetch, XMLHttpRequest, sendBeacon)
|
|
17
|
+
* and transparently routes them to your first-party relay endpoint.
|
|
18
|
+
*
|
|
19
|
+
* Zero-config: All standard analytics/tracking domains are enabled by default.
|
|
20
|
+
*
|
|
21
|
+
* @param options Configuration options (optional)
|
|
22
|
+
* @returns The active RequestInterceptor instance.
|
|
23
|
+
*/
|
|
24
|
+
export declare function initFirstPartyWrapper(options?: ProxySdkOptions): RequestInterceptor;
|
|
25
|
+
/**
|
|
26
|
+
* Restore original native browser APIs and uninstall the wrapper.
|
|
27
|
+
*/
|
|
28
|
+
export declare function uninstallFirstPartyWrapper(): void;
|