Skip to content

feat(server-rendered): add Rails, Django, and Laravel CDN integration guide and demo section #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Muneerali199 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat(server-rendered): add Rails, Django, and Laravel CDN integration guide and demo section #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dbcfa14
feat(server-rendered): add Rails, Django, and Laravel CDN integration…
Muneerali199 Mar 16, 2026
0c05311
fix(index): correct button type and unescaped HTML entities in snippets
Muneerali199 Mar 18, 2026
2d4c193
style: format files with prettier
Muneerali199 Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 27 additions & 30 deletions .github/copilot/integrate-analytics.prompt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@ forwards to whatever tool they choose.

## 2 — Core events catalogue

| `eventName` | `interactionType` | Fires when |
| ---------------------------- | ----------------- | ----------------------------------------------- |
| `social_share_popup_open` | `popup_open` | Share modal/popup opens |
| `social_share_popup_close` | `popup_close` | Modal closes (button, overlay, or Esc key) |
| `social_share_click` | `share` | User clicks a platform button (share intent) |
| `social_share_success` | `share` | Platform share window opened successfully |
| `social_share_copy` | `copy` | User copies the link to clipboard |
| `social_share_error` | `error` | Share or copy action failed |
| `eventName` | `interactionType` | Fires when |
| -------------------------- | ----------------- | -------------------------------------------- |
| `social_share_popup_open` | `popup_open` | Share modal/popup opens |
| `social_share_popup_close` | `popup_close` | Modal closes (button, overlay, or Esc key) |
| `social_share_click` | `share` | User clicks a platform button (share intent) |
| `social_share_success` | `share` | Platform share window opened successfully |
| `social_share_copy` | `copy` | User copies the link to clipboard |
| `social_share_error` | `error` | Share or copy action failed |

---

Expand All @@ -59,7 +59,7 @@ forwards to whatever tool they choose.
```js
// Fires on the container element and bubbles through the DOM (composed:true
// means it also crosses shadow-DOM boundaries).
document.addEventListener("social-share", (e) => {
document.addEventListener('social-share', (e) => {
const payload = e.detail;
// Forward to your analytics tool here
});
Expand All @@ -72,7 +72,7 @@ and Mixpanel both need the same event.

```js
new SocialShareButton({
container: "#share-button",
container: '#share-button',
onAnalytics: (payload) => {
// Forward to your analytics tool here
},
Expand All @@ -96,11 +96,8 @@ Load the adapters file **in addition to** the main library script:
const { GoogleAnalyticsAdapter, MixpanelAdapter } = window.SocialShareAnalytics;

new SocialShareButton({
container: "#share-button",
analyticsPlugins: [
new GoogleAnalyticsAdapter(),
new MixpanelAdapter(),
],
container: '#share-button',
analyticsPlugins: [new GoogleAnalyticsAdapter(), new MixpanelAdapter()],
});
```

Expand All @@ -125,7 +122,7 @@ Prerequisite: GA4 `gtag.js` snippet loaded by the host.
const { GoogleAnalyticsAdapter } = window.SocialShareAnalytics;

new SocialShareButton({
container: "#share-button",
container: '#share-button',
analyticsPlugins: [new GoogleAnalyticsAdapter()],
});

Expand All @@ -135,7 +132,7 @@ new SocialShareButton({
Custom event category (optional):

```js
new GoogleAnalyticsAdapter({ eventCategory: "engagement" })
new GoogleAnalyticsAdapter({ eventCategory: 'engagement' });
```

### Mixpanel
Expand All @@ -145,7 +142,7 @@ Prerequisite: `mixpanel-browser` snippet or SDK loaded.
```js
const { MixpanelAdapter } = window.SocialShareAnalytics;
new SocialShareButton({
container: "#share-button",
container: '#share-button',
analyticsPlugins: [new MixpanelAdapter()],
});
// Calls: mixpanel.track(eventName, { platform, url, ... })
Expand All @@ -156,7 +153,7 @@ new SocialShareButton({
```js
const { SegmentAdapter } = window.SocialShareAnalytics;
new SocialShareButton({
container: "#share-button",
container: '#share-button',
analyticsPlugins: [new SegmentAdapter()],
});
// Calls: analytics.track(eventName, { platform, url, ... })
Expand All @@ -169,7 +166,7 @@ Prerequisite: Plausible `script.js` loaded with custom events enabled.
```js
const { PlausibleAdapter } = window.SocialShareAnalytics;
new SocialShareButton({
container: "#share-button",
container: '#share-button',
analyticsPlugins: [new PlausibleAdapter()],
});
// Calls: plausible(eventName, { props: { platform, url, ... } })
Expand All @@ -180,7 +177,7 @@ new SocialShareButton({
```js
const { PostHogAdapter } = window.SocialShareAnalytics;
new SocialShareButton({
container: "#share-button",
container: '#share-button',
analyticsPlugins: [new PostHogAdapter()],
});
// Calls: posthog.capture(eventName, { platform, url, ... })
Expand All @@ -195,8 +192,8 @@ const { CustomAdapter } = window.SocialShareAnalytics;
new SocialShareButton({
analyticsPlugins: [
new CustomAdapter((payload) => {
fetch("/api/analytics", {
method: "POST",
fetch('/api/analytics', {
method: 'POST',
body: JSON.stringify(payload),
});
}),
Expand Down Expand Up @@ -231,17 +228,17 @@ GA4, Mixpanel, and a custom endpoint at the same time:
```js
const { GoogleAnalyticsAdapter, MixpanelAdapter, CustomAdapter } = window.SocialShareAnalytics;

document.addEventListener("social-share", (e) => {
console.log("Raw event:", e.detail); // Debugging / logging
document.addEventListener('social-share', (e) => {
console.log('Raw event:', e.detail); // Debugging / logging
});

new SocialShareButton({
container: "#share-button",
componentId: "homepage-hero",
container: '#share-button',
componentId: 'homepage-hero',
analyticsPlugins: [
new GoogleAnalyticsAdapter(),
new MixpanelAdapter(),
new CustomAdapter((p) => fetch("/log", { method: "POST", body: JSON.stringify(p) })),
new CustomAdapter((p) => fetch('/log', { method: 'POST', body: JSON.stringify(p) })),
],
});
```
Expand All @@ -255,7 +252,7 @@ development. Remove or set to `false` in production.

```js
new SocialShareButton({
container: "#share-button",
container: '#share-button',
debug: true,
// → [SocialShareButton Analytics] { version: '1.0', source: 'social-share-button', ... }
});
Expand All @@ -271,7 +268,7 @@ instrumentation must be explicitly consented to before activation.

```js
new SocialShareButton({
container: "#share-button",
container: '#share-button',
analytics: false,
});
```
Expand Down
Loading