How I can add custom layout or install analytics tool in Superset?

[vikashrajgupta]

Screenshot

Note: commented code is the posthog snippet

Description

Postghog-Js is an analytics tool and also records the user activity of the interface and I wanted to install this in an Apache superset.

I have explored the superset project structure and found one of the HTML files i.e. tail_js_custom_extra.html where they have mentioned that you can add custom frontend code like Google Analytics etc...

[describe the issue here!]

However, I have tried to add a custom layout or script tag with the posthog snippet and perform the following steps.

1. cd superset-frontend
2. npm install
3. npm run build
4. docker down
5. docker up

But didn't work, even when I tried to simply add a console.log('something text') it also didn't work in my case.

Can anyone help in this to resolve this issue?

[dosubot]

Hey @vikashrajgupta! I'm here to help you out with any bugs, questions, or contributions you have. Let's work together to resolve your issue.

To add custom JavaScript code or integrate an analytics tool like PostHog into Apache Superset, follow these steps:

1. Create a Custom HTML File:

   • Create a file named tail_js_custom_extra.html in the superset/templates/superset/ directory.
   • Add your custom JavaScript code or PostHog integration script to this file. For example:

   <script>
     console.log('PostHog script loaded');
     !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)))}}(o=t.createElement("script")).type="text/javascript",o.async=!0,o.src=s.api_host+"/static/array.js",(n=t.getElementsByTagName("script")[0]).parentNode.insertBefore(o,n),r=e;var c=function(t){return function(){r.push([t].concat(Array.prototype.slice.call(arguments,0)))}},u=["capture","identify","alias","people.set","people.set_once","people.unset","people.increment","people.append","people.union","people.track_charge","people.clear_charges","people.delete_user"];for(p=0;p<u.length;p++)g(r,u[p]);e._i.push([i,s,a])},e.__SV=1.0)}(document,window.posthog||[]);
     posthog.init('YOUR_API_KEY', {api_host: 'https://app.posthog.com'});
   </script>

2. Include the Custom HTML File:

   • Ensure that tail_js_custom_extra.html is included in the tail_js block of spa.html:

   {% block tail_js %}
     {{ js_bundle(entry) }}
     {% include "tail_js_custom_extra.html" %}
   {% endblock %}

3. Build the Frontend:

   • Navigate to the superset-frontend directory and run the following commands:

   cd superset-frontend
   npm install
   npm run build

4. Restart Docker Containers:

   • Restart your Docker containers to apply the changes:

   docker-compose down
   docker-compose up

By following these steps, your custom JavaScript code should be executed, and the PostHog analytics tool should be integrated into Apache Superset ^[1][2][3].

To continue talking to Dosu, mention @dosu.