Add Amplitude tracking to docs (#40494)

Gaauwe Rombouts created 2 weeks ago

Closes #ISSUE

Release Notes:

- N/A *or* Added/Fixed/Improved ...

Change summary

.github/workflows/deploy_cloudflare.yml |  2 ++
crates/docs_preprocessor/src/main.rs    |  2 ++
docs/theme/index.hbs                    | 18 +++++++++++++++++-
3 files changed, 21 insertions(+), 1 deletion(-)

Detailed changes

.github/workflows/deploy_cloudflare.yml

@@ -22,6 +22,8 @@ jobs:
 
       - name: Build docs
         uses: ./.github/actions/build_docs
+        env:
+          DOCS_AMPLITUDE_API_KEY: ${{ secrets.DOCS_AMPLITUDE_API_KEY }}
 
       - name: Deploy Docs
         uses: cloudflare/wrangler-action@da0e0dfe58b7a431659754fdf3f186c529afbe65 # v3

crates/docs_preprocessor/src/main.rs

@@ -529,6 +529,7 @@ fn handle_postprocessing() -> Result<()> {
         .as_str()
         .expect("Default title not a string")
         .to_string();
+    let amplitude_key = std::env::var("DOCS_AMPLITUDE_API_KEY").unwrap_or_default();
 
     output.insert("html".to_string(), zed_html);
     mdbook::Renderer::render(&mdbook::renderer::HtmlHandlebars::new(), &ctx)?;
@@ -597,6 +598,7 @@ fn handle_postprocessing() -> Result<()> {
         let meta_title = format!("{} | {}", page_title, meta_title);
         zlog::trace!(logger => "Updating {:?}", pretty_path(&file, &root_dir));
         let contents = contents.replace("#description#", meta_description);
+        let contents = contents.replace("#amplitude_key#", &amplitude_key);
         let contents = title_regex()
             .replace(&contents, |_: &regex::Captures| {
                 format!("<title>{}</title>", meta_title)

docs/theme/index.hbs

@@ -311,7 +311,23 @@
           })();
         </script>
 
-
+        <!-- Amplitude Analytics -->
+        <script>
+          (function() {
+            var amplitudeKey = '#amplitude_key#';
+            if (amplitudeKey && amplitudeKey.indexOf('#') === -1) {
+              var script = document.createElement('script');
+              script.src = 'https://cdn.amplitude.com/script/' + amplitudeKey + '.js';
+              script.onload = function() {
+                window.amplitude.init(amplitudeKey, {
+                  fetchRemoteConfig: true,
+                  autocapture: true
+                });
+              };
+              document.head.appendChild(script);
+            }
+          })();
+        </script>
     </div>
     </body>
 </html>