Track user interactions with PostHog JavaScript library

by eurica

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cloud Provider Survey</title>
</head>
<body>
  <label for="cloud-select">Select your cloud provider:</label><br>
  <select id="cloud-select">
    <option value="">-- Please choose an option --</option>
    <option value="Google Cloud">Google Cloud</option>
    <option value="AWS">AWS</option>
    <option value="Azure">Azure</option>
    <option value="Redis">Redis</option>
    <option value="Other">Other</option>
  </select>

  <div id="survey-container" style="margin-top: 20px;"></div>

  <script>
    document.getElementById('cloud-select').addEventListener('change', function () {
      const selected = this.value;
      if (selected === 'Other') {
        posthog.renderSurvey('01980a39-cc86-0000-2a4a-7a8292b70a64', '#survey-container');
      }
    });
  </script>
</body>
</html>

CSS

select#cloud-select {
  font-size: 200%;
}

JavaScript

!function(t,e){var o,n,p,r;e.__SV||(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 Ie Ts Ms Ee Es Rs capture Ge calculateEventProperties Os register register_once register_for_session unregister unregister_for_session js getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey 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 Ds Fs createPersonProfile Ls Ps opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing Cs debug I As 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_9HbwdJdwxwBqfWVPdtKd9NX2rEPqDJvXErRmwyq9c8B', {
        api_host: 'https://us.i.posthog.com',
        defaults: '2025-05-24',
        person_profiles: 'identified_only', // or...