# Include JavaScript code in HTML using tex4ht

I have trouble including JavaScript code in the HTML header generated by tex4ht.

The script I want to include is:

<script type="text/javascript">
var _gaq = _gaq || [];
var pluginUrl =
'//www.google-analytics.com/plugins/ga/inpage_linkid.js';
_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
_gaq.push(['_setAccount', 'UA-45193039-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>


Can anybody tell me how to do this. The documentation on the

\JavaScript .....\EndJavaScript


command in the Tex4ht online manual (mn) is not very helpful and gives loads of incomprehensible error messages.

Herman Adèr

• Welcome to TeX.SX! Can you tell us, what you have tried out inclusive the error messages you've got? Aug 2, 2017 at 13:50
• I used Miktex to translate my LaTeX code including the TeX4ht package. In the .cfg file I first tried to use \ScriptEnv to make a JavaScript environment. But it fails to generate the script above as a verbatim insertion. Surrounding with \JavaScript...\EndJavaScript Aug 2, 2017 at 14:32
• does not work either. Aug 2, 2017 at 14:33

## 1 Answer

The manual isn't very helpful in this case, it is even misleading, because \JavaScript command isn't defined by default, only when javascript option is used it is defined. But it is quite easy to define your own version:

\Preamble{xhtml}
\begin{document}
\ScriptCommand{\JavaScript}{\HCode{\Hnewline<script type="text/javascript">\Hnewline}}{\HCode{\Hnewline</script>\Hnewline}}
\JavaScript
var _gaq = _gaq || [];
var pluginUrl =
'//www.google-analytics.com/plugins/ga/inpage_linkid.js';
_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
_gaq.push(['_setAccount', 'UA-45193039-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
\EndJavaScript
\EndPreamble


In this configuration file, \JavaScript command is defined first:

\ScriptCommand{\JavaScript}{\HCode{\Hnewline<script type="text/javascript">\Hnewline}}{\HCode{\Hnewline</script>\Hnewline}}


The \Hnewline commands are used to insert line breaks. The JavaScript code is then inserted without <script ...> tags, because \JavaScript command will take care of this.

One important thing is to place the JavaScript after \begin{document} in the configuration file, this ensures that it is inserted in the HTML header:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd-->
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
var pluginUrl =
'//www.google-analytics.com/plugins/ga/inpage_linkid.js';
_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
_gaq.push(['_setAccount', 'UA-45193039-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
<title>mytitle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="TeX4ht (http://www.tug.org/tex4ht/)" />
<meta name="originator" content="TeX4ht (http://www.tug.org/tex4ht/)" />
<!-- charset=utf-8,html,xhtml -->
<meta name="src" content="sample.tex" />
<link rel="stylesheet" type="text/css" href="sample.css" />
</head><body
>

• Thank you very much. I found the same solution. I will also try the javascript option you suggest. Aug 4, 2017 at 8:37
• In the original question I made another mistake somewhere else in the config file which accounted for the error messages. Thanks again. Problem solved. Aug 4, 2017 at 8:40
• Is there a way to do this so that the JavaScript appears after the MathJax JavaScript? May 10, 2021 at 21:58
• @Rushi I would just link to external JS in \Configure{@/BODY}' or something similar. May 10, 2021 at 22:11
• @michal.h21 thanks, I will try. I am trying to do a sidebar similar to this, and I am using this configuration to insert macros. The problem is that the macros, when processed by MathJax, result in a bunch of empty and hidden mjx-container html tags that are direct children of <body>`. Those throw off the grid layout you use in the documentation. I am now trying a JavaScript to get rid of those, but it needs to load after MathJax. May 10, 2021 at 22:24