Integrating a Game Widget via Google Ad Manager (GAM)

This guide will walk you through setting up a Playgama Game Widget on your website using a custom creative in Google Ad Manager (GAM).

This method dynamically loads the widget into the ad slot, ensuring seamless integration.

⚡️ Before You Begin

You'll need your Playgama Widget ID (e.g. WA0000000000000) to set things up.

Here’s how to find it:

Log in to your Playgama account.
If you haven’t created a widget yet, do it from the dashboard.
After creating it, you'll see an embed code — your personal widget_id is inside.
Already have a widget? Just open its page and click the </> icon to access the embed code again.

Step 1: Create a New Creative in GAM

Navigate to your Google Ad Manager account.
Go to Delivery > Creatives.
Click New creative.
Select the advertiser for this creative.
Choose Custom as the creative type. Click Continue.

Step 2: Configure the Creative

Give your creative a descriptive Name (e.g., "Playgama Widget Loader").
In the "Code snippet" section, paste the following code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
</head>
<body>
  <script>
    try {
      const iFrame = window?.frameElement;
      const widgetParent = iFrame?.parentNode;
      const { width: embedWidgetWidth = '', height: embedWidgetHeight = '' } = iFrame;
      widgetParent.style.height = embedWidgetHeight + 'px' || '300px';
      widgetParent.style.width = embedWidgetWidth + 'px' || '300px';

      const widgetID = "widget-playgama" + "-" + new Date().getTime();
      iFrame.style.display = 'none';

      const amIAliveScript = top.document.querySelectorAll("[src='https://widgets.playgama.com/index.js']")?.length === 0;
      if (amIAliveScript) {
        const widgetScript = document.createElement("script");
        widgetScript.setAttribute("src", "https://widgets.playgama.com/index.js");
        widgetScript.setAttribute("async", "true");
        widgetScript.setAttribute("id", "playgama-widget-script");

        top.document.head.appendChild(widgetScript);
      }

      top.playgama_widgets = top.playgama_widgets || { clbs: [] };
      top.playgama_widgets.clbs.push(() => {
        const playgamaOutDiv = document.createElement("div");
        playgamaOutDiv.setAttribute("id", widgetID);
        playgamaOutDiv.insertAdjacentHTML('beforeend', `<div style="opacity: 0.2;font-family: sans-serif;font-size: 10px">
  Powered by <a href="https://playgama.com/" target="_blank" rel="noopener">Playgama</a></div>`);
        widgetParent.appendChild(playgamaOutDiv);
      });
      top.playgama_widgets.clbs.push(() => {
        top.playgama_widgets.defineWidget({
          widget_id: "ADD_YOUR_WIDGET_ID_HERE", // Replace with your actual widget ID
          element_id: widgetID,
        });
        top.playgama_widgets.showWidget(widgetID);
      });
    } catch {}
  </script>
</body>
</html>

🚨 Don't forget to insert your actual widget_id from the embed code.

Ensure the Target ad unit size matches the size of the line item where this creative will be used.
Click Save.

Step 3: Assign Creative to a Line Item

Open an existing Line Item or create a new one that targets the ad inventory where you want the widget to appear.
Associate the new creative you just created with this line item.
Save the line item.

Once the line item is active, the Playgama widget will begin to serve on your website in the targeted ad units.

PreviousAdding Games Widget to Your Framer Site NextImport the Game Catalog

Last updated 7 months ago

hashtagStep 1: Create a New Creative in GAM

hashtagStep 2: Configure the Creative

hashtagStep 3: Assign Creative to a Line Item

Step 1: Create a New Creative in GAM

Step 2: Configure the Creative

Step 3: Assign Creative to a Line Item