Skip to content

Commit 6e50024

Browse files
committed
package bump
1 parent 3adfc73 commit 6e50024

File tree

2 files changed

+59
-67
lines changed

2 files changed

+59
-67
lines changed

README.md

+58-66
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,18 @@
77
<p align="center">
88
<a href="#" target="__blank"><img alt="Version" src="https://img.shields.io/badge/v0.0.1-8A2BE2"></a>
99
<a href="https://opensource.org/licenses/Apache-2.0" target="__blank"><img src="https://img.shields.io/badge/License-Apache_2.0-blue.svg" alt="NPM version"></a>
10-
<a href="https://github.com/analytics-debugger/Return-Of-The-Custom-Task/tree/main/tasks"><img alt="Tasks Count" src="https://img.shields.io/badge/Available_Tasks-7-blue"></a>
10+
<a href="https://github.com/analytics-debugger/Return-Of-The-Custom-Task/tree/main/tasks"><img alt="Tasks Count" src="https://img.shields.io/badge/Available_Tasks-9-blue"></a>
1111
<a href="https://github.com/analytics-debugger/Return-Of-The-Custom-Task" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/sponsors/thyngster"></a>
1212
<br>
1313
<a href="https://github.com/analytics-debugger/Return-Of-The-Custom-Task" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/analytics-debugger/Return-Of-The-Custom-Task?style=social"></a>
1414
</p>
1515
<p align="center">
16-
<h1>Sponsor/Donate</h1>
16+
<h1>Sponsor/Donate</h1>
1717
Become a Sponsor to support my work: <a href="https://github.com/sponsors/thyngster">GITHUB Sponsor</a>
18-
</p>
18+
</p>
19+
20+
# Why this library
1921

20-
# Why this library
2122
One of the best additions to Universal Analytics in the past was the Tasks, more specifically the customTask that allowed us to modify the hits payloads before theywere sent to the endpoint.
2223

2324
In April 2024, Google Switched the use of sendBeacon to the fetch API. ( not a breaking change since sendBeacon seems to work on top of Fetch ), and along with the chance
@@ -33,57 +34,48 @@ The current features are:
3334
- Allows callbacks concatenations
3435
- Measurement ID based setup ( apply the callbacks only to the defined hits )
3536

36-
37-
3837
Not only this, I tool some time to port and improve all the customTask I was able to find around on internet so you can just use them on your setup.
3938

40-
41-
4239
# How to Use It
4340

44-
45-
4641
One we have loaded the GA4CustomTask.js code we need to instanciate our Tasker:
4742

