Understanding and Using Ad Events
In this tutorial, we will explore how ad events work with the Armanet SDK. Ad events are crucial for managing the advertising lifecycle on your website. The Armanet SDK handles these events, making it easy for you to interact with and control ad behavior. We'll cover the key ad events, how to manually trigger them, and how to handle these events effectively.
onAdsLoaded Event
The onAdsLoaded event is emitted every time an ad is successfully loaded. You can use this event to execute specific actions after the ads have been loaded.
loadAds Event
The loadAds event can be emitted by the user to force the loading of ads. This is particularly useful for scenarios like infinite scrolling or other interactive parts of your website where ads need to be loaded dynamically.
How to Emit the loadAds Event
By default, ads are loaded automatically based on common interactivity events. However, you can manually trigger the loading of ads by dispatching the loadAds event. This can be especially useful for dynamic features like infinite scrolling.
Example of Emitting the loadAds Event
To manually trigger the loading of ads, you can dispatch the loadAds event using the following code:
// Ads are loaded automatically based on common interactivity events,
// but you can manually trigger them by dispatching the loadAds event.
// This is useful for infinite scrolling or other dynamic features.
window.dispatchEvent(new Event('loadAds'));
How to Handle the onAdsLoaded Event
If you want to run specific code after ads have been loaded, you can listen for the onAdsLoaded event. This allows you to perform actions like updating the UI or tracking ad loading events.
Example of Handling the onAdsLoaded Event
To handle the onAdsLoaded event, you can use the following code:
// If you want to run code after ads have been loaded,
// you can listen to the onAdsLoaded event
window.addEventListener('onAdsLoaded', function () {
// Ads have been loaded
console.log('Ads have been successfully loaded.');
// Add your custom code here
});
Complete Example
Here's a complete example demonstrating how to set up the loadAds and onAdsLoaded events on a webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ad Events Example</title>
<script src="https://assets.armanet.us/armanet-pxl.js" defer></script>
<link rel="dns-prefetch" href="//i.armanet.us">
<link rel="preconnect" href="https://i.armanet.us">
<link rel="dns-prefetch" href="//srv.armanet.us">
<link rel="preconnect" href="https://srv.armanet.us">
</head>
<body>
<h1>Ad Events Example</h1>
<p>Here is an example ad unit:</p>
<div data-armanet="12345"></div>
<script>
// Manually trigger the loading of ads
window.dispatchEvent(new Event('loadAds'));
// Handle the event after ads have been loaded
window.addEventListener('onAdsLoaded', function () {
console.log('Ads have been successfully loaded.');
// Add your custom code here
});
</script>
</body>
</html>
Conclusion
By understanding and utilizing ad events such as onAdsLoaded and loadAds, you can effectively manage the ad lifecycle on your website. These events allow for greater control and customization, ensuring that ads are loaded and managed according to your specific needs.