Skip to content

Commit 0c9b012

Browse files
acomanescuacomanescu
committed
initial
0 parents  commit 0c9b012

13 files changed

+1724
-0
lines changed

‎.github/workflows/main.yml

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
name: CI
2+
on: [push]
3+
jobs:
4+
build:
5+
runs-on: ubuntu-latest
6+
7+
steps:
8+
- name: Begin CI...
9+
uses: actions/checkout@v2
10+
11+
- name: Use Node 22
12+
uses: actions/setup-node@v1
13+
with:
14+
node-version: 22.x
15+
16+
- name: Setup pnpm
17+
uses: pnpm/action-setup@v2
18+
with:
19+
version: 8
20+
21+
- name: Use cached node_modules
22+
uses: actions/cache@v4
23+
with:
24+
path: node_modules
25+
key: nodeModules-${{ hashFiles('**/pnpm-lock.yaml') }}
26+
restore-keys: |
27+
nodeModules-
28+
29+
- name: Install dependencies
30+
run: pnpm install
31+
env:
32+
CI: true
33+
34+
- name: Lint
35+
run: pnpm lint
36+
env:
37+
CI: true
38+
39+
- name: Build
40+
run: pnpm build
41+
env:
42+
CI: true

‎.gitignore

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
*.log
2+
.DS_Store
3+
node_modules
4+
.cache
5+
dist
6+
.idea
7+
.vsc
8+
coverage
9+
example/.parcel-cache

