Tracking code to track page views

Ask us anything How do I?
1

Hi! I have a javascript tracking code that I’ve placed within the head tags of the app to detect page views.

Problem is that when I navigate from page to page on the app, the tracking script does not detect the page visit.

Only when I refresh the entire page (or on first page visit) does it detect the page visit.

So i could have visited 5 pages but it only detects 1. How do I rectify this problem? Thank you!!

2

The code in the head is executed only on page load. Because a weweb app is a SPA the navigation does not trigger a full page load and your tracking code is not executed again.
You need to use a javascript action in a page workflow to send the tracking request when changing page.

3

Hi @raelyn :wave:

May I ask what tool you’re using to track page views on your app?

We recently released the Google Tag Manager plugin and are considering adding other native integrations to make this easier for you.

4

Hi Joyce! I hope you’re doing well. Haha it’s my ESP with (I think) less than 1000 users… so maybe an integration won’t be helpful for Weweb. But one thing I would love integrating with is Google Analytics. :stuck_out_tongue:

5

Hey! I tried to add it in the tracking script in a “custom Javascript” action on Page Load, but its getting this error:

name: "SyntaxError"
stack: "SyntaxError: Unexpected token '<' at executeCode (https://editor-cdn.weweb.io/public/js/index.987af39f.js:1:309972) at xt (https://editor-cdn.weweb.io/public/js/index.987af39f.js:1272:25557) at Proxy.runTest (https://editor-cdn.weweb.io/public/js/index.987af39f.js:1390:239664) at https://editor-cdn.weweb.io/public/js/index.987af39f.js:1390:223480 at https://editor-cdn.weweb.io/public/js/chunk-vendors.5d3b0ad2.js:1:107458 at a (https://editor-cdn.weweb.io/public/js/chunk-vendors.5d3b0ad2.js:1:33337) at l (https://editor-cdn.weweb.io/public/js/chunk-vendors.5d3b0ad2.js:1:33420) at HTMLButtonElement.i (https://editor-cdn.weweb.io/public/js/chunk-vendors.5d3b0ad2.js:1:94414) at HTMLButtonElement.sentryWrapped (https://browser.sentry-cdn.com/7.45.0/bundle.min.js:2:38971)"
message: "Unexpected token '<'"

The code I’m trying to add is something like that:

<script src="https://myappurl.com.js" defer async></script>
<script>
window.addEventListener("bento:ready", function () {
  if (typeof(bento$) != 'undefined') {
    bento$(function() {
        // bento.showChat();
        // bento.updateFields({"name": "User 1"});
        // bento.identify("example@example.com");
        bento.view();
    });
  }
})
</script>

Any idea why? When I try to add in the head tag, it works.

6

a javascript action is a javascript function, not html. So you want to use the code inside the script tag without the tag itself.

7

You can integrate with Google Analytics using the Google Tag Manager. @Quentin demonstrates how in this video.

The power of Google Tag Manager is that it allows you to manage all your tracking tags, including but not limited to Google Analytics.

Using a tag manager (Google or other) is considered best practice because it allows the growth & marketing teams to be autonomous when they need to add tags. For example, they don’t have to ask the developers to add the Facebook or LinkedIn pixel. They can do it on their own by adding them in their tag manager.

8

Hey @dorilama

So I tried for hours to use chatGPT to turn it into a Javascript function, but the best I could do was that it still ends up having double event every time it’s triggered on page load. :frowning:

Any chance you could tell me what code to use (and at where)?

The code I’m trying to add is:

<script src="https://myappurl.com.js" defer async></script>
<script>
window.addEventListener("bento:ready", function () {
  if (typeof(bento$) != 'undefined') {
    bento$(function() {
        // bento.showChat();
        // bento.updateFields({"name": "User 1"});
        // bento.identify("example@example.com");
        bento.view();
    });
  }
})
</script>
9

again, a js action is already a js function. If you insert html tags (the code in your posts) it’s going to throw an error because of course it’s not valid js.
The problem here is that you don’t know what action you need to take to signal a page change. Your code add an event listener and of course if you run it twice you add two event listeners and your callback will be executed twice.
You need to go back to the documentation of your tracking system and check if it handles spa with a different setup, or how to “manually” trigger events.
Without the docs I can only guess that you need to trigger a custom event bento:ready.