Skip to content
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.

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

Load the toolbar without loading posthog-js #9100

Open
pauldambra opened this issue Mar 18, 2022 · 8 comments
Open

Load the toolbar without loading posthog-js #9100

pauldambra opened this issue Mar 18, 2022 · 8 comments
Labels
enhancement New feature or request feature/toolbar Feature Tag: Toolbar

Comments

@pauldambra
Copy link
Member

pauldambra commented Mar 18, 2022

Is your feature request related to a problem?

maybe associated with PostHog/posthog-js#65

Currently posthog-js controls toolbar initialisation. In toolbar.js/maybeLoadEditor

If you want to use, for example, only Segment on your site. You can use app.posthog.com to analyse your data. But can't use the toolbar on your site.

Describe the solution you'd like

If posthog-js only used the decide call to choose whether to add toolbar.js into the page and toolbar was responsible for its own initialisation then you could use toolbar without using posthog-js

The code could still live in the PostHog-js library and continue to be bundled separately

Describe alternatives you've considered

Not fixing this

Additional context

Thank you for your feature request – we love each and every one!

@pauldambra pauldambra added enhancement New feature or request feature/toolbar Feature Tag: Toolbar labels Mar 18, 2022
@mariusandra
Copy link
Collaborator

You can still use posthog-js for the toolbar, just turn off all data capturing. It'll load more bytes of javascript than you might want, but it should work.

@pauldambra
Copy link
Member Author

Harder to explain to users

to get library B you add library A with particular config

over

to get library B you add library B

@pauldambra
Copy link
Member Author

I tested this and for the workaround of including posthog-js but disabling all capture you set config

{api_host:'https://blah.com', autocapture: false, capture_pageview: false, disable_session_recording: true,}

@mariusandra
Copy link
Collaborator

The usual scope creep alert, but... damn that's 3 different styles of writing "foo is enabled" 🤣

"One day" we would benefit from an unified approach like:

{ apiHost: 'https://foobar.com/', captureClicks: true, capturePageviews: true, captureRecording: false )

... but don't get me started about what other things should be refactored in that library... :D

@IntelliAssistHQ
Copy link

Shopify redirects the hash param url back to homepage, so the toolbar doesn't load in Shopify.

@eromero90
Copy link

Hey team, I just noticed this issue.

The toolbar won't load if you have a frontend that overrides the injected API token (the information after the #) before the posthog-js library (or snippet) loads and has a chance to read the API token.

This can be fixed using Window PostMessage API.

Possible solution:

  1. In PostHog app when you enable toolbar, Create a Listener to listen for messages sent via Window.postMessage attached to the site you want to use the toolbar (ie, mysite.com).

  2. Create a Listener in posthog-js to listen for messages sent via Window.postMessage. When the posthog-js script loads on the site (mysite.com), it should set up a listener to receive messages and send a message to posthog.com to tell the app that the app is ready.

  3. In PostHog app where the listener is ready, get the message from mysite.com and return the credentials to enable the toolbar.

So using postMessage API you should be able to enable cross-window communication without worrying about query params being overridden by the frontend.

@matthewwong525
Copy link

Hello! I'm trying to install the toolbar on my shopify website with no success. I noticed that the hash is updated so i tried saving it into a variable and then loading it (see below). I'm able to do that but nothing seems to happen regardless.

Please help. I'm so close to switching over to posthog for my analytics for shopify. I just need the toolbar and it'll be perfect. 🙏

// store toolbarJSON
const toolbarJSON = new URLSearchParams(window.location.hash.substring(1)).get('__posthog');
      
// initialize posthog
!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.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 capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep 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 createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".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_XXX',{
  api_host:'https://us.i.posthog.com',
  person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
  loaded: () => {
    if (toolbarJSON) {
      posthog.loadToolbar(JSON.parse(toolbarJSON));
    }
  },
})

@matthewwong525
Copy link

Just to update anyone reading this in the future. I figured out the problem. It was because my shopify store had global css that set the display to none for empty divs. This effectively hid the toolbar. The workaround was to add a timeout (to wait for the toolbar to load) and set the display to block. Here's the code i used to do that:

!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.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 capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep 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 createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".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_XXX',{
  api_host:'https://us.i.posthog.com',
  person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
  loaded: () => {
    // make posthog toolbar visible
    setTimeout(() => {
      document.getElementById('__POSTHOG_TOOLBAR__').style.display = 'block';
    }, 1000);
  },
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request feature/toolbar Feature Tag: Toolbar
Development

No branches or pull requests

5 participants