feat(docker): add support for Google Tag Manager (#5130)

swagger-api · Jun 11, 2024 · cd9b7d7 · cd9b7d7
1 parent a04823d
commit cd9b7d7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -141,6 +141,12 @@ docker run -d -p 80:8080 -e BASE_URL=/swagger-editor swaggerapi/swagger-editor
 docker run -d -p 80:80 -e PORT=80 swaggerapi/swagger-editor
 ```
 
+* You can specify Google Tag Manager ID via `GTM` variable for tracking the usage of the swagger-editor.
+
+```
+docker run -d -p 80:8080 -e GTM=GTM-XXXXXX swaggerapi/swagger-editor
+```
+
 You can also customize the different endpoints used by the Swagger Editor with the following environment variables. For instance, this can be useful if you have your own Swagger generator server:
 
 Environment variable | Default value

diff --git a/docker-run.sh b/docker-run.sh
@@ -59,6 +59,14 @@ if [[ "${URL_OAS3_GENERATOR}" ]]; then
   fi
 fi
 
+## Adding Google Tag Manager if GTM is set
+if [[ "${GTM}" ]]; then
+  GTM_SCRIPT="<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${GTM}');</script>"
+  GTM_NOSCRIPT="<noscript><iframe src=\"https://www.googletagmanager.com/ns.html?id=${GTM}\" height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"></iframe></noscript>"
+  sed -i "s~<!-- Google Tag Manager -->~$GTM_SCRIPT~" $INDEX_FILE
+  sed -i "s~<!-- Google Tag Manager (noscript) -->~$GTM_NOSCRIPT~" $INDEX_FILE
+fi
+
 ## Gzip after replacements
 #find /usr/share/nginx/html/ -type f -regex ".*\.\(html\|js\|css\)" -exec sh -c "gzip < {} > {}.gz" \;
 #

diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Swagger Editor</title>
+  <!-- Google Tag Manager -->
   <style>
   * {
     box-sizing: border-box;
@@ -44,6 +45,7 @@
 </head>
 
 <body>
+  <!-- Google Tag Manager (noscript) -->
   <div id="swagger-editor"></div>
   <script src="./dist/swagger-editor-bundle.js"> </script>
   <script src="./dist/swagger-editor-standalone-preset.js"> </script>