How do I add certain script snippets inside <head> and <body> tags when using HtmlWebackPlugin #1001
Comments
|
The next major will provide an easier way to inject html tags to the head or body. For now I wrote down a solution quickly without testing - so it might not work properly. This could look like the following (in a new file or in your webpack config) class GoogleTagManagerHtmlPlugin{
apply(compiler) {
// Hook into a webpack compilation
compiler.hooks.compilation.tap('GoogleTagManagerHtmlPlugin', (compilation) => {
// Hook into `htmlWebpackPluginAlterAssetTags`
// !! Careful this will change in the upcoming html webpack plugin version !!
compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync('GoogleTagManagerHtmlPlugin',
(pluginArgs, cb) => {
// You can use either `head` or `body` and either `push` or `unshift`:
pluginArgs.head.push({
tagName: 'script',
voidTag: false,
attributes: {
},
innerHTML: 'alert("hello world")'
});
cb(null, pluginArgs)
})
})
}
}The plugin section of your config [
new HtmlWebpackPlugin({ /* your config */}),
new GoogleTagManagerHtmlPlugin()
} |
|
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Description
I would like to add custom script at different parts of
<head>and<body>tags.Use case: trying to add GTM tags to different pages.
Example:
How do I,
<script> alert('in head tag') </script>inside the<head>tag as the first child<script> alert('in body tag') </script>inside the<body>tag as the first childHere is the stackoverflow link: https://stackoverflow.com/questions/51285711/how-do-i-add-certain-script-tags-inside-head-and-body-tags-when-using-htmlwe
Here is the snippet in my Webpack config
Config
The text was updated successfully, but these errors were encountered: