mirrors/rybbit
1
0
Fork 0
mirror of https://github.com/rybbit-io/rybbit.git synced 2025-05-10 20:05:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Remove Google Tag Manager documentation and add integrations field in _meta.js

Browse source
This commit is contained in:
Bill Yang 2025-05-09 10:37:16 -07:00
parent 417849f42c
commit d1d3d847a3
3 changed files with 58 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

8
docs/src/content/_meta.js
View file

@ -7,6 +7,7 @@ export default {
},
tracker: "",
"track-events": "",
integrations: "",
_4: {
type: "separator",
title: "Self-hosting",
@ -18,12 +19,7 @@ export default {
type: "separator",
title: "SDKs",
},
"web": "",
_6: {
type: "separator",
title: "Integrations",
},
"google-tag-manager": "",
web: "",
_7: {
type: "separator",
title: "Settings",

4
docs/src/content/google-tag-manager.mdx → docs/src/content/integrations/google-tag-manager.mdx
View file

@ -15,7 +15,7 @@ Normally, the script would look like:
```javascript
<script
src="https://yourdomain.com/api/script.js"
src="https://app.rybbit.io/api/script.js"
data-site-id="YOUR_SITE_ID"
async
></script>
@ -27,7 +27,7 @@ However, GTM sanitizes script tags by removing non-standard HTML attributes like
<script>
(function() {
let el = document.createElement("script");
el.src = "https://yourdomain.com/api/script.js";
el.src = "https://app.rybbit.io/api/script.js";
el.async = true;
el.setAttribute("data-site-id", "YOUR_SITE_ID");
document.head.appendChild(el);

54
docs/src/content/integrations/next-js.mdx Normal file
View file

@ -0,0 +1,54 @@
# Next.js
Next.js is a popular React framework that enables features like server-side rendering and static site generation. This guide explains how to integrate Rybbit with your Next.js application.
## How to Add Rybbit to Next.js
### 1. Install the Script
Next.js provides a built-in [Script component](https://nextjs.org/docs/app/building-your-application/optimizing/scripts) that handles script loading efficiently. This is the recommended approach.
Create or modify your layout file (either `app/layout.js` or `pages/_app.js` depending on your Next.js version):
```jsx
// For App Router (Next.js 13+)
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
{children}
<Script
src="https://app.rybbit.io/api/script.js"
data-site-id="YOUR_SITE_ID"
strategy="afterInteractive"
/>
</body>
</html>
)
}
```
```jsx
// For Pages Router
import Script from 'next/script'
function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Script
src="https://app.rybbit.io/api/script.js"
data-site-id="YOUR_SITE_ID"
strategy="afterInteractive"
/>
</>
)
}
export default MyApp
```