Skip to main content

💻 Vanilla JavaScript Integration

Insert Script​

To ensure optimal ad performance and functionality, place the Ad SDK script within the <head> section of your HTML document.

<script src="https://gcdn.magfiads.com/magfi.min.js"></script>

Define Instance​

By creating an instance of the MagfiAdNetwork object, you can then use its methods to define ad slots, display ads, and manage ad-related events.

const magfi = window.MagfiAdNetwork.getInstance("APP_CODE");

Key points​

  • MagfiAdNetwork.getInstance("APP_CODE"): This line retrieves an instance of the MagfiAdNetwork object, which is used to interact with the Ad SDK.

  • "APP_CODE": Replace this placeholder with your actual application code. This unique identifier is provided by the ad network and is essential for tracking and managing your ads.

  • TypeScript Type Assertion: In the TypeScript example, (window as any) is used to access the MagfiAdNetwork object. This type assertion is necessary because the MagfiAdNetwork object might not be directly defined in the TypeScript definitions.

Define Slot​

By defining ad slots, you can specify where ads should appear within your application and manage them individually.

const ad = magfi.add({AD_CODE:'AD_CODE'});

Key points​

  • magfi.add('AD_CODE'): This line defines a new ad slot using the add() method of the magfi instance.

  • "AD_CODE": Replace this placeholder with the unique ad code for the specific ad placement you want to define. This code is provided by the ad network and identifies the location where the ad will be displayed.

  • const ad: This declares a variable named ad to store the ad slot instance. This instance will be used later to show the ad and handle ad-related events.

  • TypeScript Type Annotation: In the TypeScript example, : AdInstance is added to explicitly specify the type of the ad variable. This ensures type safety and helps prevent potential errors.

Show Ad​

By using the show() method with optional callback functions, you can control the behavior of your application when the ad is displayed and interacted with.

ad.show({
  onClosed: () => {
    // Code to execute when the ad is closed,
    // such as logging an event or updating the UI.
  },
  onGranted: () => {
    // Code to execute when permissions are granted,
    // such as initializing the ad or fetching ad content.
  },
  onSkip: () => {
    // Code to execute when the ad is skipped,
    // such as logging an event or updating the UI.
  }
});

Key points​

  • ad.show(): This line calls the show() method on the ad instance to display the ad.

  • Callback functions: The show() method accepts an optional object with callback functions.

    • onClosed: This function is called when the ad is closed.

    • onGranted: This function is called when the user grants the necessary permissions for the ad to be displayed (e.g., for personalized ads).

    • onSkip: This function is called when the ad is skipped.

Listeners​

This code demonstrates how to add event listeners to an ad instance to respond to various ad-related events.

ad.addEventListener("onReady", () => {
  // Code to execute when the ad is ready,
  // such as updating the UI to indicate that the ad is ready.
});

ad.addEventListener("onClose", () => {
  // Code to execute when the ad is closed,
  // such as logging an event or resuming the game.
});

ad.addEventListener("onSkip", () => {
  // Code to execute when the ad is skipped,
  // such as logging an event or showing a message.
});

Key points:

  • ad.addEventListener(): This method is used to register a callback function that will be executed when a specific event occurs.
  • Event names:
    • onReady: Triggered when the ad is loaded and ready to be displayed.
    • onClose: Triggered when the ad is closed.
    • onGranted: Triggered when the user grants the necessary permissions for the ad.
    • onStart: Triggered when the ad starts playing.
    • adNotFound: Triggered if no ad is available to be displayed.
    • onSkip: Triggered when the user skips the ad (especially relevant for rewarded ads).
  • Callback functions: These are the functions that will be executed when the corresponding event is triggered.

Example​

/index.html
<!DOCTYPE html>
<html>
 <head>
 <script src="https://gcdn.magfiads.com/magfi.min.js"></script>
  <script>
   const magfi = window.MagfiAdNetwork.getInstance("APP_CODE");
   const rewarded = magfi.add({ code: "AD_CODE" });
   rewarded.addEventListener("onReady", () => {
    console.log("rewarded ready");
   });
  </script>
 </head>
 <body>
  <button id="rewarded">Rewarded Reklam Göster</button>
  <script>
   document.getElementById("rewarded").addEventListener("click", () => {
    rewarded.show({
     onClosed: () => {
      console.log("close");
     },
     onGranted: () => {
      console.log("granted");
     },
     onSkip: () => {
      console.log("skip");
     },
    });
   });
  </script>
 </body>
</html>