Email Analytics Tracker Generator

Build a utility that generates responsive email templates with embedded tracking attributes for analytics and testing purposes.

Requirements

Your utility should generate an MJML-based email template that includes multiple content sections (hero, features, call-to-action). The generated HTML must include custom data attributes on specific elements to enable analytics tracking without modifying the visual structure.

Core Functionality

Create a function generateTrackedEmail(config) that:

1. Accepts a configuration object specifying tracking requirements
2. Generates an MJML template with appropriate content sections
3. Injects tracking attributes (e.g., data-track-id, data-analytics-type, data-test-id) into the rendered HTML elements using CSS selectors
4. Returns the final compiled HTML

Configuration Structure

The configuration object should support:

• trackingId: A unique identifier for the email campaign
• sections: An array of content sections (each with title, description, and selector)
• attributeMappings: Mappings of CSS selectors to attribute key-value pairs that should be injected

Example Output Requirements

The generated HTML should:

• Contain proper email structure with responsive design
• Have data attributes injected on elements matching the provided selectors (e.g., buttons, images, text blocks)
• Maintain visual integrity (attributes should not affect rendering)

Implementation

@generates

API

/**
 * Generates a tracked email template with analytics attributes
 *
 * @param {Object} config - Configuration object
 * @param {string} config.trackingId - Unique tracking identifier
 * @param {Array} config.sections - Content sections for the email
 * @param {Object} config.attributeMappings - CSS selector to attribute mappings
 * @returns {string} Compiled HTML email with injected tracking attributes
 */
function generateTrackedEmail(config) {
  // IMPLEMENTATION HERE
}

module.exports = { generateTrackedEmail };

Test Cases

• Given a simple configuration with one section and one attribute mapping for a button, the generated HTML contains a button element with the specified data attribute @test
• Given a configuration with multiple sections and multiple attribute mappings targeting different CSS classes, all matching elements in the generated HTML have their respective data attributes injected @test
• Given a configuration with a CSS selector targeting nested elements (e.g., ".card .button"), the generated HTML has attributes correctly applied to nested elements matching the selector @test

Dependencies { .dependencies }

mjml { .dependency }

Provides email template compilation and HTML generation support.