Index string not formatted correctly? How do I add a small JavaScript tag?

Dash Python
1

Hi. I’m trying to add analytics by Plausible.io to my Dash app. Kinda like how you’d do it for Google Analytics.
Here are Plausible’s instructions:

And my Dash code:

app.index_string = """
<!DOCTYPE html>
<html>
  <head>
    <script defer data-api="/api/event" data-domain="mydomain.com" src="/js/script.js" type="application/javascript"></script>
    {%metas%}
    <title>{%title%}</title>
    {%favicon%}
    {%css%}
  </head>
  <body>
    {%app_entry%}
    <footer>
      {%config%}
      {%scripts%}
      {%renderer%}
    </footer>
  </body>
</html>
"""

But when I check the console via browser’s F12 on my website, I see this error:
Uncaught SyntaxError: expected expression, got '<' script.js:2

It seems that my index_string is formatted incorrectly… but it looks almost the exact same as what’s in the docs.

The contents of my script.js are as follows:

<!DOCTYPE html>
<html>
  <head>
    <script defer data-api="/api/event" data-domain="domain.com" src="/js/script.js" type="application/javascript"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Cool Website</title>
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico?m=1665605452.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/darkly/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">
  </head>
  <body>
    
<div id="react-entry-point">
    <div class="_dash-loading">
        Loading...
    </div>
</div>

    <footer>
      <script id="_dash-config" type="application/json">{"url_base_pathname":null,"requests_pathname_prefix":"/","ui":false,"props_check":false,"show_undo_redo":false,"suppress_callback_exceptions":false,"update_title":"Updating...","children_props":{"dash_core_components":{"Checklist":["options[].label"],"Clipboard":[],"ConfirmDialog":[],"ConfirmDialogProvider":[],"DatePickerRange":[],"DatePickerSingle":[],"Download":[],"Dropdown":["options[].label"],"Graph":[],"Input":[],"Interval":[],"Link":[],"Loading":[],"Location":[],"LogoutButton":[],"Markdown":[],"RadioItems":["options[].label"],"RangeSlider":[],"Slider":[],"Store":[],"Tab":[],"Tabs":[],"Textarea":[],"Tooltip":[],"Upload":[]},"dash_html_components":{"A":[],"Abbr":[],"Acronym":[],"Address":[],"Area":[],"Article":[],"Aside":[],"Audio":[],"B":[],"Base":[],"Basefont":[],"Bdi":[],"Bdo":[],"Big":[],"Blink":[],"Blockquote":[],"Br":[],"Button":[],"Canvas":[],"Caption":[],"Center":[],"Cite":[],"Code":[],"Col":[],"Colgroup":[],"Content":[],"Data":[],"Datalist":[],"Dd":[],"Del":[],"Details":[],"Dfn":[],"Dialog":[],"Div":[],"Dl":[],"Dt":[],"Em":[],"Embed":[],"Fieldset":[],"Figcaption":[],"Figure":[],"Font":[],"Footer":[],"Form":[],"Frame":[],"Frameset":[],"H1":[],"H2":[],"H3":[],"H4":[],"H5":[],"H6":[],"Header":[],"Hgroup":[],"Hr":[],"I":[],"Iframe":[],"Img":[],"Ins":[],"Kbd":[],"Keygen":[],"Label":[],"Legend":[],"Li":[],"Link":[],"Main":[],"MapEl":[],"Mark":[],"Marquee":[],"Meta":[],"Meter":[],"Nav":[],"Nobr":[],"Noscript":[],"ObjectEl":[],"Ol":[],"Optgroup":[],"Option":[],"Output":[],"P":[],"Param":[],"Picture":[],"Plaintext":[],"Pre":[],"Progress":[],"Q":[],"Rb":[],"Rp":[],"Rt":[],"Rtc":[],"Ruby":[],"S":[],"Samp":[],"Script":[],"Section":[],"Select":[],"Shadow":[],"Slot":[],"Small":[],"Source":[],"Spacer":[],"Span":[],"Strike":[],"Strong":[],"Sub":[],"Summary":[],"Sup":[],"Table":[],"Tbody":[],"Td":[],"Template":[],"Textarea":[],"Tfoot":[],"Th":[],"Thead":[],"Time":[],"Title":[],"Tr":[],"Track":[],"U":[],"Ul":[],"Var":[],"Video":[],"Wbr":[],"Xmp":[]},"dash_table":{"DataTable":[]},"dash_bootstrap_components":{"Accordion":[],"AccordionItem":[],"Alert":[],"Badge":[],"Breadcrumb":[],"Button":[],"ButtonGroup":[],"Card":[],"CardBody":[],"CardFooter":[],"CardGroup":[],"CardHeader":[],"CardImg":[],"CardImgOverlay":[],"CardLink":[],"Carousel":[],"Collapse":[],"DropdownMenu":[],"DropdownMenuItem":[],"Fade":[],"Form":[],"FormFeedback":[],"FormFloating":[],"FormText":[],"Label":[],"Checkbox":[],"Checklist":[],"Input":[],"InputGroup":[],"InputGroupText":[],"RadioButton":[],"RadioItems":[],"Select":[],"Switch":[],"Textarea":[],"Col":[],"Container":[],"Row":[],"ListGroup":[],"ListGroupItem":[],"Modal":[],"ModalBody":[],"ModalFooter":[],"ModalHeader":[],"ModalTitle":[],"Nav":[],"NavItem":[],"NavLink":[],"Navbar":[],"NavbarBrand":[],"NavbarSimple":[],"NavbarToggler":[],"Offcanvas":[],"Pagination":[],"Popover":[],"PopoverBody":[],"PopoverHeader":[],"Progress":[],"Spinner":[],"Table":[],"Tab":[],"Tabs":[],"Toast":[],"Tooltip":[]},"dash_leaflet":{"BaseLayer":null,"Circle":null,"CircleMarker":null,"Colorbar":null,"DivMarker":null,"EasyButton":null,"EditControl":null,"FeatureGroup":null,"FullscreenControl":null,"GeoJSON":null,"GeoTIFFOverlay":null,"GestureHandling":null,"ImageOverlay":null,"LayerGroup":null,"LayersControl":null,"LocateControl":null,"Map":null,"Marker":null,"MarkerClusterGroup":null,"MeasureControl":null,"Minichart":null,"Overlay":null,"Pane":null,"Polygon":null,"Polyline":null,"PolylineDecorator":null,"Popup":null,"Rectangle":null,"SVGOverlay":null,"ScaleControl":null,"TileLayer":null,"Tooltip":null,"VideoOverlay":null,"WMSTileLayer":null}}}</script>
      <script src="/_dash-component-suites/dash/deps/polyfill@7.v2_6_1m1665605533.12.1.min.js"></script>