48-
49-
5043
```
5144
var ga4CustomTaskInterceptor = new GA4CustomTask({
52-
allowedMeasurementIds: ["G-DEBUGEMALL"],
53-
tasks: [
54-
logRequestsToConsoleTask,
55-
task2,
56-
task3
57-
]
45+
allowedMeasurementIds: ["G-DEBUGEMALL"],
46+
tasks: [
47+
logRequestsToConsoleTask,
48+
task2,
49+
task3
50+
]
5851
});
59-
```
52+
```
53+
6054
Since this is shared between all instances in your pages, you need to specify at least one allowedMeasurementIds, this way only these requests will be intercepted.
6155

62-
Also, if there's no tasks nothing will be intercepted.
56+
Also, if there's no tasks nothing will be intercepted.
6357

6458
# Building your own Task
6559

6660
You can create your own custom tasks. By default, the library provides a `RequestModel` interface, which includes `sharedPayload` and `events` in object format. The library handles:
6761

68-
6962
- Parsing the request type (GET/POST)
7063
- Managing multiple events
71-
- Constructing the final fetch request for your convenience
64+
- Constructing the final fetch request for your convenience
7265

7366
```
7467
interface RequestModel {
75-
endpoint: string;
76-
sharedPayload: { [key: string]: any }; // No need for null in the type
77-
events: { [key: string]: any }[];
78-
__skip?: boolean;
68+
endpoint: string;
69+
sharedPayload: { [key: string]: any }; // No need for null in the type
70+
events: { [key: string]: any }[];
71+
__skip?: boolean;
7972
}
8073
```
8174

82-
8375
```
8476
const myCustomTask = (request: RequestModel): RequestModel => {
85-
// Your Code
86-
return request;
77+
// Your Code
78+
return request;
8779
};
8880
```
8981

@@ -92,36 +84,34 @@ This is a very simple example that just logs the requests
9284

9385
```
9486
var mySimpleCustomTask = (request) => {
95-
console.log("NEW GA4 REQUEST", request);
96-
return request;
87+
console.log("NEW GA4 REQUEST", request);
88+
return request;
9789
}
9890
```
9991

100-
101-
10292
If you need to pass parameters
10393

104-
105-
10694
```
10795
const myCustomTaskWithParams = (request: RequestModel, name: string): RequestModel => {
108-
// your logic
109-
return request;
96+
// your logic
97+
return request;
11098
};
11199
```
112-
100+
113101
```
114102
var GA4CustomTaskInstance = new GA4CustomTask({
115-
allowedMeasurementIds: ["G-DEBUGEMALL"],
116-
tasks: [
117-
(requestModel) => myCustomTaskWithParams(requestModel, 'myNameParamValue'),
118-
]
103+
allowedMeasurementIds: ["G-DEBUGEMALL"],
104+
tasks: [
105+
(requestModel) => myCustomTaskWithParams(requestModel, 'myNameParamValue'),
106+
]
119107
});
120108
```
109+
121110
Original Fetch object is available at ```GA4CustomTask.originalFetch``` for your convenience.
122-
You can take a look to tasks folder to see more examples.
111+
You can take a look to tasks folder to see more examples.
123112

124113
# Available Tasks List
114+
125115
||Task Name|Description|
126116
|-|------------|--|
127117
|#1|[logRequestsToConsoleTask](tasks/logRequestsToConsoleTask)|Logs all requests to the console, for debugging pourposes.|
@@ -139,48 +129,50 @@ You can take a look to tasks folder to see more examples.
139129
We provide several ready to use tasks, you'll find them within the dist/tasks folder, they are offered in normal and minified version.
140130

141131
### Adding a Task that doens't need parameters
142-
```
132+
133+
```
143134
var logRequestsToConsoleTask = () => {...} // Copy from dist folder
144135
const ga4CustomTaskInterceptor = new GA4CustomTask({
145-
allowedMeasurementIds: ["G-DEBUGEMALL"],
146-
tasks: [
147-
logRequestsToConsoleTask,
148-
]
136+
allowedMeasurementIds: ["G-DEBUGEMALL"],
137+
tasks: [
138+
logRequestsToConsoleTask,
139+
]
149140
});
150141
```
151-
142+
152143
### Adding a Task that used
144+
153145
Some tasks may require parameters, In that case we'll need to pass the paremter this way
146+
154147
```
155148
const mapClientIdTask = () => {...} // Copy from dist folder
156149
const ga4CustomTaskInterceptor = new GA4CustomTask({
157-
allowedMeasurementIds: ["G-DEBUGEMALL"],
158-
tasks: [
159-
(request) => mapClientIdTask(request, 'client_id')
160-
]
150+
allowedMeasurementIds: ["G-DEBUGEMALL"],
151+
tasks: [
152+
(request) => mapClientIdTask(request, 'client_id')
153+
]
161154
});
162155
```
163156

164157
In GTM we woh't be able to use arrow functions or const
158+
165159
```
166160
var mapClientIdTask = function(payload, clientId) {
167-
// Function body copied from dist folder
161+
// Function body copied from dist folder
168162
};
169163
var ga4CustomTaskInterceptor = new GA4CustomTask({
170-
allowedMeasurementIds: ["G-DEBUGEMALL"],
171-
tasks: [
172-
function(request) {
173-
return mapClientIdTask(request, 'client_id');
174-
}
175-
]
164+
allowedMeasurementIds: ["G-DEBUGEMALL"],
165+
tasks: [
166+
function(request) {
167+
return mapClientIdTask(request, 'client_id');
168+
}
169+
]
176170
});
177171
```
178172

179-
180-
181173
## Stacking / Chaining Tasks
182174

183-
You may add as many tasks as you want, but remember they will be execute secuencially, so apply them wisely.
175+
You may add as many tasks as you want, but remember they will be execute secuencially, so apply them wisely.
184176

185177
# The Request Model
186178

@@ -190,11 +182,11 @@ You don’t need to worry about parsing the request. If the request doesn’t ha
190182

191183
```json
192184
requestModel: {
193-
sharedPayload: {},
194-
events: [{}, {}]
185+
sharedPayload: {},
186+
events: [{}, {}]
195187
}
196188
```
197189

198190
# Support
199191

200-
Donations Accepted
192+
Donations Accepted

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "the-return-of-the-custom-task",
33
"private": true,
44
"author": "David Vallejo <david@> (https://www.thyngster.com/)",
5-
"version": "0.0.1",
5+
"version": "0.0.2",
66
"license": "Apache-2.0",
77
"type": "module",
88
"scripts": {

0 commit comments

Comments
 (0)