Inserting JavaScript in generated HTML Inserting JavaScript JavaScript code can be bundled in a custom plug-in and automatically inserted into the generated HTML pages to enable web analytics or dynamic content delivery. footer require head transformations HTML5JavaScript, adding

This scenario walks through the process of creating a very simple plug-in (com.example.html5-javascript) that creates a new transformation type: .

The transformation includes a custom page footer file with a JavaScript tracking snippet and sets the args.ftr parameter to integrate the script content in the HTML5 footer element of the generated pages.

This example inserts a tracking snippet for Google Analytics, but the basic approach is the same for other analytics platforms or similar use cases that require custom JavaScript. In the plugins directory, create a directory named com.example.html5-javascript. In the new com.example.html5-javascript directory, create a plug-in configuration file (plugin.xml) that declares the new transformation and its dependencies. Sample <filepath>plugin.xml</filepath> file This plug-in will extend the default HTML5 transformation, so the require element explicitly defines org.dita.html5 as a dependency. In the com.example.html5-javascript directory, create a subdirectory named include. In the new include subdirectory, create a file named javascript.ftr.xml with your custom JavaScript code. Sample <filepath>javascript.ftr.xml</filepath> file

The division wrapper will be discarded when generating HTML files, and the contents will be inserted into the footer element of each page.

 In the com.example.html5-javascript root directory, add an Ant script (build_html5-javascript.xml) to define the transformation type and set the path to the JavaScript footer file created in the previous step. Sample build file: <filepath>build_html5-javascript.xml</filepath> The files for this sample plug-in are included in the DITA-OT installation directory under docsrc/samples/plugins/com.example.html5-javascript/ and on GitHub.

The plug-in directory has the following layout and files:

com.example.html5-javascript ├── build_html5-javascript.xml ├── include │   └── javascript.ftr.xml └── plugin.xml
  1. Run --install to install the plug-in and make the transformation available.
  2. Build output with the new transformation type to verify that the plug-in works as intended. --input=my.ditamap --format=
  3. Open one of the generated HTML topic files in a modern web browser and check the JavaScript Console. When the page is loaded, Adding Google Analytics tracker will appear on the console to verify that the sample script is loaded.
  4. Remove the console.log debugging message from the sample JavaScript code, and replace the 'UA-XXXXX-Y' placeholder string with the tracking ID of the Google Analytics property you wish to track.
This example places the JavaScript code in the page footer to ensure that page display is not delayed while the script is loaded. If your JavaScript code supports pre-loading and your application targets modern browsers that recognize the async script attribute, you may prefer to insert the JavaScript snippet in the head element of the generated HTML files using the args.hdf parameter intead.