‎.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
22.12.0

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Devias IO
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
# React Google Tag Manager Hook
2+
3+
With this custom hook, you can easily use the Google Tag Manager with 0 config, you just have to pass the **container ID**!
4+
5+
## Features
6+
7+
- [Installation](#installation)
8+
- [How to use](#how-to-use)
9+
- [License](#license)
10+
11+
## Installation
12+
13+
```bash
14+
$ pnpm add react-gtm-hook
15+
# or
16+
$ yarn add react-gtm-hook
17+
# or
18+
$ npm install react-gtm-hook
19+
```
20+
21+
## How to use
22+
23+
### Basic
24+
25+
```jsx
26+
import { GTMProvider } from "react-gtm-hook";
27+
28+
const App = () => {
29+
const gtmConfig = { id: "GTM-ID" };
30+
31+
return (
32+
<GTMProvider config={gtmConfig}>
33+
<div>My awesome app</div>
34+
</GTMProvider>
35+
);
36+
}
37+
```
38+
39+
### With custom DataLayer Name
40+
41+
```jsx
42+
import { GTMProvider } from "react-gtm-hook";
43+
44+
const App = () => {
45+
const gtmConfig = {
46+
id: "GTM-ID",
47+
dataLayerName: "customDataLayerName",
48+
};
49+
50+
return (
51+
<GTMProvider config={gtmConfig}>
52+
<div>My awesome app</div>
53+
</GTMProvider>
54+
);
55+
};
56+
```
57+
58+
### With custom DataLayer name and initial values
59+
60+
```jsx
61+
import { GTMProvider } from "react-gtm-hook";
62+
63+
const App = () => {
64+
const gtmConfig = {
65+
id: 'GTM-ID',
66+
dataLayer: {
67+
"my-custom-value": "value",
68+
"my-awesome-value": "awesome",
69+
},
70+
dataLayerName: "customDataLayerName",
71+
};
72+
73+
return (
74+
<GTMProvider config={gtmConfig}>
75+
<div>My awesome app</div>
76+
</GTMProvider>
77+
);
78+
};
79+
```
80+
81+
### Use a GTM custom environment
82+
83+
```jsx
84+
import { GTMProvider } from "react-gtm-hook";
85+
86+
const App = () => {
87+
const gtmConfig = {
88+
id: "GTM-ID",
89+
environment: {
90+
gtm_auth: "my-auth-token",
91+
gtm_preview: "preview-id",
92+
},
93+
};
94+
95+
return (
96+
<GTMProvider config={gtmConfig}>
97+
<div>My awesome app</div>
98+
</GTMProvider>
99+
);
100+
};
101+
```
102+
103+
_To find the `gtm_auth` and `gtm_preview` values for your custom GTM environment, go to Admin > Your Container > Environments > Your Environment > Actions > Get Snippet in your Google Tag Manager console. You will find the values you need embedded in the snippet._
104+
105+
### Sending data to GTM
106+
107+
```jsx
108+
import { GTMProvider, useGTMDispatch } from "react-gtm-hook";
109+
110+
const App = () => {
111+
const gtmConfig = {
112+
id: "GTM-ID",
113+
dataLayerName: "customDataLayerName",
114+
};
115+
116+
return (
117+
<GTMProvider config={gtmConfig}>
118+
<div>
119+
<div>Acme Store</div>
120+
<ProductCard />
121+
</div>
122+
</GTMProvider>
123+
);
124+
};
125+
126+
const ProductCard = () => {
127+
const send = useGTMDispatch();
128+
129+
const handleClick = () => send({ event: "buy", product: "product-123" });
130+
131+
return (
132+
<div>
133+
<div>Product Name</div>
134+
<button onClick={handleClick}>Buy</button>
135+
</div>
136+
);
137+
}
138+
```
139+
140+
## License
141+
142+
MIT

‎biome.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
3+
"organizeImports": {
4+
"enabled": true
5+
},
6+
"linter": {
7+
"enabled": true,
8+
"rules": {
9+
"recommended": true
10+
}
11+
},
12+
"formatter": {
13+
"enabled": true,
14+
"formatWithErrors": false,
15+
"indentStyle": "space",
16+
"indentWidth": 2,
17+
"lineWidth": 80
18+
},
19+
"javascript": {
20+
"formatter": {
21+
"quoteStyle": "double",
22+
"trailingComma": "es5",
23+
"semicolons": "always"
24+
}
25+
}
26+
}

‎package.json

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{
2+
"name": "react-gtm-hook",
3+
"version": "0.0.1",
4+
"description": "Easily manage the Google Tag Manager via Hook",
5+
"author": "Devias",
6+
"license": "MIT",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/devias-io/react-gtm-hook.git"
10+
},
11+
"homepage": "https://github.com/devias-io/react-gtm-hook#readme",
12+
"keywords": [
13+
"react hook",
14+
"google tag manager",
15+
"gtm",
16+
"gtm hook",
17+
"react"
18+
],
19+
"type": "module",
20+
"types": "dist/index.d.ts",
21+
"main": "dist/index.cjs.js",
22+
"module": "dist/index.esm.js",
23+
"exports": {
24+
".": {
25+
"import": {
26+
"types": "./dist/index.d.ts",
27+
"default": "./dist/index.esm.js"
28+
},
29+
"require": {
30+
"types": "./dist/index.d.ts",
31+
"default": "./dist/index.cjs.js"
32+
}
33+
}
34+
},
35+
"sideEffects": false,
36+
"files": [
37+
"dist"
38+
],
39+
"engines": {
40+
"node": ">=20"
41+
},
42+
"scripts": {
43+
"build": "rollup -c",
44+
"dev": "rollup -c -w",
45+
"clean": "rimraf dist",
46+
"lint": "biome lint .",
47+
"lint:fix": "biome check --apply .",
48+
"format": "biome format .",
49+
"format:fix": "biome format --write .",
50+
"typecheck": "tsc --noEmit",
51+
"prebuild": "pnpm run clean"
52+
},
53+
"devDependencies": {
54+
"@biomejs/biome": "1.5.3",
55+
"@rollup/plugin-commonjs": "^28.0.2",
56+
"@rollup/plugin-node-resolve": "^16.0.0",
57+
"@rollup/plugin-terser": "^0.4.4",
58+
"@rollup/plugin-typescript": "^12.1.2",
59+
"@types/react": "^19.0.2",
60+
"@types/react-dom": "^19.0.2",
61+
"react": "^19.0.0",
62+
"rimraf": "^6.0.1",
63+
"rollup": "^4.28.1",
64+
"tslib": "^2.8.1",
65+
"typescript": "^5.7.2"
66+
},
67+
"peerDependencies": {
68+
"react": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0",
69+
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
70+
}
71+
}

0 commit comments

Comments
 (0)