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

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?

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?

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

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

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

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?