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[bot]]

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.

[vikashrajgupta]

@dosu. I have followed the steps shared by you and still, I'm not getting any logs or js loaded in the network.

Here are the steps that I have done for this:

1. Created a tail_js_custom_extra.html custom file inside directory /home/vikashgupta/Documents/superset/superset/templates/superset/
2. Checked spa.html and it already contains the below lines of code

{#
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND, either express or implied.  See the License for the
  specific language governing permissions and limitations
  under the License.
#}
{% extends "superset/basic.html" %}

{% block navbar %}
{% endblock %}

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

3. And then follow the 3rd steps shared by you i.e install and build
4. After that I run the following command

docker-compose -f docker-compose-non-dev.yml down
docker-compose -f docker-compose-non-dev.yml up -d

And then checked the logs and network logs but it didn't work.

Kindly help me to resolve this issue

Note- I'm using non-dev config on my localhost as well

[vikashrajgupta]

Dosu @dosu - Can you please help me out to resolve this issue?