<
DQM Connect, 2024.13
DQM Connect, 2024.13
Documentation

Developer notes: Headless Support – DQM Connect

In FirstSpirit projects with an external preview URL, the front-end application must be extended with an additional component so that the interaction with DQM Connect functions correctly.

The developer notes describe the individual steps required for this.

Setup

Integrating the JavaScript library

Instead of taking the NPM package you can directly incorporate the DQM Headless Connector's JavaScript into the frontend application.

Use the HTML statement:

<script 
  src="http://$FS_INSTANCE/fs5webedit/dqm-connector/dqm-headless-connector.min.js">
</script>

Call-up in the front-end application

The front-end application needs to be fully loaded so that all content is checked by DQM.

Execute the following code:

if (environment.enableDqmConnector) {
    const dqmConnector = new DqmHeadlessConnector();
    dqmConnector.refreshDqmReport();
}

If further content is reloaded at a later stage — for example by continuous scrolling — the call must be made again.

  • Don't run this code in a production environment.
  • If the front-end application has more than one page (e.g. via routing), this call-up shall only be executed when a page is completely loaded.

Opening the report in ContentCreator

The DQM report in the right bar displays a list with entries.

Troubleshooting

Problem Solution

ContentCreator doesn't display a DQM report.

The DQM Connector module must be installed and configured on the FirstSpirit server.

The front-end application is not displayed in ContentCreator.

The front-end application must be running. The URL in ContentCreator must be configured to be an external preview URL.

There are no entries in the DQM report.

  • Install the npm package “dqm-headless-connector” in the front-end application.

  • Retrieve the package.
    The browser console shows a confirmation:

    Transmitting HTML from external preview website to server...

    HTML of external preview website transmitted successfully.

If you don't see any entries now, it's possible that there are no problems in the front-end application.

Table of Contents