Native Drupal A/B Testing with Figma, Make, and MCP

test_id: homepage_hero_v1
hypothesis: "Emphasizing trust signals will increase form completions"
target_metric: form_submission_rate
traffic_split: 50/50
start_date: 2025-12-01
end_date: 2025-12-31
target_audience: new_visitors

// Make JavaScript module
// Parses Figma frame descriptions for A/B test metadata

const frame = input.frame;
const description = frame.description;

// Extract YAML frontmatter from description
const yamlMatch = description.match(/```yaml\n([\s\S]*?)\n```/);
if (!yamlMatch) {
  return { hasTest: false };
}

const yaml = require('js-yaml');
const metadata = yaml.load(yamlMatch[1]);

// Get variants from frame children
const variants = frame.children
  .filter(child => child.name.startsWith('Variant'))
  .map(variant => ({
    id: variant.id,
    name: variant.name,
    type: variant.name.includes('Control') ? 'control' : 'treatment'
  }));

return {
  hasTest: true,
  testId: metadata.test_id,
  hypothesis: metadata.hypothesis,
  targetMetric: metadata.target_metric,
  trafficSplit: metadata.traffic_split,
  startDate: metadata.start_date,
  endDate: metadata.end_date,
  targetAudience: metadata.target_audience,
  variants: variants
};

composer require drupal/eck
composer require drupal/views
composer require drupal/paragraphs
drush en eck views paragraphs -y

# config/sync/eck.eck_entity_type.ab_test.yml
uuid: ...
langcode: en
status: true
dependencies: {}
id: ab_test
label: 'A/B Test'
created: true
changed: true
uid: true
title: true

// web/modules/custom/mindsing_ab_test/mindsing_ab_test.install

function mindsing_ab_test_install() {
  // Create fields for AB Test entity
  $fields = [
    'field_test_id' => [
      'type' => 'string',
      'label' => 'Test ID',
      'required' => TRUE,
    ],
    'field_hypothesis' => [
      'type' => 'text_long',
      'label' => 'Hypothesis',
    ],
    'field_target_metric' => [
      'type' => 'string',
      'label' => 'Target Metric',
    ],
    'field_traffic_split' => [
      'type' => 'string',
      'label' => 'Traffic Split',
      'default_value' => '50/50',
    ],
    'field_start_date' => [
      'type' => 'datetime',
      'label' => 'Start Date',
    ],
    'field_end_date' => [
      'type' => 'datetime',
      'label' => 'End Date',
    ],
    'field_target_audience' => [
      'type' => 'string',
      'label' => 'Target Audience',
    ],
    'field_status' => [
      'type' => 'list_string',
      'label' => 'Test Status',
      'allowed_values' => [
        'draft' => 'Draft',
        'active' => 'Active',
        'paused' => 'Paused',
        'completed' => 'Completed',
      ],
    ],
    'field_variants' => [
      'type' => 'entity_reference_revisions',
      'label' => 'Variants',
      'target_type' => 'paragraph',
      'target_bundles' => ['ab_test_variant'],
      'cardinality' => -1,
    ],
  ];

  // Create field storage and instances
  foreach ($fields as $field_name => $config) {
    _create_field_storage($field_name, 'ab_test', $config);
  }
}

// Paragraph type: ab_test_variant
// Fields:
// - field_variant_name: String (Control, Treatment A, Treatment B, etc.)
// - field_variant_type: List (control, treatment)
// - field_variant_content: Entity Reference (node, block, paragraph)
// - field_variant_weight: Integer (for traffic allocation)
// - field_figma_component_id: String (reference back to Figma)
// - field_impressions: Integer (counter)
// - field_conversions: Integer (counter)

# Enable necessary modules
drush en rest restui serialization hal basic_auth -y

# Create API user with appropriate permissions
drush user:create ab_test_api --password="SECURE_PASSWORD"
drush user:role:add "ab_test_manager" ab_test_api

{
  "url": "https://yoursite.com/entity/ab_test?_format=hal_json",
  "method": "POST",
  "headers": {
    "Content-Type": "application/hal+json",
    "Authorization": "Basic {{base64(username:password)}}"
  },
  "body": {
    "_links": {
      "type": {
        "href": "https://yoursite.com/rest/type/ab_test/ab_test"
      }
    },
    "title": [{"value": "{{testMetadata.title}}"}],
    "field_test_id": [{"value": "{{testMetadata.test_id}}"}],
    "field_hypothesis": [{"value": "{{testMetadata.hypothesis}}"}],
    "field_target_metric": [{"value": "{{testMetadata.target_metric}}"}],
    "field_status": [{"value": "draft"}],
    "field_variants": "{{variants}}"
  }
}

