Step 3: Initializing Video Ad

There are two ways to initialize the video ad player in your HTML5 game. You can either use the Application class or the initializeAndOpenPlayer function. Both methods achieve the same result, so you can choose the one that fits your needs best. For simpler approach, you can use the initializeAndOpenPlayer function. However, if you need more control over the player, you can use the Application class.

The initializeAndOpenPlayer function is a straightforward way to initialize and open the video ad player.

Example code:

<script type="text/javascript">
  const options = {
    apiKey: "xxxx-xxxx-xxxx-xxxx", // Replace with your actual API key
    injectionElementId: "some-id" // This is the ID of the div from step 2.
    adStatusCallbackFn: (status) => { // This is how you can listen for ad statuses (more in Step 4)
      console.log("OUTSIDE Ad status: ", status);
    },
    adErrorCallbackFn: (error) => { // This is how you can listen for errors (more in Step 4)
      console.log("Error: ", error.getError().data);
    },
  };

  document.getElementById("start").addEventListener("click", () => { // Or use any other event to trigger the player
    initializeAndOpenPlayer(options);
  });
</script>

1. Make sure you included the Applixir script from Step 2.
2. Make sure you added necessary div element from Step 2.
3. Replace apiKey with your actual API key, you can find it in your AppLixir dashboard.
4. Replace injectionElementId with the ID of the div element you created in Step 2.
5. Define adStatusCallbackFn to capture ad statuses and adErrorCallbackFn to capture errors (more details in Step 4).
6. Call initializeAndOpenPlayer(options) when you want to open the player. This function will initialize the player and open it immediately.

The Application class provides a more structured way to initialize and control the video ad player. It allows you to manage the player lifecycle more effectively.

Example code:

<script type="text/javascript">
  const options = {
    apiKey: "xxxx-xxxx-xxxx-xxxx", // Replace with your actual API key
    injectionElementId: "some-id" // This is the ID of the div from step 2.
    adStatusCallbackFn: (status) => { // This is how you can listen for ad statuses (more in Step 4)
      console.log("OUTSIDE Ad status: ", status);
    },
    adErrorCallbackFn: (error) => { // This is how you can listen for errors (more in Step 4)
      console.log("Error: ", error.getError().data);
    },
  };

  var application = new Application(options);
  window.onload = () => { // Important: Initialize on window load!!! (or use timeout)
    application.initialize();
    document.getElementById("start").addEventListener("click", () => {
      application.openPlayer();
    });
  };
</script>

1. Make sure you included the Applixir script from Step 2.
2. Make sure you added necessary div element from Step 2.
3. Replace apiKey with your actual API key, you can find it in your AppLixir dashboard.
4. Replace injectionElementId with the ID of the div element you created in Step 2.
5. Define adStatusCallbackFn to capture ad statuses and adErrorCallbackFn to capture errors (more details in Step 4).
6. Create a new Application instance with the options object.
7. Use window.onload to ensure that injected scripts are fully loaded before initializing. This is crucial to avoid any issues with the DOM not being ready.
8. When the window is finished loading (and this is important!) you can call initialize()
9. Now you can register any event handler and call openPlayer() to play ads

• Application(options) creates a new instance of the Application class with the provided options.
• application.initialize() initializes the player. Loding all the scripts and styles needed for the player to work and setting up other classes.
• application.openPlayer() manipulates the DOM to open the player and start playing ads.

Next Step : >> Setting up Local Callback