@faskai/ui-commons 0.0.0-alpha.3 → 0.0.0-alpha.4
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.
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
declare global {
|
|
3
|
+
interface Window {
|
|
4
|
+
dataLayer: any[];
|
|
5
|
+
gtag: (...args: any[]) => void;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
interface GTMProviderProps {
|
|
9
|
+
gtmId: string;
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
environment?: 'development' | 'production';
|
|
12
|
+
}
|
|
13
|
+
export declare function GTMProvider({ gtmId, children, environment }: GTMProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare function trackEvent(eventName: string, parameters?: Record<string, any>): void;
|
|
15
|
+
export declare function trackConversion(conversionId: string, conversionLabel?: string, value?: number): void;
|
|
16
|
+
export declare function trackLinkedInConversion(conversionId: string, value?: number): void;
|
|
17
|
+
export declare function trackLinkedInLead(): void;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.GTMProvider = GTMProvider;
|
|
4
|
+
exports.trackEvent = trackEvent;
|
|
5
|
+
exports.trackConversion = trackConversion;
|
|
6
|
+
exports.trackLinkedInConversion = trackLinkedInConversion;
|
|
7
|
+
exports.trackLinkedInLead = trackLinkedInLead;
|
|
8
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
+
const react_1 = require("react");
|
|
10
|
+
function GTMProvider({ gtmId, children, environment = 'production' }) {
|
|
11
|
+
(0, react_1.useEffect)(() => {
|
|
12
|
+
// Initialize dataLayer
|
|
13
|
+
window.dataLayer = window.dataLayer || [];
|
|
14
|
+
// Load GTM script
|
|
15
|
+
const script = document.createElement('script');
|
|
16
|
+
script.innerHTML = `
|
|
17
|
+
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
18
|
+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
19
|
+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
20
|
+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
21
|
+
})(window,document,'script','dataLayer','${gtmId}');
|
|
22
|
+
`;
|
|
23
|
+
document.head.appendChild(script);
|
|
24
|
+
// Add noscript iframe
|
|
25
|
+
const noscript = document.createElement('noscript');
|
|
26
|
+
const iframe = document.createElement('iframe');
|
|
27
|
+
iframe.src = `https://www.googletagmanager.com/ns.html?id=${gtmId}`;
|
|
28
|
+
iframe.height = '0';
|
|
29
|
+
iframe.width = '0';
|
|
30
|
+
iframe.style.display = 'none';
|
|
31
|
+
iframe.style.visibility = 'hidden';
|
|
32
|
+
noscript.appendChild(iframe);
|
|
33
|
+
document.body.insertBefore(noscript, document.body.firstChild);
|
|
34
|
+
return () => {
|
|
35
|
+
// Cleanup
|
|
36
|
+
if (script.parentNode) {
|
|
37
|
+
script.parentNode.removeChild(script);
|
|
38
|
+
}
|
|
39
|
+
if (noscript.parentNode) {
|
|
40
|
+
noscript.parentNode.removeChild(noscript);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
}, [gtmId]);
|
|
44
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
|
|
45
|
+
}
|
|
46
|
+
// Helper function to track custom events
|
|
47
|
+
function trackEvent(eventName, parameters) {
|
|
48
|
+
if (typeof window !== 'undefined' && window.dataLayer) {
|
|
49
|
+
window.dataLayer.push({
|
|
50
|
+
event: eventName,
|
|
51
|
+
...parameters,
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
// Helper function to track conversions
|
|
56
|
+
function trackConversion(conversionId, conversionLabel, value) {
|
|
57
|
+
if (typeof window !== 'undefined' && window.gtag) {
|
|
58
|
+
window.gtag('event', 'conversion', {
|
|
59
|
+
send_to: conversionLabel ? `${conversionId}/${conversionLabel}` : conversionId,
|
|
60
|
+
value: value,
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
// Helper function to track LinkedIn conversions
|
|
65
|
+
function trackLinkedInConversion(conversionId, value) {
|
|
66
|
+
trackEvent('linkedin_conversion', {
|
|
67
|
+
conversion_id: conversionId,
|
|
68
|
+
value: value,
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
// Helper function to track LinkedIn leads
|
|
72
|
+
function trackLinkedInLead() {
|
|
73
|
+
if (typeof window !== 'undefined') {
|
|
74
|
+
trackEvent('linkedin_lead', {
|
|
75
|
+
page_location: window.location.href,
|
|
76
|
+
page_title: document.title,
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { GTMProvider, trackConversion, trackEvent, trackLinkedInConversion, trackLinkedInLead } from './components/gtm/gtm-provider';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.trackLinkedInLead = exports.trackLinkedInConversion = exports.trackEvent = exports.trackConversion = exports.GTMProvider = void 0;
|
|
4
|
+
var gtm_provider_1 = require("./components/gtm/gtm-provider");
|
|
5
|
+
Object.defineProperty(exports, "GTMProvider", { enumerable: true, get: function () { return gtm_provider_1.GTMProvider; } });
|
|
6
|
+
Object.defineProperty(exports, "trackConversion", { enumerable: true, get: function () { return gtm_provider_1.trackConversion; } });
|
|
7
|
+
Object.defineProperty(exports, "trackEvent", { enumerable: true, get: function () { return gtm_provider_1.trackEvent; } });
|
|
8
|
+
Object.defineProperty(exports, "trackLinkedInConversion", { enumerable: true, get: function () { return gtm_provider_1.trackLinkedInConversion; } });
|
|
9
|
+
Object.defineProperty(exports, "trackLinkedInLead", { enumerable: true, get: function () { return gtm_provider_1.trackLinkedInLead; } });
|
package/package.json
CHANGED