<?php
// web/modules/custom/mindsing_ab_test/src/VariantSelector.php

namespace Drupal\mindsing_ab_test;

use Drupal\Core\Session\SessionManagerInterface;
use Symfony\Component\HttpFoundation\RequestStack;

class VariantSelector {

  protected $sessionManager;
  protected $requestStack;

  public function __construct(SessionManagerInterface $session_manager, RequestStack $request_stack) {
    $this->sessionManager = $session_manager;
    $this->requestStack = $request_stack;
  }

  /**
   * Select variant for a given test and user.
   */
  public function selectVariant($test_entity) {
    $request = $this->requestStack->getCurrentRequest();
    $session = $request->getSession();

    // Check if user already has assigned variant
    $test_id = $test_entity->get('field_test_id')->value;
    $session_key = "ab_test.{$test_id}.variant";

    if ($session->has($session_key)) {
      return $session->get($session_key);
    }

    // Get user context for intelligent selection
    $user_context = $this->getUserContext($request);

    // Check if user matches target audience
    $target_audience = $test_entity->get('field_target_audience')->value;
    if (!$this->matchesAudience($user_context, $target_audience)) {
      // User not in test audience, show control
      return $this->getControlVariant($test_entity);
    }

    // Select variant based on traffic split
    $variants = $test_entity->get('field_variants')->referencedEntities();
    $selected = $this->weightedRandom($variants);

    // Store in session for consistency
    $session->set($session_key, $selected->id());

    // Track impression
    $this->trackImpression($selected);

    return $selected;
  }

  /**
   * Get user context for targeting.
   */
  protected function getUserContext($request) {
    return [
      'is_new_visitor' => !$request->cookies->has('returning_visitor'),
      'referrer' => $request->headers->get('referer'),
      'user_agent' => $request->headers->get('user-agent'),
      'ip' => $request->getClientIp(),
      // Add more context as needed
    ];
  }

  /**
   * Check if user matches target audience criteria.
   */
  protected function matchesAudience($context, $audience_criteria) {
    switch ($audience_criteria) {
      case 'new_visitors':
        return $context['is_new_visitor'];

      case 'returning_visitors':
        return !$context['is_new_visitor'];

      case 'all':
      default:
        return TRUE;
    }
  }

  /**
   * Weighted random selection based on traffic split.
   */
  protected function weightedRandom($variants) {
    $total_weight = 0;
    $weights = [];

    foreach ($variants as $variant) {
      $weight = $variant->get('field_variant_weight')->value ?? 1;
      $weights[] = ['variant' => $variant, 'weight' => $weight];
      $total_weight += $weight;
    }

    $random = mt_rand(1, $total_weight);
    $current_weight = 0;

    foreach ($weights as $item) {
      $current_weight += $item['weight'];
      if ($random <= $current_weight) {
        return $item['variant'];
      }
    }

    return $variants[0];
  }

  /**
   * Track impression for analytics.
   */
  protected function trackImpression($variant) {
    $current = (int) $variant->get('field_impressions')->value;
    $variant->set('field_impressions', $current + 1);
    $variant->save();
  }
}

<?php
// web/modules/custom/mindsing_ab_test/src/TwigExtension/ABTestExtension.php

namespace Drupal\mindsing_ab_test\TwigExtension;

use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;

class ABTestExtension extends AbstractExtension {

  protected $variantSelector;

  public function __construct($variant_selector) {
    $this->variantSelector = $variant_selector;
  }

  public function getFunctions() {
    return [
      new TwigFunction('ab_test', [$this, 'renderABTest'], ['is_safe' => ['html']]),
    ];
  }

  public function renderABTest($test_id) {
    // Load test entity by test_id
    $query = \Drupal::entityQuery('ab_test')
      ->condition('field_test_id', $test_id)
      ->condition('field_status', 'active');

    $ids = $query->execute();
    if (empty($ids)) {
      return ''; // No active test
    }

    $test = \Drupal::entityTypeManager()
      ->getStorage('ab_test')
      ->load(reset($ids));

    // Select variant for current user
    $variant = $this->variantSelector->selectVariant($test);

    // Render variant content
    $content_reference = $variant->get('field_variant_content')->entity;
    if ($content_reference) {
      $view_builder = \Drupal::entityTypeManager()
        ->getViewBuilder($content_reference->getEntityTypeId());
      return $view_builder->view($content_reference);
    }

    return '';
  }
}

