Text Ads

Text ads are native-style, text‑centric ad units that blend naturally into your site content. They typically drive higher CTR and adapt their height automatically to the delivered content length.

🎯 Basic Usage

Simple Text Ad

// Prepare container in HTML
// <div id="text-container"></div>
 
// Create a basic text ad
AdStage.ads.text('text-container');

Click Event Handling

AdStage.ads.text('text-container', {
	onClick: (adData) => {
		console.log('Text ad clicked:', adData);
		// Add custom logic here
	}
});

⚙️ Configuration Options

Core Options

Option	Type	Default	Description
`maxLines`	`number`	`3`	Maximum number of visible lines
`style`	`string`	`'default'`	Style theme key
`onClick`	`function`	`undefined`	Callback executed when the ad is clicked

Filtering Options

Option	Type	Default	Description
`adId`	`string`	`undefined`	Specify a fixed ad ID
`language`	`'ko' \| 'en' \| 'ja' \| 'zh'`	`undefined`	Filter by ad language
`deviceType`	`'MOBILE' \| 'DESKTOP'`	`undefined`	Target by device type
`country`	`'KR' \| 'US' \| 'JP' \| 'CN' \| 'DE'`	`undefined`	Country targeting

NOTE: Text ads automatically adjust their height based on content length (height: 'auto').

💡 Practical Examples

Quick usage via CDN script directly in static HTML.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Text Ad Example</title>
</head>
<body>
	<h1>My Website</h1>
  
	<!-- Text ad container -->
	<div id="text-container" style="width: 100%; max-width: 600px; margin: 20px auto; padding: 16px; border: 1px solid #ddd; border-radius: 8px;">
		Loading...
	</div>
 
	<!-- AdStage SDK -->
	<script src="https://unpkg.com/@adstage/web-sdk/dist/index.umd.js"></script>
	<script>
		// Initialize SDK
		AdStage.init({
			apiKey: 'your-api-key'
		});
 
		// Create text ad
		AdStage.ads.text('text-container', {
			maxLines: 3
		});
	</script>
</body>
</html>

🚀 Advanced Features

Limiting Line Count

You can control how many lines of text are displayed.

// Single-line text ad
AdStage.ads.text('text-container', { maxLines: 1 });
 
// Allow up to 5 lines
AdStage.ads.text('text-container', { maxLines: 5 });

Responsive Line Count

Adapt the line count based on viewport size.

// Responsive implementation using breakpoints
const getResponsiveMaxLines = () => {
	if (window.innerWidth <= 768) {
		return 2;  // Mobile
	} else if (window.innerWidth <= 1024) {
		return 3;  // Tablet
	} else {
		return 4;  // Desktop
	}
};
 
let slotId = AdStage.ads.text('text-container', {
	maxLines: getResponsiveMaxLines(),
	deviceType: window.innerWidth <= 768 ? 'MOBILE' : 'DESKTOP'
});
 
// Re-create on resize
window.addEventListener('resize', () => {
	AdStage.ads.destroy(slotId);
	slotId = AdStage.ads.text('text-container', {
		maxLines: getResponsiveMaxLines(),
		deviceType: window.innerWidth <= 768 ? 'MOBILE' : 'DESKTOP'
	});
});

Specify a Fixed Ad ID

AdStage.ads.text('text-container', {
	maxLines: 3,
	adId: 'text-ad-456'
});

🔧 Optimization Tips

1. Automatic Line Optimization

AdStage.ads.text('text-container', {
	maxLines: 'auto'  // Automatically adjust to content
});

2. Background Loading

Ads are created synchronously (you get a slot ID immediately) and content is filled asynchronously.

const slotId = AdStage.ads.text('text-container');
console.log('Slot created:', slotId); // Immediately logs

3. Automatic Cleanup

If the container element is removed from the DOM, the ad is cleaned up automatically.

const slotId = AdStage.ads.text('text-container');
document.getElementById('text-container').remove();
// No need to manually call destroy()

🎨 Styling

Using SDK CSS Classes

/* Base container */
.adstage-text-ad {
	position: relative;
	overflow: hidden;
	font-family: inherit;
	line-height: 1.6;
}
 
/* Loading state */
.adstage-loading {
	opacity: 0.7;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: loading 1.5s infinite;
}
 
@keyframes loading {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
 
/* Loaded */
.adstage-loaded {
	opacity: 1;
	transition: opacity 0.3s ease;
}
 
/* Error */
.adstage-error {
	border: 1px solid #ff6b6b;
	background-color: #ffe0e0;
}

Inspect Slot State

// All slots
const allSlots = AdStage.ads.getAllSlots();
console.log('All ad slots:', allSlots);
 
// Single slot
const slot = AdStage.ads.getSlotById(slotId);
console.log('Slot info:', slot);

Text Ads

Table of Contents