@mirailabs-co/adx-shards-vanilla
v1.0.0
Published
AdX Shards JavaScript
Readme
AdX Shards Vanilla Package
🚀 Installation
You can install the package using yarn or npm:
yarn add @mirailabs-co/adx-shards-vanilla
npm install @mirailabs-co/adx-shards-vanillaOr use directly from CDN:
<script src="https://cdn.jsdelivr.net/npm/@mirailabs-co/adx-shards-vanilla/dist/adx-shards-vanilla.min.js"></script>📌 Usage
Basic Ad Integration
Here's how to use basic ads with AdX Shards Vanilla:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AdShardTech Integration</title>
<script src="https://cdn.jsdelivr.net/npm/@mirailabs-co/adx-shards-vanilla/dist/adx-shards-vanilla.min.js"></script>
</head>
<body>
<div id="ad-container"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const adShardTech = new window.ShardsDSP.AdShardTech({
adsBlockId: 'ADS_BLOCK_ID',
appId: 'APP_ID',
position: 'default',
env: 'production',
});
adShardTech.mount(document.getElementById('ad-container'));
});
</script>
</body>
</html>Position Options
The position parameter can be one of the following:
"default"- Display within page content"bottom"- Fixed at the bottom of the page"top"- Fixed at the top of the page
Advanced Options
You can customize additional properties:
const adShardTech = new window.ShardsDSP.AdShardTech({
adsBlockId: 'ADS_BLOCK_ID',
appId: 'APP_ID',
width: 400, // Width from 320px to 512px
borderRadius: 8, // Border radius up to 24px
position: 'bottom', // 'default', 'top', or 'bottom'
env: 'production', // 'development' or 'production'
});Removing Ads
To remove ads when no longer needed:
// Store reference to adShardTech object
const adShardTech = new window.ShardsDSP.AdShardTech({...});
// When removal is needed
adShardTech.unmount();🔹 Notes:
ADS_BLOCK_IDandAPP_IDare required values. You can obtain them from AdX Shards Publisher (or development environment AdX Shards Publisher Dev).- Ads will automatically refresh every 30 seconds.
- When deploying to production, ensure you change the
envparameter from 'development' to 'production'. - Default ad size has an aspect ratio of 32:5, with width ranging from 320px to 512px.
Now you're ready to integrate AdX Shards Vanilla into your project! 🚀