{# web/themes/custom/mindsing/templates/page--front.html.twig #}

<div class="hero-section">
  {# Render A/B test variant if active, otherwise show default #}
  {{ ab_test('homepage_hero_v1') }}
</div>

// mcp-server/ab-test-server.js
// MCP server that exposes A/B test context to AI assistants

import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

const server = new Server({
  name: 'drupal-ab-test',
  version: '1.0.0',
});

// Expose active tests as MCP resources
server.setRequestHandler('resources/list', async () => {
  const tests = await fetchActiveTests(); // Fetch from Drupal API

  return {
    resources: tests.map(test => ({
      uri: `ab-test://${test.test_id}`,
      name: test.title,
      mimeType: 'application/json',
      description: test.hypothesis,
    })),
  };
});

// Provide test data when requested
server.setRequestHandler('resources/read', async (request) => {
  const testId = request.params.uri.replace('ab-test://', '');
  const testData = await fetchTestDetails(testId);

  return {
    contents: [{
      uri: request.params.uri,
      mimeType: 'application/json',
      text: JSON.stringify(testData, null, 2),
    }],
  };
});

// Expose analytics tools
server.setRequestHandler('tools/list', async () => {
  return {
    tools: [
      {
        name: 'analyze_test_results',
        description: 'Analyze A/B test performance and determine statistical significance',
        inputSchema: {
          type: 'object',
          properties: {
            test_id: { type: 'string', description: 'Test ID to analyze' },
          },
          required: ['test_id'],
        },
      },
      {
        name: 'suggest_next_test',
        description: 'Suggest next A/B test based on current performance and goals',
        inputSchema: {
          type: 'object',
          properties: {
            goal: { type: 'string', description: 'Business goal to optimize for' },
          },
        },
      },
    ],
  };
});

// Implement tool handlers
server.setRequestHandler('tools/call', async (request) => {
  if (request.params.name === 'analyze_test_results') {
    const testId = request.params.arguments.test_id;
    const analysis = await analyzeTestStatistics(testId);

    return {
      content: [{
        type: 'text',
        text: JSON.stringify(analysis, null, 2),
      }],
    };
  }

  if (request.params.name === 'suggest_next_test') {
    const goal = request.params.arguments.goal;
    const suggestion = await generateTestSuggestion(goal);

    return {
      content: [{
        type: 'text',
        text: suggestion,
      }],
    };
  }
});

// Statistical analysis helper
async function analyzeTestStatistics(testId) {
  const test = await fetchTestDetails(testId);
  const variants = test.variants;

  // Calculate conversion rates
  const results = variants.map(v => ({
    name: v.name,
    impressions: v.impressions,
    conversions: v.conversions,
    conversion_rate: (v.conversions / v.impressions * 100).toFixed(2) + '%',
  }));

  // Simple statistical significance (chi-square test)
  const isSignificant = calculateSignificance(variants);
  const winner = isSignificant ? determineWinner(variants) : null;

  return {
    test_id: testId,
    duration_days: calculateDuration(test.start_date),
    results: results,
    is_significant: isSignificant,
    winner: winner,
    recommendation: generateRecommendation(test, isSignificant, winner),
  };
}

const transport = new StdioServerTransport();
await server.connect(transport);

// web/themes/custom/mindsing/js/ab-test-analytics.js
// First-party A/B test analytics using localStorage

class ABTestAnalytics {

  constructor() {
    this.storageKey = 'mindsing_ab_tests';
    this.syncEndpoint = '/api/ab-test/analytics';
    this.syncInterval = 60000; // Sync every 60 seconds

    this.init();
  }

  init() {
    // Initialize storage structure if it doesn't exist
    if (!localStorage.getItem(this.storageKey)) {
      this.resetStorage();
    }

    // Set up periodic sync to Drupal
    setInterval(() => this.syncToDrupal(), this.syncInterval);

    // Sync before page unload
    window.addEventListener('beforeunload', () => this.syncToDrupal());

    // Track page visibility changes (tab switching)
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        this.syncToDrupal();
      }
    });
  }

  /**
   * Reset localStorage structure
   */
  resetStorage() {
    const structure = {
      tests: {},
      session: {
        id: this.generateSessionId(),
        start: Date.now(),
      },
      events: [],
      synced_at: null,
    };

    localStorage.setItem(this.storageKey, JSON.stringify(structure));
  }

  /**
   * Track when user is exposed to a variant
   */
  trackVariantExposure(testId, variantId, variantName) {
    const data = this.getData();

    // Initialize test if first exposure
    if (!data.tests[testId]) {
      data.tests[testId] = {
        variant_id: variantId,
        variant_name: variantName,
        exposed_at: Date.now(),
        interactions: [],
        conversions: [],
      };
    }

    this.saveData(data);

    // Log exposure event
    this.trackEvent('variant_exposure', {
      test_id: testId,
      variant_id: variantId,
      variant_name: variantName,
    });
  }

  /**
   * Track user interaction with variant content
   */
  trackInteraction(testId, interactionType, metadata = {}) {
    const data = this.getData();

    if (!data.tests[testId]) {
      console.warn(`Test ${testId} not found in analytics storage`);
      return;
    }

    data.tests[testId].interactions.push({
      type: interactionType,
      metadata: metadata,
      timestamp: Date.now(),
    });

    this.saveData(data);

    // Log interaction event
    this.trackEvent('interaction', {
      test_id: testId,
      interaction_type: interactionType,
      ...metadata,
    });
  }

  /**
   * Track conversion event
   */
  trackConversion(testId, conversionGoal, value = null) {
    const data = this.getData();

    if (!data.tests[testId]) {
      console.warn(`Test ${testId} not found in analytics storage`);
      return;
    }

    data.tests[testId].conversions.push({
      goal: conversionGoal,
      value: value,
      timestamp: Date.now(),
    });

    this.saveData(data);

    // Log conversion event
    this.trackEvent('conversion', {
      test_id: testId,
      goal: conversionGoal,
      value: value,
    });

    // Immediate sync on conversion (important data)
    this.syncToDrupal();
  }

  /**
   * Track generic event
   */
  trackEvent(eventType, eventData) {
    const data = this.getData();

    data.events.push({
      type: eventType,
      data: eventData,
      timestamp: Date.now(),
      url: window.location.href,
      referrer: document.referrer,
    });

    // Keep only last 100 events to prevent storage bloat
    if (data.events.length > 100) {
      data.events = data.events.slice(-100);
    }

    this.saveData(data);
  }

  /**
   * Sync analytics data to Drupal backend
   */
  async syncToDrupal() {
    const data = this.getData();

    // Only sync if we have unsaved data
    if (data.events.length === 0 && data.synced_at) {
      return;
    }

    try {
      const response = await fetch(this.syncEndpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          session: data.session,
          tests: data.tests,
          events: data.events,
          user_agent: navigator.userAgent,
          screen_resolution: `${window.screen.width}x${window.screen.height}`,
          viewport: `${window.innerWidth}x${window.innerHeight}`,
        }),
      });

      if (response.ok) {
        // Clear events after successful sync
        data.events = [];
        data.synced_at = Date.now();
        this.saveData(data);
      }
    } catch (error) {
      console.error('Failed to sync analytics:', error);
      // Keep data in localStorage for retry
    }
  }

  /**
   * Get data from localStorage
   */
  getData() {
    const stored = localStorage.getItem(this.storageKey);
    return stored ? JSON.parse(stored) : this.resetStorage();
  }

  /**
   * Save data to localStorage
   */
  saveData(data) {
    localStorage.setItem(this.storageKey, JSON.stringify(data));
  }

  /**
   * Generate unique session ID
   */
  generateSessionId() {
    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
  }

  /**
   * Get current variant for a test
   */
  getCurrentVariant(testId) {
    const data = this.getData();
    return data.tests[testId] || null;
  }

  /**
   * Get all test data
   */
  getAllTests() {
    return this.getData().tests;
  }

  /**
   * Clear all analytics data (for testing/debugging)
   */
  clearAll() {
    this.resetStorage();
  }
}

