Add Basic Visitor Tracking #1462
Conversation
MarcusSorealheis
temporarily deployed
to
production
GitHub Actions
Inactive
MarcusSorealheis
temporarily deployed
to
production
GitHub Actions
Inactive
MarcusSorealheis
temporarily deployed
to
production
GitHub Actions
Inactive
MarcusSorealheis
temporarily deployed
to
production
GitHub Actions
Inactive
MarcusSorealheis
changed the title
|
I've found a bug in a closure, one moment. |
MarcusSorealheis
force-pushed
the
visitor-tracking
branch
from
57df044
to
de958ea
Compare
MarcusSorealheis
had a problem deploying
to
production
GitHub Actions
Failure
MarcusSorealheis
had a problem deploying
to
production
GitHub Actions
Failure
MarcusSorealheis
had a problem deploying
to
production
GitHub Actions
Error
MarcusSorealheis
had a problem deploying
to
production
GitHub Actions
Error
MarcusSorealheis
force-pushed
the
visitor-tracking
branch
from
de958ea
to
3d6d280
Compare
MarcusSorealheis
temporarily deployed
to
production
GitHub Actions
Inactive
MarcusSorealheis
temporarily deployed
to
production
GitHub Actions
Inactive
MarcusSorealheis
temporarily deployed
to
production
GitHub Actions
Inactive
MarcusSorealheis
temporarily deployed
to
production
GitHub Actions
Inactive
There was a problem hiding this comment.
We are mainly using the Qwik Framework. We have also enabled react, but we only have one react component on the website.
Qwik might look similar to react with the tsx syntax, but it has another approach than react (resumability vs hydration).
So you need to be aware of....
Reviewed 2 of 2 files at r1, all commit messages.
Reviewable status: 0 of 1 LGTMs obtained, and all files reviewed, and 2 discussions need to be resolved
web/platform/src/components/qwik/components/visitors.tsx line 42 at r1 (raw file):
} } ce(`https://sc.lfeeder.com/lftracker_v1_${ss}.js`);
For thirdparty scripts we should use Partytown, since it won't slow down the website performance.
It will use web worker under the hood, so the main thread doesn't get blocked.
For that we don't need a qwik component, since we also use astro as the meta framework for routing.
To integrate partytown in astro you'll need to add the dependency with bun i -D @astrojs/partytown.
Then you need to import it inthe astro.config.ts:
...
import tailwindcss from "@tailwindcss/vite";
import partytown from "@astrojs/partytown"; // <--- import the dependency
...
integrations: [
...
partytown() // <-- add the dependency as an integration
],
... web/platform/src/layouts/Layout.astro line 26 at r1 (raw file):
<title>{title}</title> <ViewTransitions /> <Visitors />
Let's create a directory for third-party scripts something like src/thirdParty, and inside you can create alfeeder.astro file.
An example for google tag manager would be:
---
type Props = { measurementId: string }
const props = Astro.props as Props
const measurementId = props.measurementId
---
<script
type='text/partytown'
src={`https://www.googletagmanager.com/gtag/js?id=${measurementId}`}></script>
<script
Then you could include it in the layout.astro - head like this:
---
import GoogleAnalytics from './GoogleAnalytics.astro'
---
<html lang='en'>
<head>
<meta charset='utf-8' />
<GoogleAnalytics measurementId={'G-XXXXXXXXXX'} />
<title>My page</title>
·
Description
Adds basic visitor tracking. It does lead to a weird server side React warning about
useEffectthat I could use a tip on. I'm not sure if it was there already. First commit to the rewritten website.This change is