🚀 New: Targeting & Audiences Now Available
Data-driven marketing on the move
Connect with a massive, high-intent audience of 50M riders taking 2M+ daily trips across 600+ cities.
Contact us🚀 New: Targeting & Audiences Now Available
Data-driven marketing on the move
Connect with a massive, high-intent audience of 50M riders taking 2M+ daily trips across 600+ cities.
Contact usWhy Advertise on Lyft?
The only platform that connects you with customers in transit.

High-Intent
Audience
Reach consumers actively using Lyft who are on their way to make a purchase or spend.

Precise Targeting
Our data is deterministic, verified, and intent-rich, not merely inferred or modeled.

Creativity & Innovation
We offer a unique media ecosystem of in-app and real-life ad formats to create compelling brand campaigns.

Culture
Moving
Engage with riders in motion as they travel to cultural events and important life moments.
<div style='padding:20px;background:#111;color:#fff;border-radius:12px'>DOM render test</div>
(function(){
var mount=document.getElementById('wf-objective-widget');
if(!mount) return;
if(window.__owMarketingMounted){ return; }
window.__owMarketingMounted = true;
if(!document.getElementById('wf-objective-widget-style')){
var style=document.createElement('style');
style.id='wf-objective-widget-style';
style.textContent="\n @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\n\n #wf-objective-widget {\n --bg: #180312;\n --panel: #f1f1f1;\n --ink: #2f2430;\n --muted: #6d6371;\n --line: #d7d1d8;\n --accent: #eb0aa6;\n --accent-2: #c70089;\n --white: #ffffff;\n --radius: 22px;\n font-family: 'Plus Jakarta Sans', system-ui, sans-serif;\n color: var(--ink);\n background:\n radial-gradient(900px 500px at 18% 16%, rgba(235, 10, 166, 0.08), transparent 60%),\n radial-gradient(700px 420px at 88% 74%, rgba(137, 22, 100, 0.12), transparent 62%),\n var(--bg);\n width: 100%;\n }\n\n #wf-objective-widget * {\n box-sizing: border-box;\n font-family: inherit;\n }\n\n #wf-objective-widget .ow-wrap {\n max-width: 1180px;\n margin: 0 auto;\n padding: 64px 24px 80px;\n }\n\n #wf-objective-widget .ow-header {\n text-align: center;\n color: var(--white);\n margin: 0 auto 34px;\n max-width: 860px;\n }\n\n #wf-objective-widget .ow-header h2 {\n margin: 0;\n font-size: clamp(32px, 4vw, 54px);\n line-height: 1.08;\n letter-spacing: -0.03em;\n font-weight: 800;\n }\n\n #wf-objective-widget .ow-header p {\n margin: 14px auto 0;\n font-size: clamp(15px, 1.5vw, 18px);\n line-height: 1.45;\n color: rgba(255, 255, 255, 0.8);\n max-width: 760px;\n }\n\n #wf-objective-widget .ow-main {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n }\n\n #wf-objective-widget .ow-main.is-active {\n grid-template-columns: minmax(300px, 0.9fr) minmax(440px, 1.6fr);\n align-items: stretch;\n }\n\n #wf-objective-widget .ow-left {\n display: grid;\n gap: 16px;\n align-content: start;\n }\n\n #wf-objective-widget .ow-card {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto;\n align-items: start;\n gap: 14px;\n width: 100%;\n border: 0;\n background: var(--panel);\n color: var(--ink);\n border-radius: var(--radius);\n padding: 20px 22px;\n text-align: left;\n cursor: pointer;\n transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;\n box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);\n }\n\n #wf-objective-widget .ow-card:hover {\n transform: translateY(-1px);\n }\n\n #wf-objective-widget .ow-card:focus-visible,\n #wf-objective-widget .ow-acc-btn:focus-visible,\n #wf-objective-widget .ow-back-btn:focus-visible,\n #wf-objective-widget .ow-cta:focus-visible {\n outline: 2px solid rgba(235, 10, 166, 0.75);\n outline-offset: 2px;\n }\n\n #wf-objective-widget .ow-card-icon {\n width: 38px;\n height: 38px;\n border-radius: 999px;\n background: #e9e6ea;\n display: grid;\n place-items: center;\n flex: 0 0 auto;\n }\n\n #wf-objective-widget .ow-card-icon svg {\n width: 22px;\n height: 22px;\n display: block;\n stroke: currentColor;\n fill: none;\n stroke-width: 1.9;\n stroke-linecap: round;\n stroke-linejoin: round;\n color: var(--accent);\n }\n\n #wf-objective-widget .ow-card-body {\n min-width: 0;\n }\n\n #wf-objective-widget .ow-card-title {\n margin: 0;\n font-size: clamp(18px, 2vw, 30px);\n line-height: 1.07;\n letter-spacing: -0.03em;\n font-weight: 800;\n }\n\n #wf-objective-widget .ow-card-desc {\n margin: 10px 0 0;\n color: #4f4451;\n line-height: 1.35;\n font-size: clamp(14px, 1.15vw, 16px);\n max-width: 54ch;\n }\n\n #wf-objective-widget .ow-card-arrow {\n width: 30px;\n height: 30px;\n display: grid;\n place-items: center;\n color: #3d2f3e;\n border-radius: 999px;\n align-self: center;\n margin-top: 2px;\n }\n\n #wf-objective-widget .ow-card-arrow svg {\n width: 18px;\n height: 18px;\n stroke: currentColor;\n fill: none;\n stroke-width: 1.9;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n #wf-objective-widget .ow-card.is-selected {\n background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);\n color: var(--white);\n box-shadow: 0 12px 34px rgba(235, 10, 166, 0.18);\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-icon {\n background: rgba(255, 255, 255, 0.94);\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-icon svg {\n color: var(--accent);\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-desc {\n color: rgba(255, 255, 255, 0.9);\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-arrow {\n color: var(--white);\n }\n\n #wf-objective-widget .ow-right {\n display: none;\n background: var(--panel);\n border-radius: var(--radius);\n padding: 22px 18px 18px;\n min-height: 430px;\n }\n\n #wf-objective-widget .ow-main.is-active .ow-right {\n display: block;\n }\n\n #wf-objective-widget .ow-panel-head h3 {\n margin: 0;\n font-size: 20px;\n line-height: 1.15;\n letter-spacing: -0.02em;\n font-weight: 800;\n }\n\n #wf-objective-widget .ow-panel-head p {\n margin: 8px 0 0;\n color: var(--muted);\n line-height: 1.35;\n font-size: 15px;\n }\n\n #wf-objective-widget .ow-panel-scroll {\n margin-top: 16px;\n max-height: 390px;\n overflow: auto;\n padding-right: 4px;\n }\n\n #wf-objective-widget .ow-panel-scroll::-webkit-scrollbar {\n width: 8px;\n }\n\n #wf-objective-widget .ow-panel-scroll::-webkit-scrollbar-thumb {\n background: #cbc5cc;\n border-radius: 999px;\n }\n\n #wf-objective-widget .ow-accordion {\n display: grid;\n gap: 0;\n }\n\n #wf-objective-widget .ow-acc-item {\n border-top: 1px solid var(--line);\n }\n\n #wf-objective-widget .ow-acc-item:first-child {\n border-top: 0;\n }\n\n #wf-objective-widget .ow-acc-btn {\n width: 100%;\n background: transparent;\n border: 0;\n padding: 18px 0 16px;\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: 12px;\n align-items: center;\n text-align: left;\n color: var(--ink);\n cursor: pointer;\n }\n\n #wf-objective-widget .ow-acc-btn-title {\n margin: 0;\n font-size: clamp(16px, 1.7vw, 22px);\n line-height: 1.12;\n letter-spacing: -0.03em;\n font-weight: 800;\n }\n\n #wf-objective-widget .ow-acc-item.is-open .ow-acc-btn-title {\n color: var(--accent);\n }\n\n #wf-objective-widget .ow-acc-caret {\n width: 22px;\n height: 22px;\n display: grid;\n place-items: center;\n color: #4c4150;\n transition: transform 0.18s ease, color 0.18s ease;\n }\n\n #wf-objective-widget .ow-acc-caret svg {\n width: 16px;\n height: 16px;\n stroke: currentColor;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n #wf-objective-widget .ow-acc-item.is-open .ow-acc-caret {\n color: var(--accent);\n transform: rotate(180deg);\n }\n\n #wf-objective-widget .ow-acc-panel {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.24s ease;\n }\n\n #wf-objective-widget .ow-acc-item.is-open .ow-acc-panel {\n grid-template-rows: 1fr;\n }\n\n #wf-objective-widget .ow-acc-panel-inner {\n overflow: hidden;\n }\n\n #wf-objective-widget .ow-acc-body {\n padding: 0 0 14px;\n display: grid;\n gap: 14px;\n }\n\n #wf-objective-widget .ow-acc-body > p {\n margin: 0;\n color: #5f5660;\n line-height: 1.4;\n font-size: 14px;\n }\n\n #wf-objective-widget .ow-detail-grid {\n display: grid;\n grid-template-columns: 1fr 1.4fr;\n gap: 12px;\n }\n\n #wf-objective-widget .ow-detail-box {\n border: 1px solid #d7d1d8;\n border-radius: 14px;\n padding: 10px 12px;\n background: #f3f1f4;\n }\n\n #wf-objective-widget .ow-detail-label {\n margin: 0 0 8px;\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-weight: 800;\n color: #463b47;\n letter-spacing: 0.02em;\n text-transform: uppercase;\n }\n\n #wf-objective-widget .ow-detail-label svg {\n width: 12px;\n height: 12px;\n fill: var(--accent);\n display: block;\n }\n\n #wf-objective-widget .ow-detail-box p {\n margin: 0;\n font-size: 13px;\n line-height: 1.35;\n color: #534a55;\n }\n\n #wf-objective-widget .ow-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n #wf-objective-widget .ow-chip {\n display: inline-flex;\n align-items: center;\n padding: 6px 10px;\n border-radius: 8px;\n background: #e8e4e8;\n font-size: 12px;\n line-height: 1;\n color: #544b56;\n font-weight: 600;\n white-space: nowrap;\n }\n\n #wf-objective-widget .ow-acc-footer {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 12px;\n padding-top: 2px;\n }\n\n #wf-objective-widget .ow-cta {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 122px;\n height: 40px;\n border-radius: 999px;\n border: 0;\n text-decoration: none;\n background: linear-gradient(180deg, var(--accent) 0%, #dc0b9d 100%);\n color: var(--white);\n font-weight: 700;\n font-size: 14px;\n letter-spacing: -0.02em;\n }\n\n #wf-objective-widget .ow-divider-accent {\n height: 2px;\n background: rgba(235, 10, 166, 0.65);\n border-radius: 2px;\n margin-top: 10px;\n }\n\n #wf-objective-widget .ow-mobile-detail {\n display: none;\n background: var(--panel);\n border-radius: 18px;\n padding: 14px 14px 12px;\n }\n\n #wf-objective-widget .ow-back-btn {\n appearance: none;\n border: 0;\n background: transparent;\n color: var(--accent);\n font-weight: 700;\n font-size: 16px;\n line-height: 1;\n padding: 4px 0 10px;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n }\n\n #wf-objective-widget .ow-back-btn svg {\n width: 14px;\n height: 14px;\n stroke: currentColor;\n fill: none;\n stroke-width: 2;\n }\n\n @media (max-width: 991px) {\n #wf-objective-widget .ow-wrap {\n padding: 48px 18px 60px;\n }\n\n #wf-objective-widget .ow-main.is-active {\n grid-template-columns: 1fr;\n }\n\n #wf-objective-widget .ow-main.is-active .ow-right {\n display: none;\n }\n\n #wf-objective-widget .ow-main.is-active[data-mobile-detail='true'] .ow-left {\n display: none;\n }\n\n #wf-objective-widget .ow-main.is-active[data-mobile-detail='true'] .ow-mobile-detail {\n display: block;\n }\n\n #wf-objective-widget .ow-card {\n grid-template-columns: auto minmax(0, 1fr) auto;\n padding: 16px 16px;\n gap: 12px;\n border-radius: 16px;\n }\n\n #wf-objective-widget .ow-card-title {\n font-size: 21px;\n line-height: 1.03;\n }\n\n #wf-objective-widget .ow-card-desc {\n margin-top: 8px;\n font-size: 13px;\n line-height: 1.35;\n }\n\n #wf-objective-widget .ow-card-arrow {\n opacity: 0;\n width: 0;\n margin: 0;\n overflow: hidden;\n transition: opacity 0.18s ease;\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-arrow {\n opacity: 1;\n width: 46px;\n height: 46px;\n background: rgba(255, 255, 255, 0.95);\n color: var(--accent);\n margin-top: 8px;\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-arrow svg {\n width: 22px;\n height: 22px;\n stroke-width: 2.1;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-panel-head h3 {\n font-size: 18px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-panel-head p {\n font-size: 13px;\n margin-top: 7px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-panel-scroll {\n max-height: none;\n overflow: visible;\n padding-right: 0;\n margin-top: 10px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-acc-btn {\n padding: 15px 0 13px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-acc-btn-title {\n font-size: 18px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-acc-body {\n gap: 10px;\n padding-bottom: 12px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-detail-grid {\n grid-template-columns: 1fr;\n gap: 8px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-detail-box {\n padding: 10px 10px;\n border-radius: 10px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-chips {\n gap: 6px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-chip {\n font-size: 11px;\n padding: 6px 9px;\n border-radius: 7px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-cta {\n min-width: 126px;\n height: 38px;\n font-size: 13px;\n }\n }\n\n @media (max-width: 560px) {\n #wf-objective-widget .ow-wrap {\n padding: 30px 10px 42px;\n max-width: 420px;\n }\n\n #wf-objective-widget .ow-header {\n margin-bottom: 20px;\n }\n\n #wf-objective-widget .ow-header h2 {\n font-size: 27px;\n line-height: 1.14;\n max-width: 310px;\n margin-inline: auto;\n }\n\n #wf-objective-widget .ow-header p {\n margin-top: 10px;\n font-size: 12px;\n line-height: 1.35;\n max-width: 290px;\n }\n\n #wf-objective-widget .ow-left {\n gap: 12px;\n }\n\n #wf-objective-widget .ow-card {\n padding: 14px 14px;\n gap: 10px;\n border-radius: 16px;\n align-items: start;\n }\n\n #wf-objective-widget .ow-card-icon {\n width: 32px;\n height: 32px;\n }\n\n #wf-objective-widget .ow-card-icon svg {\n width: 18px;\n height: 18px;\n }\n\n #wf-objective-widget .ow-card-title {\n font-size: 17px;\n line-height: 1.02;\n }\n\n #wf-objective-widget .ow-card-desc {\n font-size: 11px;\n line-height: 1.32;\n max-width: 22ch;\n margin-top: 7px;\n }\n\n #wf-objective-widget .ow-card.is-selected .ow-card-arrow {\n width: 40px;\n height: 40px;\n margin-top: 10px;\n }\n\n #wf-objective-widget .ow-mobile-detail {\n border-radius: 16px;\n padding: 12px 12px 10px;\n }\n\n #wf-objective-widget .ow-back-btn {\n font-size: 14px;\n padding-bottom: 8px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-panel-head h3 {\n font-size: 16px;\n line-height: 1.12;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-panel-head p {\n font-size: 11px;\n line-height: 1.35;\n max-width: 28ch;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-acc-btn-title {\n font-size: 14px;\n line-height: 1.12;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-acc-btn {\n padding: 13px 0 11px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-acc-body > p {\n font-size: 11px;\n line-height: 1.32;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-detail-label {\n font-size: 10px;\n margin-bottom: 6px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-detail-box p {\n font-size: 11px;\n line-height: 1.28;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-chip {\n font-size: 10px;\n padding: 5px 8px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-cta {\n min-width: 118px;\n height: 34px;\n font-size: 12px;\n }\n\n #wf-objective-widget .ow-mobile-detail .ow-divider-accent {\n height: 1px;\n margin-top: 8px;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wf-objective-widget * {\n transition: none !important;\n animation: none !important;\n }\n }\n";
document.head.appendChild(style);
}
(function () {
var mount = document.getElementById('wf-objective-widget');
if (!mount) return;
var icons = {
awareness:
'<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 3.5h7.2l3.3 3.4V18a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5.5a2 2 0 0 1 2-2Z\"/><path d=\"M14 3.8V8h4.1\"/><path d=\"M10 14.4c0-1.8 1.2-3.2 3-3.2\"/><path d=\"M13 11.2l3.6 3.6\"/><path d=\"M13 14.8l2.4 4\"/></svg>',
engagement:
'<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 17.5 10 9l3.3 4.2L20 5.5\"/><path d=\"M15.7 5.5H20v4.4\"/></svg>',
traffic:
'<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"5.2\"/><path d=\"M12 2.8v2.4\"/><path d=\"M12 18.8v2.4\"/><path d=\"M2.8 12h2.4\"/><path d=\"M18.8 12h2.4\"/></svg>'
};
var starIcon =
'<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2.8l2.6 5.3 5.8.9-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.2-4.1 5.8-.9z\"/></svg>';
var arrowRightIcon =
'<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 12h15\"/><path d=\"m13 5 7 7-7 7\"/></svg>';
var chevronDownIcon =
'<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg>';
var chevronLeftIcon =
'<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m15 5-7 7 7 7\"/></svg>';
var state = {
selectedObjectiveId: null,
openSolutionIdByObjective: {},
mobileDetailOpen: false
};
var data = [
{
id: 'awareness',
icon: icons.awareness,
title: 'Drive Awareness and Reach',
shortTitle: 'Drive Awareness and Reach',
description: 'Build brand recognition and maximize visibility with high-impact ad experiences.',
panelTitle: 'Recommended solutions',
panelSubtitle: 'Powerful solutions to connect with riders wherever they go',
solutions: [
{
id: 'in-app-visual-ads',
title: 'In-App Visual Ads',
description:
'Engaging display formats including display, video, carousel, and more across high-traffic areas on the Lyft app.',
metricsLabel: 'Metrics',
metrics: 'In-App Visual Ads CTR outperform industry standards by over 400%',
productsLabel: 'Products',
products: ['Display Ads', 'Vertical Video', 'Video Ads', 'Poster Carousel Ads'],
ctaLabel: 'Learn more',
ctaUrl: '#'
},
{
id: 'car-wrap-branding',
title: 'Car Wrap Branding',
description:
'Own city streets with full-fleet branded vehicles that create repeated impressions in key neighborhoods and commuter corridors.',
metricsLabel: 'Metrics',
metrics: 'High-frequency street-level exposure across premium urban routes',
productsLabel: 'Products',
products: ['Full Wrap', 'Partial Wrap', 'Market Flighting', 'City Takeover'],
ctaLabel: 'Learn more',
ctaUrl: '#'
},
{
id: 'targeting-audiences',
title: 'Targeting & Audiences',
description:
'Reach riders by geography, behavior, and trip context to improve awareness lift with smarter media delivery.',
metricsLabel: 'Metrics',
metrics: 'Audience-based targeting helps improve relevance and campaign efficiency',
productsLabel: 'Products',
products: ['Geo Targeting', 'Audience Segments', 'Trip Context', 'Dayparting'],
ctaLabel: 'Learn more',
ctaUrl: '#'
},
{
id: 'sponsored-map-ads',
title: 'In-App Sponsored Map Ads',
description:
'Appear at high-intent moments as riders browse destinations, transit hubs, and local hotspots inside the map experience.',
metricsLabel: 'Metrics',
metrics: 'Capture consideration at the point of planning and navigation',
productsLabel: 'Products',
products: ['Map Pins', 'Promoted Destinations', 'Area Highlights', 'Store Locator CTA'],
ctaLabel: 'Learn more',
ctaUrl: '#'
}
]
},
{
id: 'engagement',
icon: icons.engagement,
title: 'Drive Engagement',
shortTitle: 'Drive Engagement',
description: 'Create memorable brand interactions that inspire action and drive conversions.',
panelTitle: 'Recommended solutions',
panelSubtitle: 'Interactive and performance-ready formats to drive rider response',
solutions: [
{
id: 'branded-rider-experiences',
title: 'Branded Rider Experiences',
description:
'Create immersive journeys with tailored creative moments during the ride flow to boost recall and engagement.',
metricsLabel: 'Metrics',
metrics: 'Interactive formats increase time spent and message retention',
productsLabel: 'Products',
products: ['Interactive Units', 'Swipe Cards', 'Rich Media', 'Timed Messaging'],
ctaLabel: 'Learn more',
ctaUrl: '#'
},
{
id: 'offer-driven-campaigns',
title: 'Offer-Driven Campaigns',
description:
'Pair creative with compelling offers to motivate immediate actions such as app installs, redemptions, or purchases.',
metricsLabel: 'Metrics',
metrics: 'Offer-led campaigns can improve click-through and conversion intent',
productsLabel: 'Products',
products: ['Promo Codes', 'Conversion CTA', 'Deep Links', 'Retargeting'],
ctaLabel: 'Learn more',
ctaUrl: '#'
},
{
id: 'video-storytelling',
title: 'Video Storytelling',
description:
'Use short-form and vertical video formats to communicate product value quickly in a mobile-native environment.',
metricsLabel: 'Metrics',
metrics: 'Video creative supports stronger message comprehension across mobile audiences',
productsLabel: 'Products',
products: ['Vertical Video', 'Short Loop', 'Sequential Messaging', 'Brand Lift Support'],
ctaLabel: 'Learn more',
ctaUrl: '#'
},
{
id: 'measurement-optimization',
title: 'Measurement & Optimization',
description:
'Track engagement signals and refine campaigns with audience insights, creative testing, and pacing controls.',
metricsLabel: 'Metrics',
metrics: 'Continuous optimization improves campaign efficiency over time',
productsLabel: 'Products',
products: ['A/B Testing', 'Audience Reporting', 'Pacing Controls', 'Performance Insights'],
ctaLabel: 'Learn more',
ctaUrl: '#'
}
]
},
{
id: 'foot-traffic',
icon: icons.traffic,
title: 'Drive Foot Traffic',
shortTitle: 'Drive Foot Traffic',
description: 'Reach nearby riders and convert them into in-store customers with geo-targeted ads.',
panelTitle: 'Recommended solutions',
panelSubtitle: 'Local activation formats designed to move riders from app to storefront',
solutions: [
{
id: 'nearby-store-promo',
title: 'Nearby Store Promotion',
description:
'Activate localized placements that highlight nearby locations, promotions, and store details to encourage visits.',
metricsLabel: 'Metrics',
metrics: 'Localized messaging improves relevance for riders close to your stores',
productsLabel: 'Products',
products: ['Geo Radius', 'Store Info', 'Local Offer', 'Map CTA'],
ctaLabel: 'Learn more',
ctaUrl: '#'
},
{
id: 'event-based-targeting',
title: 'Event-Based Targeting',
description:
'Reach riders around concerts, games, and city events where demand spikes and nearby purchase intent is high.',
metricsLabel: 'Metrics',
metrics: 'Contextual event targeting helps align campaigns with peak footfall windows',
productsLabel: 'Products',
products: ['Venue Radius', 'Event Flighting', 'Dynamic Creative', 'Dayparting'],
ctaLabel: 'Learn more',
ctaUrl: '#'
},
{
id: 'commuter-conquesting',
title: 'Commuter Conquesting',
description:
'Target riders along commuting routes and transit hubs to influence destination choice and store consideration.',
metricsLabel: 'Metrics',
metrics: 'Transit corridor reach supports repeated exposure during routine trips',
productsLabel: 'Products',
products: ['Transit Hubs', 'Route Targeting', 'Morning/Evening Flights', 'Store Visit CTA'],
ctaLabel: 'Learn more',
ctaUrl: '#'
},
{
id: 'store-visit-measurement',
title: 'Store Visit Measurement',
description:
'Measure and optimize toward visitation outcomes with reporting frameworks built for local campaigns.',
metricsLabel: 'Metrics',
metrics: 'Closed-loop reporting helps evaluate media impact on store traffic',
productsLabel: 'Products',
products: ['Visit Lift', 'Regional Reporting', 'Campaign Insights', 'Optimization Support'],
ctaLabel: 'Learn more',
ctaUrl: '#'
}
]
}
];
data.forEach(function (objective) {
state.openSolutionIdByObjective[objective.id] = objective.solutions[0] ? objective.solutions[0].id : null;
});
function isMobile() {
return window.matchMedia('(max-width: 991px)').matches;
}
function getSelectedObjective() {
if (!state.selectedObjectiveId) return null;
return data.find(function (obj) {
return obj.id === state.selectedObjectiveId;
}) || null;
}
function escapeHtml(value) {
return String(value)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/\"/g, '"')
.replace(/'/g, ''');
}
function renderCards() {
return data
.map(function (objective) {
var isSelected = state.selectedObjectiveId === objective.id;
return (
'<button type=\"button\" class=\"ow-card' +
(isSelected ? ' is-selected' : '') +
'\" data-objective-id=\"' +
objective.id +
'\" aria-pressed=\"' +
(isSelected ? 'true' : 'false') +
'\">' +
'<span class=\"ow-card-icon\" aria-hidden=\"true\">' +
objective.icon +
'</span>' +
'<span class=\"ow-card-body\">' +
'<p class=\"ow-card-title\">' +
escapeHtml(objective.title) +
'</p>' +
'<p class=\"ow-card-desc\">' +
escapeHtml(objective.description) +
'</p>' +
'</span>' +
'<span class=\"ow-card-arrow\" aria-hidden=\"true\">' +
arrowRightIcon +
'</span>' +
'</button>'
);
})
.join('');
}
function renderSolutionItem(solution, isOpen, isLast) {
var chips = solution.products
.map(function (product) {
return '<span class=\"ow-chip\">' + escapeHtml(product) + '</span>';
})
.join('');
return (
'<div class=\"ow-acc-item' +
(isOpen ? ' is-open' : '') +
'\" data-solution-id=\"' +
solution.id +
'\">' +
'<button type=\"button\" class=\"ow-acc-btn\" aria-expanded=\"' +
(isOpen ? 'true' : 'false') +
'\">' +
'<span class=\"ow-acc-btn-title\">' +
escapeHtml(solution.title) +
'</span>' +
'<span class=\"ow-acc-caret\" aria-hidden=\"true\">' +
chevronDownIcon +
'</span>' +
'</button>' +
'<div class=\"ow-acc-panel\" role=\"region\" aria-hidden=\"' +
(isOpen ? 'false' : 'true') +
'\">' +
'<div class=\"ow-acc-panel-inner\">' +
'<div class=\"ow-acc-body\">' +
'<p>' +
escapeHtml(solution.description) +
'</p>' +
'<div class=\"ow-detail-grid\">' +
'<div class=\"ow-detail-box\">' +
'<p class=\"ow-detail-label\">' +
starIcon +
escapeHtml(solution.metricsLabel || 'Metrics') +
'</p>' +
'<p>' +
escapeHtml(solution.metrics) +
'</p>' +
'</div>' +
'<div class=\"ow-detail-box\">' +
'<p class=\"ow-detail-label\">' +
starIcon +
escapeHtml(solution.productsLabel || 'Products') +
'</p>' +
'<div class=\"ow-chips\">' +
chips +
'</div>' +
'</div>' +
'</div>' +
'<div class=\"ow-acc-footer\">' +
'<a class=\"ow-cta\" href=\"' +
escapeHtml(solution.ctaUrl || '#') +
'\">' +
escapeHtml(solution.ctaLabel || 'Learn more') +
'</a>' +
'</div>' +
(!isLast ? '<div class=\"ow-divider-accent\"></div>' : '') +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
}
function renderPanel(objective, isMobilePanel) {
if (!objective) return '';
var openId = state.openSolutionIdByObjective[objective.id];
var itemsHtml = objective.solutions
.map(function (solution, index) {
return renderSolutionItem(
solution,
openId === solution.id,
index === objective.solutions.length - 1
);
})
.join('');
return (
(isMobilePanel
? '<button type=\"button\" class=\"ow-back-btn\" data-action=\"back\">' +
chevronLeftIcon +
'<span>Go back</span></button>'
: '') +
'<div class=\"ow-panel-head\">' +
'<h3>' +
escapeHtml(objective.panelTitle) +
'</h3>' +
'<p>' +
escapeHtml(objective.panelSubtitle) +
'</p>' +
'</div>' +
'<div class=\"ow-panel-scroll\">' +
'<div class=\"ow-accordion\">' +
itemsHtml +
'</div>' +
'</div>'
);
}
function render() {
var selectedObjective = getSelectedObjective();
var active = !!selectedObjective;
var mobileDetail = active && state.mobileDetailOpen && isMobile();
mount.innerHTML =
'<section class=\"ow-wrap\" aria-label=\"Marketing objectives selector\">' +
'<header class=\"ow-header\">' +
'<h2>What\'s Your Marketing Objective?</h2>' +
'<p>Choose your marketing objective and discover the perfect solution to reach your target audience.</p>' +
'</header>' +
'<div class=\"ow-main' +
(active ? ' is-active' : '') +
'\" data-mobile-detail=\"' +
(mobileDetail ? 'true' : 'false') +
'\">' +
'<div class=\"ow-left\">' +
renderCards() +
'</div>' +
'<aside class=\"ow-right\" aria-live=\"polite\">' +
(selectedObjective ? renderPanel(selectedObjective, false) : '') +
'</aside>' +
'<div class=\"ow-mobile-detail\" aria-live=\"polite\">' +
(mobileDetail && selectedObjective ? renderPanel(selectedObjective, true) : '') +
'</div>' +
'</div>' +
'</section>';
}
function setObjective(objectiveId) {
if (state.selectedObjectiveId === objectiveId && !isMobile()) {
return;
}
state.selectedObjectiveId = objectiveId;
state.mobileDetailOpen = isMobile();
if (!state.openSolutionIdByObjective[objectiveId]) {
var objective = data.find(function (obj) {
return obj.id === objectiveId;
});
state.openSolutionIdByObjective[objectiveId] = objective && objective.solutions[0] ? objective.solutions[0].id : null;
}
render();
}
function setOpenSolution(solutionId) {
var selectedObjective = getSelectedObjective();
if (!selectedObjective) return;
state.openSolutionIdByObjective[selectedObjective.id] =
state.openSolutionIdByObjective[selectedObjective.id] === solutionId ? null : solutionId;
render();
}
mount.addEventListener('click', function (event) {
var card = event.target.closest('.ow-card');
if (card && mount.contains(card)) {
setObjective(card.getAttribute('data-objective-id'));
return;
}
var back = event.target.closest('[data-action=\"back\"]');
if (back && mount.contains(back)) {
state.mobileDetailOpen = false;
render();
return;
}
var accBtn = event.target.closest('.ow-acc-btn');
if (accBtn && mount.contains(accBtn)) {
var accItem = accBtn.closest('.ow-acc-item');
if (accItem) {
setOpenSolution(accItem.getAttribute('data-solution-id'));
}
}
});
window.addEventListener('resize', function () {
if (!state.selectedObjectiveId) return;
if (!isMobile()) {
state.mobileDetailOpen = false;
}
render();
});
render();
})();
})();
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.