// Initialize analytics
window.abTestAnalytics = new ABTestAnalytics();

<!-- Inject variant data into page -->
<script>
  // Track variant exposure when page loads
  document.addEventListener('DOMContentLoaded', function() {
    window.abTestAnalytics.trackVariantExposure(
      'homepage_hero_v1',
      '{{ variant_id }}',
      '{{ variant_name }}'
    );
  });
</script>

<!-- Track interactions with variant elements -->
<div class="hero-cta">
  <button
    onclick="window.abTestAnalytics.trackInteraction('homepage_hero_v1', 'cta_click', {
      button_text: this.textContent
    })"
  >
    Get Started
  </button>
</div>

<!-- Track conversions on form submission -->
<form id="signup-form" onsubmit="handleFormSubmit(event)">
  <!-- form fields -->
</form>

<script>
function handleFormSubmit(event) {
  event.preventDefault();

  // Track conversion
  window.abTestAnalytics.trackConversion(
    'homepage_hero_v1',
    'signup_form_submission'
  );

  // Submit form
  event.target.submit();
}
</script>

<?php
// web/modules/custom/mindsing_ab_test/src/Controller/AnalyticsController.php

namespace Drupal\mindsing_ab_test\Controller;

use Drupal\Core\Controller\ControllerBase;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\JsonResponse;

