Deep Dive into Adobe Optimiser for Magento 2

Adobe Optimizer (powered by Adobe Target) enables A/B testing, multivariate
testing, and AI-driven personalisation in Magento 2 (Adobe Commerce). It integrates
seamlessly to deliver targeted content, optimize conversions, and test UX elements
without disrupting core operations.
Key Capabilities
➔ A/B/n Testing: Compare page variants.
➔ Automated Personalisation: AI-driven content targeting.
➔ Visual Experience Composer (VEC): Edit pages visually.
➔ Server-Side Delivery: Reduce client-side flicker.
➔ Magento Data Layer: Leverage cart and checkout data for targeted
advertising.
Prerequisites
Before integrating Adobe Optimizer with Magento 2:

• Adobe Experience Cloud Setup
  ➔ Ensure your organisation has an active Adobe Experience Cloud
  account.
  ➔ Access to Adobe Launch (Tag Manager).
  ➔ Adobe Optimizer workspace and API credentials.
• Magento 2 Requirements
  ➔ Adobe Commerce (Magento 2.4. x)
  ➔ Access to Magento Admin and developer tools (CLI, code access).
  ➔ Frontend theme access (for injecting scripts).

Core Architecture
Adobe Optimizer operates through a hybrid architecture combining:
➔ Client-Side (AT.js): For DOM manipulation and quick implementation
➔ Server-Side (Node.js/PHP SDK): For zero-flicker experiences
➔ Edge Network: Global CDN for low-latency decision-making

Architectural Flow

Setup & Configuration
Step 1: Install Adobe Commerce Extension
composer require magento/target-rule
bin/magento module:enable Magento_TargetRule
bin/magento setup:upgrade

Step 2: Configure Credentials
{
“client_code”: “your_adobe_client_code”,
“organization_id”: “IMS_ORG_ID”,
“workspace”: “default”,
“server_side”: true // Enable server-side delivery
}

Step 3: Inject Target SDK in Theme
Edit app/design/frontend///requirejs-config.js:
var config = {
paths: {
‘adobe-target’: ‘https://assets.adobedtm.com/activation’
},
shim: {
‘adobe-target’: { ‘exports’: ‘adobeData’ }
}
};

Creating an A/B Test: Code Example
Scenario: Test two checkout button colours.
Step 1: Define Activities in Adobe Target UI
➔ Create Experience A (Green Button) & Experience B (Blue Button).

Step 2: Add Target Logic in Magento Template
File:
app/design/frontend///Magento_Checkout/templates/cart
.phtml

helper(‘Magento\TargetRule\Helper\Data’)->isEnabled()): ?> Proceed to Checkout

Step 3: Server-Side Rendering (Advanced)
Use Magento’s PagePlugin to inject content:
// Plugin to modify block output
class RenderTargetContent
{
public function afterToHtml(
\Magento\Checkout\Block\Cart $subject,
$result
) {
$targetContent =
$this->targetService->applyContent(‘checkout-btn-test’);
return str_replace(‘btn-default’, $targetContent,
$result);
}
}

Tracking & Metrics
➔ Conversion Goals: Track via Magento events:
➔ View Reports: Real-time analytics in Adobe Target dashboard.
document.querySelector(‘#checkout-button’).addEventListener(‘click
‘, function() {
adobe.target.trackEvent({
mbox: ‘checkout-click’,
conversion: true
});
});

Best Practices
➔ Avoid Flicker: Use server-side delivery or pre-hiding snippets.
➔ Leverage Magento Context: Pass SKU, category, and cart value to Target:
adobe.target.getOffer({
params: {
“cartTotal”: “getCartTotal() ?>”,
“customerGroup”: “getCustomerGroup() ?>”
}
});
➔ Cache Considerations: Exclude personalised blocks from full-page cache.
➔ QA with AT.js Debugger: Use Chrome extension for validation.

Key Performance Indicators

Metric Baseline Target Measurement
Personalization ROI 0.1 5:1 Adobe Analytics
Time-to-Decision 300ms <50ms Chrome DevTools Offer Cache Hit Rate 0% >85% Target Reports
Test Velocity 2/month 10/week Activity Log
Lift Significance N/A >95% Stats Engine

Troubleshooting
➔ Common Error: Offers not rendering?
◆ Verify IMS credentials in Admin.
◆ Check the browser console for adobe.target errors.
➔ Missing Data Layer: Ensure Magento\TargetRule\Block\Data is included
in the layout.

Conclusion
Adobe Optimizer transforms Magento 2 into a testing/personalisation powerhouse.
By combining server-side logic with client-side flexibility, developers can deploy
experiments without compromising performance. Start with simple A/B tests, then
scale to AI-driven personalisation using Magento’s rich e-commerce data layer.