HaynesPostHog.github.io/index.html at main · HaynesPostHog/HaynesPostHog.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PostHog Testing Site</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            line-height: 1.6;
        }

        .consent-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #333;
            color: white;
            padding: 20px;
            text-align: center;
            z-index: 1000;
        }

        .consent-banner.hidden {
            display: none;
        }

        .consent-btn {
            background: #007cba;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 0 10px;
            cursor: pointer;
            border-radius: 4px;
        }

        .consent-btn:hover {
            background: #005a87;
        }

        .consent-btn.decline {
            background: #666;
        }

        .consent-btn.decline:hover {
            background: #444;
        }

        .btn {
            background: #007cba;
            color: white;
            border: none;
            padding: 15px 30px;
            margin: 10px;
            cursor: pointer;
            border-radius: 4px;
            font-size: 16px;
        }

        .btn:hover {
            background: #005a87;
        }

        .btn.secondary {
            background: #666;
        }

        .btn.secondary:hover {
            background: #444;
        }
    </style>
</head>
<body>
    <h1>PostHog Testing Site</h1>
    <p>Simple buttons for testing PostHog tracking.</p>

    <div>
        <button class="btn">Button 1</button>
        <button class="btn">Button 2</button>
        <button class="btn">Button 3</button>
    </div>

    <!-- Consent Banner -->
    <div id="consentBanner" class="consent-banner">
        <p>This site is used for PostHog testing. Do you consent to tracking?</p>
        <button class="consent-btn" onclick="acceptConsent()">Accept</button>
        <button class="consent-btn decline" onclick="declineConsent()">Decline</button>
    </div>

    <script>
        let posthogInitialized = false;

        // Show consent banner on page load
        document.addEventListener('DOMContentLoaded', function() {
            const consent = localStorage.getItem('posthog_consent');
            if (consent === 'accepted') {
                initializePostHog();
                hideConsentBanner();
            } else if (consent === 'declined') {
                hideConsentBanner();
            }
        });

        function initializePostHog() {
            if (posthogInitialized) return;

            // Load PostHog script
            const script = document.createElement('script');
            script.innerHTML = `
                !function(t,e){var o,n,p,r;e.__SV||(window.posthog && window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init hi Er $r ui br Sr capture Ri calculateEventProperties Tr register register_once register_for_session unregister unregister_for_session Or getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Rr Pr createPersonProfile Cr mr Fr opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing kr debug L Ir getPageViewId captureTraceFeedback captureTraceMetric".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
                posthog.init('phc_Y26kfjcFPf7ndelzeEjta1gN8Dcu7KSvx7DGghU7hUm', {
                    api_host: 'https://us.i.posthog.com',
                    defaults: '2025-05-24',
                    person_profiles: 'identified_only'
                });
            `;
            document.head.appendChild(script);

            posthogInitialized = true;
            console.log('PostHog initialized');
        }

        function acceptConsent() {
            localStorage.setItem('posthog_consent', 'accepted');
            initializePostHog();
            hideConsentBanner();
        }

        function declineConsent() {
            localStorage.setItem('posthog_consent', 'declined');
            hideConsentBanner();
        }

        function hideConsentBanner() {
            document.getElementById('consentBanner').classList.add('hidden');
        }

    </script>
</body>
</html>