class AnalyticsController extends ControllerBase {

  /**
   * Receive and process analytics data from localStorage.
   */
  public function receiveAnalytics(Request $request) {
    $data = json_decode($request->getContent(), TRUE);

    if (!$data) {
      return new JsonResponse(['error' => 'Invalid data'], 400);
    }

    // Process each test's analytics
    foreach ($data['tests'] as $test_id => $test_data) {
      $this->processTestAnalytics($test_id, $test_data, $data['session']);
    }

    // Log events for deeper analysis
    foreach ($data['events'] as $event) {
      $this->logEvent($event, $data['session']);
    }

    return new JsonResponse(['status' => 'success']);
  }

  /**
   * Process analytics for a specific test.
   */
  protected function processTestAnalytics($test_id, $test_data, $session_data) {
    // Load test entity
    $query = \Drupal::entityQuery('ab_test')
      ->condition('field_test_id', $test_id);
    $ids = $query->execute();

    if (empty($ids)) {
      return;
    }

    $test = \Drupal::entityTypeManager()
      ->getStorage('ab_test')
      ->load(reset($ids));

    // Find the variant
    $variants = $test->get('field_variants')->referencedEntities();
    $variant = null;

    foreach ($variants as $v) {
      if ($v->id() == $test_data['variant_id']) {
        $variant = $v;
        break;
      }
    }

    if (!$variant) {
      return;
    }

    // Update variant analytics
    $current_impressions = (int) $variant->get('field_impressions')->value;
    $current_conversions = (int) $variant->get('field_conversions')->value;

    // Increment based on received data
    $new_conversions = count($test_data['conversions']);

    $variant->set('field_impressions', $current_impressions + 1);
    $variant->set('field_conversions', $current_conversions + $new_conversions);
    $variant->save();

    // Store detailed interaction data
    foreach ($test_data['interactions'] as $interaction) {
      $this->logInteraction($test_id, $test_data['variant_id'], $interaction);
    }

    // Store conversion details
    foreach ($test_data['conversions'] as $conversion) {
      $this->logConversion($test_id, $test_data['variant_id'], $conversion);
    }
  }

  /**
   * Log interaction to database for detailed analysis.
   */
  protected function logInteraction($test_id, $variant_id, $interaction) {
    \Drupal::database()->insert('ab_test_interactions')
      ->fields([
        'test_id' => $test_id,
        'variant_id' => $variant_id,
        'interaction_type' => $interaction['type'],
        'metadata' => json_encode($interaction['metadata']),
        'timestamp' => $interaction['timestamp'],
      ])
      ->execute();
  }

  /**
   * Log conversion to database.
   */
  protected function logConversion($test_id, $variant_id, $conversion) {
    \Drupal::database()->insert('ab_test_conversions')
      ->fields([
        'test_id' => $test_id,
        'variant_id' => $variant_id,
        'goal' => $conversion['goal'],
        'value' => $conversion['value'],
        'timestamp' => $conversion['timestamp'],
      ])
      ->execute();
  }

  /**
   * Log generic event.
   */
  protected function logEvent($event, $session_data) {
    \Drupal::database()->insert('ab_test_events')
      ->fields([
        'session_id' => $session_data['id'],
        'event_type' => $event['type'],
        'event_data' => json_encode($event['data']),
        'url' => $event['url'],
        'referrer' => $event['referrer'],
        'timestamp' => $event['timestamp'],
      ])
      ->execute();
  }
}

// Automatically archive old data to server
pruneOldData() {
  const data = this.getData();
  const oneWeekAgo = Date.now() - (7 * 24 * 60 * 60 * 1000);

  // Archive tests older than one week
  Object.keys(data.tests).forEach(testId => {
    const test = data.tests[testId];
    if (test.exposed_at < oneWeekAgo) {
      // Ensure it's synced
      this.syncToDrupal();
      // Remove from local storage
      delete data.tests[testId];
    }
  });

  this.saveData(data);
}