Set up Javascript Browser Tracker with next js

For engineers
1

I have tried to set up the snowplow tracker (using @analytics/snowplow) for the next js project which is not as simple as just copying the code snippet to the header.

I have created a simple project with “try snowplow” to see if I can trigger the track event. I get the collector url from Try snowplow.

Screenshot_3
Screenshot_31549×866 76.3 KB

Screenshot_5
Screenshot_51446×784 52.3 KB

I wonder if I am setting things wrong. The snowplow inspector is not updating after a while. And I have this error in the console.

Screenshot_6
Screenshot_62538×172 16.8 KB

Can anyone give me a hand?

2

Hi @Allen_Liu
Welcome to the Snowplow Community.
Cheers,
Eddie

1 Like
3

Hey @Allen_Liu
It looks like the OPTIONS request which is sent before the POST is erroring and therefore you’re getting CORS errors.

If I had to guess why, it’s because you’re sending your requests to a Try Snowplow pipeline using HTTP, rather than HTTPS.

Becuase you’re running locally, on http://localhost the tracker will default to using the same protocol (http).

You can force this to use HTTPS:

trackerSettings: {
  addId: 'myApp',
  forceSecureTracker: true,
  contexts: {
    webPage: true
  }
},

It also looks like you’re initialising multiple times, the tracker is ok with this but worth considering this within a SPA application, as its a potential route to bugs in the future.

Lastly, the getanalytics.io is a good package, but it still requires you to load an additional asset at runtime (sp.js).

If that does fix things for you (and hopefully it does!) you might want to consider, particularly for future development, moving to a Snowplow JavaScript v3 tracker, such as our Browser Tracker. It’s pretty much the same but becomes part of your application, rather than loading sp.js externally. We have deprecated forceSecureTracker in v3, you simply put https:// before your collectorUrl.

3 Likes
4

Hi Paul, thank you for your detailed explanation! My app is running correctly right now. Will try to apply to the client’s website.

2 Likes
5

Hi @Allen_Liu
Did you get it implemented on your client’s site OK? If so, any learnings that you could share?
Cheers,
Eddie

1 Like
6

Hi Paul,
We have tried to link our client’s website to Snowplow recently. But it still shows the error that the client’s website is blocked by the CORS policy.

I added the “https://” before collectorUrl. It was running well for my test app with the try snowplow trial but not the client website. Can you think of any potential problem that causing this error (CORS)?

For your information, we are using the Snowplow JavaScript v3 tracker (Browser Tracker).