<script src="/_dash-component-suites/dash/deps/react@16.v2_6_1m1665605533.14.0.min.js"></script>
<script src="/_dash-component-suites/dash/deps/react-dom@16.v2_6_1m1665605533.14.0.min.js"></script>
<script src="/_dash-component-suites/dash/deps/prop-types@15.v2_6_1m1665605533.8.1.min.js"></script>
<script src="/_dash-component-suites/dash_leaflet/dash_leaflet.v0_1_23m1665605531.min.js"></script>
<script src="/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v1_2_1m1665605533.min.js"></script>
<script src="/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_6_1m1665605532.min.js"></script>
<script src="/_dash-component-suites/dash/dcc/dash_core_components.v2_6_1m1665605532.js"></script>
<script src="/_dash-component-suites/dash/dcc/dash_core_components-shared.v2_6_1m1665605532.js"></script>
<script src="/_dash-component-suites/dash/html/dash_html_components.v2_0_5m1665605533.min.js"></script>
<script src="/_dash-component-suites/dash/dash_table/bundle.v5_1_5m1665605532.js"></script>
      <script id="_dash-renderer" type="application/javascript">var renderer = new DashRenderer();</script>
    </footer>
  </body>
</html>

What am I missing?

2

Hello @the.oldest.house,

I don’t think your script.js is necessary. Is your reverse proxy setup to redirect to the site that they said to use?

3

Hi, yes, the reverse proxy portion is set up and good to go.

4

What do you see when you navigate to that page directly?

5

If I navigate to domain.com/js/script.js, it just returns me to the main page of my Dash app.

6

Ok. That shouldn’t be happening, it should take you to their JavaScript.

Did you restart your reverse proxy for the changes to the config to take effect?