Add alert container tracking for link analytics (#56209)

Author: heiskr

src/content-render/tests/render-content.js

@@ -243,4 +243,18 @@ var a = 1
     expect(el.data('clipboard')).toBe(2967273189)
     // Generates a murmurhash based ID that matches a <pre>
   })
+
+  test('renders alerts with data-container attribute for analytics', async () => {
+    const template = nl(`
+> [!NOTE]
+> This is a note with a [link](https://example.com)
+    `)
+    const html = await renderContent(template, { alertTitles: { NOTE: 'Note' } })
+    const $ = cheerio.load(html)
+    const alertEl = $('.ghd-alert')
+    expect(alertEl.length).toBe(1)
+    expect(alertEl.attr('data-container')).toBe('alert')
+    expect(alertEl.hasClass('ghd-alert-accent')).toBe(true)
+    expect(alertEl.find('a[href="https://example.com"]').length).toBe(1)
+  })
 })

src/content-render/unified/alerts.js

@@ -34,6 +34,7 @@ export default function alerts({ alertTitles = {} }) {
       const alertType = alertTypes[getAlertKey(node).toUpperCase()]
       node.tagName = 'div'
       node.properties.className = 'ghd-alert ghd-alert-' + alertType.color
+      node.properties.dataContainer = 'alert'
       node.children = [
         h(
           'p',

src/events/lib/schema.ts

@@ -320,6 +320,7 @@ const link = {
         'lead',
         'notifications',
         'article',
+        'alert',
         'toc',
         'footer',
         'static',

src/frame/components/ui/Alert/Alert.tsx

@@ -25,6 +25,7 @@ export function Alert({ className, html, children, type = 'IMPORTANT' }: AlertPr
   return (
     <div
       data-testid="alert"
+      data-container="alert"
       className={cx(className, styles.container, `ghd-alert ghd-alert-${alertTypes[type].color}`)}
     >
       <p className="ghd-alert-title">