Clarification on installing @snowplow/react-native-tracker@0.1.6

For engineers
1

Hi,

I am installing @snowplow/react-native-tracker@0.1.6 in one of the existing application. While installation I am getting below messages.

npm WARN @snowplow/react-native-tracker@0.1.6 requires a peer of react-native@>=0.59.8 but none is installed. You must install peer dependencies yourself.
npm WARN @snowplow/react-native-tracker@0.1.6 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.

  • @snowplow/react-native-tracker@0.1.6
    added 17 packages from 14 contributors, removed 17 packages, updated 140 packages and audited 157 packages in 18.23s

Above message says, react-native@>=0.59.8 and react@>=16.8.6 are dependent libraries. Does this need to be installed or this can be ignored still and this will not affect the functionality of @snowplow/react-native-tracker@0.1.6.

Please suggest.

Regards
Balamurugan. D

2

Hey @bdakshinamoorthy ,

Yes, the react-native tracker requires react-native and react - it won’t work without them.

Are you importing the tracker into a react-native project? If so what versions of react-native and react are you using?

3

Hi @Colm ,

I followed below procedures to install react-native-tracker

npm install @snowplow/react-native-tracker --save

npm WARN @snowplow/react-native-tracker@0.1.6 requires a peer of react-native@>=0.59.8 but none is installed. You must install peer dependencies yourself.

Tried installing react-native (command: npm install react-native@>=0.59.8 --save) this downloads and install react-native@0.64.0 and below WARN is shown.

npm WARN react-native@0.64.0 requires a peer of react@17.0.1 but none is installed. You must install peer dependencies yourself.

The application uses below react libraries:
“react”: “^16.14.0”,
“react-dom”: “^16.14.0”,
“react-router”: “^5.1.2”,
“react-router-dom”: “^5.1.2”,
“react-scripts”: “^3.4.0”,

Per the warn, I installed react@17.0.1 with below commands

npm install react-dom@17.0.1 --save
npm install react@17.0.1 --save

Now the react library updated as below:
“react”: “^17.0.1”,
“react-dom”: “^17.0.1”,
“react-native”: “^0.64.0”,
“react-router”: “^5.1.2”,
“react-router-dom”: “^5.1.2”,
“react-scripts”: “^3.4.0”,

Now the app is coming up. But need to verify event tracking.

Just want to verify, the installation steps that I followed is correct?

Regards
Balamurugan. D

4

@bdakshinamoorthy React Native is a mobile application development framework, which is based on react, but is a wholly separate language/environment.

It looks like you’re importing our react-native specific tracker into a react project, which won’t work.

Give the browser tracker a try, assuming that you’re working with a web app.

Best,

2 Likes
5

@Colm , This is web application, frontend in ReactJS. The goal is to track button (toggle-buttons) click events and link click events, will this events can be tracked through browser tracker?, it could give me some light if you share some example on tracking toggle-button-events and link-click-events
-Thanks

6

Yes they can be tracked through browser tracker. Everything you need to do so is detailed in the documentation I’ve already linked.

7

@Colm - What plugin I need to install to track button (toggle-button) click events

8

I don’t think there’s a plugin for buttons specifically as far as I’m aware - typically you’d add in event listeners or use a Tag Manager (such as Google Tag Manager) to listen to these events and dispatch Snowplow events. It is of course possible to write a plugin (in the new tracker) that does this automatically but at the moment that isn’t built into the core (to keep the Javascript snippet light).

9

@Colm , @mike , I installed the plugin for link-click-tracking and included below code in react file. but I could only see ‘e=pv’ but not ‘ue’. Please suggest what configuration I am missing here to get eventType as linkClick (ue).

import { setUserId, newTracker, trackPageView } from ‘@snowplow/browser-tracker’;
import { LinkClickTrackingPlugin, enableLinkClickTracking } from ‘@snowplow/browser-plugin-link-click-tracking’;

setUserId(‘my-user-id’);
newTracker(‘sp2’, ‘my-collector-url’, {
appId: ‘my-app-id’,
platform: ‘web’,
cookieName: ‘sp2’,
cookieSameSite: ‘None’,
cookieSecure: true,
encodeBase64: true,
respectDoNotTrack: false,
eventMethod: ‘get’,
forceSecureTracker: true,
contexts: {
webPage: true // default, can be omitted
},
plugins: [ LinkClickTrackingPlugin() ],
});

trackPageView({}, [ ‘sp2’ ]);
enableLinkClickTracking({ trackContent: true });

GET url that got from debugger:
http://my-collector-url/i?stm=xxxxxxx&e=pv&url=http%20%xxxxxx

Even though I mentioned ‘forceSecureTracker: true’, still it is not using https. How could forcefully make the url to prefix with https.

10

That all looks ok to me. We’ve just published v3.0.3 which has a fix for link click tracking in it, it’s unlikely the be the problem here as it is quite the edge case but worth upgrading just in case.

As for secure tracking in v3, you now specify https on the endpoint - forceSecureTracker has no effect.

newTracker('sp', 'https://{{collector_url_here}}', {
  appId: 'my-app-id'
}

Everything else seems fine from that snippet, just beaware that middle clicking a link might not work unless you enable pseudo clicks: enableLinkClickTracking({ trackContent: true, pseudoClicks: true }); and it only works on <a> tags, for other types of click events you’ll need to build your own event handler and track your own custom events.

2 Likes
11

I updated brower-tracker to v3.0.3 and added pseudoClicks to “enableLinkClickTracking({ trackContent: true, pseudoClicks: true })” and passing the argument eventMethod as ‘get’ is not seeting the app-id and user-id even if calling setUserId method. In what way app-id and user-id can be set.
Note: By changing ‘get’ to ‘post’ then in the debugger it is setting the app-id and user-id that I mentioned in tracker.
Please suggest the way to set it for ‘get’.

newTracker(‘sp2’, ‘my-collector-url’, {
appId: ‘my-app-id’,
platform: ‘web’,
eventMethod: ‘get’,
plugins: [ LinkClickTrackingPlugin() ],
});
setUserId(‘my-user-id’);
trackPageView({}, [ ‘sp2’ ]);
enableLinkClickTracking({ trackContent: true, pseudoClicks: true });

12

This set up works fine when I test it, it generates the following query string parameters:

stm=1619079723798
e=pv
url=http%3A%2F%2Flocalhost%3A3000%2F
page=React%20App
eid=afc3ff84-ae4a-4a75-b5c2-4fb930a3ae70
tv=js-3.0.3
tna=sp2
aid=my-app-id
p=web
cookie=1
cs=UTF-8
lang=en-GB
res=3440x1440
cd=24
dtm=1619079723795
vp=526x1313
ds=526x1313
vid=23
sid=b38164ca-614e-462f-b891-81928cd85cca
duid=78c2141a-747d-4a3a-a55c-b124b70fd113
uid=my-user-id
cx=eyJzY2hlbWEiOiJpZ2x1OmNvbS5zbm93cGxvd2FuYWx5dGljcy5zbm93cGxvdy9jb250ZXh0cy9qc29uc2NoZW1hLzEtMC0wIiwiZGF0YSI6W3sic2NoZW1hIjoiaWdsdTpjb20uc25vd3Bsb3dhbmFseXRpY3Muc25vd3Bsb3cvd2ViX3BhZ2UvanNvbnNjaGVtYS8xLTAtMCIsImRhdGEiOnsiaWQiOiIwYzlhMzVhOC1mZWM1LTQwMzAtYTlkZi02MGZiNDQ5Y2E1YzkifX1dfQ

Note: aid=my-app-id and uid=my-user-id