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.
Last updated