react-marketing-tools 0.0.1 → 0.0.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.
- package/README.md +24 -4
- package/dist/react-marketing-tools.es.js +2584 -2581
- package/dist/react-marketing-tools.umd.js +12 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
|
|
2
|
-
# React Marketing Tools [](https://badge.fury.io/js/react-marketing-tools)
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
React Marketing Tools are a set of tools to make it easier for you to implement analytics and track user journeys, interactions throughout your App. using dataLayer/Google Tag Manager, GA4 fetch directly or coming soon facebook pixel.
|
|
5
|
+
|
|
6
|
+
COMING SOON: [React Marketing Tools Demo](https://)
|
|
7
|
+
- For now you can clone and run locally. There is a very basic demo app, thanks to [Vite.](https://vitejs.dev/)
|
|
5
8
|
|
|
6
|
-
React Marketing Tools are a set of tools to make it easier to implement and manage analytics in your App like dataLayer/Google Tag Manager, GA4 & facebook pixel.
|
|
7
9
|
|
|
8
10
|
# PR's
|
|
9
11
|
- Have a look at the [PR template doc](https://github.com/bronz3beard/react-marketing-tools/blob/main/docs) for best approach to getting your pr merged.
|
|
10
12
|
|
|
11
|
-
#
|
|
13
|
+
# CHANGELOG
|
|
14
|
+
- You can view it [here](https://github.com/bronz3beard/react-marketing-tools/blob/main/docs/CHANGELOG.md)
|
|
12
15
|
|
|
16
|
+
# Usage and setup examples.
|
|
13
17
|
|
|
14
18
|
### Setup configuration
|
|
15
19
|
- Setting up config without provider is also an option, in this case you will only need to import _buildConfig_
|
|
@@ -41,6 +45,7 @@ React Marketing Tools are a set of tools to make it easier to implement and mana
|
|
|
41
45
|
|
|
42
46
|
const analyticsConfig = {
|
|
43
47
|
appName: 'my-awesome-app', // required
|
|
48
|
+
appSessionCookieName: 'APP_SESSION',
|
|
44
49
|
eventActionPrefix: { // this will extend the default values of eventActionPrefix
|
|
45
50
|
ACTION: 'ACTION',
|
|
46
51
|
OTHER_EVENT_NAME_TYPE: 'OTHER_EVENT_NAME_TYPE'
|
|
@@ -56,6 +61,17 @@ React Marketing Tools are a set of tools to make it easier to implement and mana
|
|
|
56
61
|
withServerLocationInfo: false, // (optional) has default value
|
|
57
62
|
}
|
|
58
63
|
|
|
64
|
+
/**
|
|
65
|
+
* @type {Object} buildConfig -> options: all attributes of the options object must have a value, other than withDeviceInfo.
|
|
66
|
+
* @property {string} appName: the name of your app this value must be passed in.
|
|
67
|
+
* @property {string} appSessionCookieName This is used to get the cookie from storage based on a key you use, the value from the cookie will be used in "client_id:"
|
|
68
|
+
* @property {Object} eventActionPrefix: is a { key: 'value' } object that allows you to extend "analyticsEventActionPrefixList" object with custom eventActionPrefix. To see the build in list call the function showMeBuildInEventActionPrefixList().
|
|
69
|
+
* @property {Array} globalEventActionList: is a { key: 'value' } object that allows you to extend "analyticsGlobalEventActionList" object with custom eventActionNames. To see the build in list call the function showMeBuildInGlobalEventActionList().
|
|
70
|
+
* @property {Array} includeUserKeys: is an array of strings that represent keys from your user data that you want to whitelist, user data you wan to hash.
|
|
71
|
+
* @property {Object} TOKENS: is a { key: 'value' } object that includes the following keys, IP_INFO_TOKEN, GA4_PUBLIC_API_SECRET, GA4_PUBLIC_MEASUREMENT_ID, depending on if you need these features enabled.
|
|
72
|
+
* @property {Boolean} withDeviceInfo: if you want device information added to "globalVars" set this to true false by default.
|
|
73
|
+
* @property {Boolean} withServerLocationInfo: if you want server information added to "journeyProps" set this to true false by default.
|
|
74
|
+
*/
|
|
59
75
|
buildConfig(analyticsConfig)
|
|
60
76
|
|
|
61
77
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
|
@@ -76,6 +92,7 @@ React Marketing Tools are a set of tools to make it easier to implement and mana
|
|
|
76
92
|
function App() {
|
|
77
93
|
const [count, setCount] = useState(0)
|
|
78
94
|
const {
|
|
95
|
+
appSessionCookieName,
|
|
79
96
|
analyticsPlatform,
|
|
80
97
|
eventActionPrefixList,
|
|
81
98
|
analyticsGlobalEventActionList
|
|
@@ -92,6 +109,9 @@ React Marketing Tools are a set of tools to make it easier to implement and mana
|
|
|
92
109
|
} = useMarketingApi(ContextApi)
|
|
93
110
|
|
|
94
111
|
useEffect(function appLoadPageLandingWelcome() {
|
|
112
|
+
// create session cookie, useful for unauthenticated user tracking and other things
|
|
113
|
+
document.cookie = `${appSessionCookieName}=${uuid()};max-age=${70};SameSite=Strict;Secure`
|
|
114
|
+
|
|
95
115
|
const eventNameInfo = {
|
|
96
116
|
actionPrefix: eventActionPrefixList.JOURNEY,
|
|
97
117
|
description: 'Welcome Landing',
|