rplus-mini-package 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 +83 -0
- package/dist/index.d.ts +26 -0
- package/dist/rplus-mini-package.js +36 -0
- package/dist/rplus-mini-package.umd.cjs +11 -0
- package/dist/vite.svg +1 -0
- package/package.json +58 -0
package/README.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# rplus-mini-package
|
|
2
|
+
|
|
3
|
+
Library komponen React untuk integrasi Google Analytics 360 (GA360) dan GTM.
|
|
4
|
+
|
|
5
|
+
## Instalasi
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install rplus-mini-package
|
|
9
|
+
# atau
|
|
10
|
+
pnpm add rplus-mini-package
|
|
11
|
+
# atau
|
|
12
|
+
yarn add rplus-mini-package
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Kompatibilitas
|
|
16
|
+
|
|
17
|
+
Package ini kompatibel dengan:
|
|
18
|
+
- **React**: v18.0.0+ atau v19.0.0+
|
|
19
|
+
- **Next.js**: Kompatibel dengan Pages Router dan App Router (Next.js 13, 14, 15+).
|
|
20
|
+
|
|
21
|
+
## Penggunaan
|
|
22
|
+
|
|
23
|
+
### Next.js (App Router)
|
|
24
|
+
|
|
25
|
+
Anda dapat menggunakan komponen ini di dalam `layout.tsx` atau komponen lainnya. Karena komponen ini tidak menggunakan hooks, mereka aman digunakan di Server Components (RSC) tanpa perlu directive `'use client'`.
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
// app/layout.tsx
|
|
29
|
+
import { GA360Script, GA360NoScript } from 'rplus-mini-package';
|
|
30
|
+
|
|
31
|
+
export default function RootLayout({
|
|
32
|
+
children,
|
|
33
|
+
}: {
|
|
34
|
+
children: React.ReactNode
|
|
35
|
+
}) {
|
|
36
|
+
return (
|
|
37
|
+
<html lang="id">
|
|
38
|
+
<head>
|
|
39
|
+
<GA360Script
|
|
40
|
+
pillar="news"
|
|
41
|
+
gtmAuth="YOUR_GTM_AUTH"
|
|
42
|
+
gtm="YOUR_GTM_PREVIEW"
|
|
43
|
+
gtmId="GTM-XXXXXX"
|
|
44
|
+
/>
|
|
45
|
+
</head>
|
|
46
|
+
<body>
|
|
47
|
+
<GA360NoScript
|
|
48
|
+
gtmInitId="GTM-XXXXXX"
|
|
49
|
+
gtmAuth="YOUR_GTM_AUTH"
|
|
50
|
+
gtm="YOUR_GTM_PREVIEW"
|
|
51
|
+
/>
|
|
52
|
+
{children}
|
|
53
|
+
</body>
|
|
54
|
+
</html>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Vite / React SPA
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
// src/App.tsx atau index.html (via component)
|
|
63
|
+
import { GA360Script, GA360NoScript } from 'rplus-mini-package';
|
|
64
|
+
|
|
65
|
+
function App() {
|
|
66
|
+
return (
|
|
67
|
+
<>
|
|
68
|
+
<GA360Script
|
|
69
|
+
pillar="news"
|
|
70
|
+
gtmAuth="..."
|
|
71
|
+
gtm="..."
|
|
72
|
+
gtmId="..."
|
|
73
|
+
/>
|
|
74
|
+
<GA360NoScript
|
|
75
|
+
gtmInitId="..."
|
|
76
|
+
gtmAuth="..."
|
|
77
|
+
gtm="..."
|
|
78
|
+
/>
|
|
79
|
+
{/* Konten aplikasi */}
|
|
80
|
+
</>
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
```
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { JSX } from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
export declare const GA360NoScript: ({ gtmInitId, gtmAuth, gtm }: GA360NoScriptProps) => JSX.Element;
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* NoScript for GA-360 to be placed in <body>
|
|
7
|
+
*/
|
|
8
|
+
declare type GA360NoScriptProps = {
|
|
9
|
+
gtmInitId: string;
|
|
10
|
+
gtmAuth: string;
|
|
11
|
+
gtm: string;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export declare const GA360Script: ({ pillar, gtmAuth, gtm, gtmId, }: GA360ScriptProps) => JSX.Element;
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Script for GA-360 to be placed in <Head>
|
|
18
|
+
*/
|
|
19
|
+
declare type GA360ScriptProps = {
|
|
20
|
+
pillar: string;
|
|
21
|
+
gtmAuth: string;
|
|
22
|
+
gtm: string;
|
|
23
|
+
gtmId: string;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export { }
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
+
const s = ({
|
|
3
|
+
pillar: t,
|
|
4
|
+
gtmAuth: e,
|
|
5
|
+
gtm: a,
|
|
6
|
+
gtmId: r
|
|
7
|
+
}) => /* @__PURE__ */ i(
|
|
8
|
+
"script",
|
|
9
|
+
{
|
|
10
|
+
dangerouslySetInnerHTML: {
|
|
11
|
+
__html: `
|
|
12
|
+
window.dataLayer = window.dataLayer || [];
|
|
13
|
+
window.dataLayer.push({
|
|
14
|
+
'pillar' : "${t}"
|
|
15
|
+
});
|
|
16
|
+
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
17
|
+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
18
|
+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
19
|
+
'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '>m_auth=${e}>m_preview=${a}>m_cookies_win=x';f.parentNode.insertBefore(j,f);
|
|
20
|
+
})(window,document,'script','dataLayer','${r}');
|
|
21
|
+
`
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
), o = ({ gtmInitId: t, gtmAuth: e, gtm: a }) => /* @__PURE__ */ i("noscript", { children: /* @__PURE__ */ i(
|
|
25
|
+
"iframe",
|
|
26
|
+
{
|
|
27
|
+
src: `https://www.googletagmanager.com/ns.html?id=${t}>m_auth=${e}>m_preview=${a}>m_cookies_win=x`,
|
|
28
|
+
height: "0",
|
|
29
|
+
width: "0",
|
|
30
|
+
style: { display: "none", visibility: "hidden" }
|
|
31
|
+
}
|
|
32
|
+
) }, "gtm-noscript");
|
|
33
|
+
export {
|
|
34
|
+
o as GA360NoScript,
|
|
35
|
+
s as GA360Script
|
|
36
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.RplusMiniPackage={},e.jsxRuntime))})(this,(function(e,t){"use strict";const s=({pillar:i,gtmAuth:n,gtm:r,gtmId:o})=>t.jsx("script",{dangerouslySetInnerHTML:{__html:`
|
|
2
|
+
window.dataLayer = window.dataLayer || [];
|
|
3
|
+
window.dataLayer.push({
|
|
4
|
+
'pillar' : "${i}"
|
|
5
|
+
});
|
|
6
|
+
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
7
|
+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
8
|
+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
9
|
+
'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '>m_auth=${n}>m_preview=${r}>m_cookies_win=x';f.parentNode.insertBefore(j,f);
|
|
10
|
+
})(window,document,'script','dataLayer','${o}');
|
|
11
|
+
`}}),a=({gtmInitId:i,gtmAuth:n,gtm:r})=>t.jsx("noscript",{children:t.jsx("iframe",{src:`https://www.googletagmanager.com/ns.html?id=${i}>m_auth=${n}>m_preview=${r}>m_cookies_win=x`,height:"0",width:"0",style:{display:"none",visibility:"hidden"}})},"gtm-noscript");e.GA360NoScript=a,e.GA360Script=s,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/vite.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
package/package.json
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "rplus-mini-package",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Library komponen React untuk integrasi mini component",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/rplus-mini-package.umd.cjs",
|
|
7
|
+
"module": "./dist/rplus-mini-package.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist"
|
|
11
|
+
],
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"import": "./dist/rplus-mini-package.js",
|
|
16
|
+
"require": "./dist/rplus-mini-package.umd.cjs"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"sideEffects": false,
|
|
20
|
+
"author": "",
|
|
21
|
+
"license": "MIT",
|
|
22
|
+
"keywords": [
|
|
23
|
+
"react",
|
|
24
|
+
"nextjs",
|
|
25
|
+
"ga360",
|
|
26
|
+
"gtm",
|
|
27
|
+
"analytics",
|
|
28
|
+
"google-analytics"
|
|
29
|
+
],
|
|
30
|
+
"scripts": {
|
|
31
|
+
"dev": "vite",
|
|
32
|
+
"build": "tsc -b && vite build",
|
|
33
|
+
"lint": "eslint .",
|
|
34
|
+
"preview": "vite preview",
|
|
35
|
+
"prepublishOnly": "npm run build"
|
|
36
|
+
},
|
|
37
|
+
"peerDependencies": {
|
|
38
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
39
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
40
|
+
},
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"react": "^19.2.0",
|
|
43
|
+
"react-dom": "^19.2.0",
|
|
44
|
+
"@eslint/js": "^9.39.1",
|
|
45
|
+
"@types/node": "^24.10.1",
|
|
46
|
+
"@types/react": "^19.2.5",
|
|
47
|
+
"@types/react-dom": "^19.2.3",
|
|
48
|
+
"@vitejs/plugin-react": "^5.1.1",
|
|
49
|
+
"eslint": "^9.39.1",
|
|
50
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
51
|
+
"eslint-plugin-react-refresh": "^0.4.24",
|
|
52
|
+
"globals": "^16.5.0",
|
|
53
|
+
"typescript": "~5.9.3",
|
|
54
|
+
"typescript-eslint": "^8.46.4",
|
|
55
|
+
"vite": "^7.2.4",
|
|
56
|
+
"vite-plugin-dts": "^4.5.4"
|
|
57
|
+
}
|
|
58
|
+
}
|