If you're concerned about using Ezoic with more complex sites that have a mix of static and dynamic content, don't worry! This article will provide guidance on how to effectively integrate with Ezoic via Hybrid Integration, allowing your site to benefit from all of Ezoic's powerful features.
Hybrid Integration accounts for more complex sites that have a mix of static and dynamic content, allowing them to make use of Ezoic's caching while using the client-side code snippet to call for ads.
All site builds are able to benefit from this method integration, however sites that do not utilize dynamic content and / or do not wish to make changes to their DNS have the option to use JavaScript (Standalone) Integration instead. Sites that do utilize dynamic content and do not wish to make changes to their DNS can also integrate with Ezoic via that method instead, however additional configuration may be required. See https://support.ezoic.com/kb/article/my-content-loads-or-changes-dynamically-can-i-still-use-ezoic for further instructions.
Sites must first be integrated via cloud or Cloudflare integration to enable Ezoic's caching.
Make sure placeholders are created via the dashboard. See this article to learn more about placeholders and how to create them.
Load the code library by adding this script to the <head> of the page. Some Ezoic features require the HTML to exist statically rather than loaded via JavaScript.
<script async src="https://www.ezojs.com/ezoic/sa.min.js"></script>
To add a placeholder to the page create a div element of where the ad should be. The element's id attribute should be the ID of the placeholder with prefix ezoic-pub-ad-placeholder-.
For example, to add placeholders with the id 103 and 104, the HTML would look similar to this:
<body>
<div id="ezoic-pub-ad-placeholder-103">
</div>
<!-- Content -->
<div id="ezoic-pub-ad-placeholder-104">
</div>
</body>
Once the placeholders have been added to the HTML, call for the Ezoic ad code by using ezstandalone.displayMore().
<script type="text/javascript">
window.ezstandalone = window.ezstandalone || {};
ezstandalone.cmd = ezstandalone.cmd || [];
ezstandalone.cmd.push(function() {
ezstandalone.showAds(103, 104);
});
</script>
For integrated sites without static placeholders that want to load all placeholders dynamically using our client-side ad setup, please use the following guide instead: Getting Started With EzoicAds.
Static placeholders are placeholders which are added to the html when passing through our proxy, rather than being added via JavaScript.Similar to splitting traffic on a site using the client-side code snippet option, you can add the same function without passing any parameters:
<script type="text/javascript">
ezstandalone.cmd = ezstandalone.cmd || [];
ezstandalone.cmd.push(function() {
if(ezstandalone.isEzoicUser()) {
ezstandalone.showAds(100,101);
} else {
// Normal ad code executionEzoicAds provides advanced features that allow publishers to fine-tune the behavior of the ad library. These features can be used to customize the behavior of the ad library to better suit the needs of your site. See here for further instructions: https://docs.ezoic.com/docs/ezoicads/advanced/
When setting up EzoicAds on your site, it's important to ensure that everything is functioning properly. We provide a built-in JavaScript Integration Debugger that allows you to quickly diagnose issues with your ad setup. Below is a step-by-step guide on how to use this debugger and interpret its outputs.
To activate the debugger, simply append the following query parameter to the URL of the page where your EzoicAds are integrated:
ez_js_debugger=1For example:
https://www.yourwebsite.com?ez_js_debugger=1Once the query parameter is added and the page loads, a green modal dialog will appear at the bottom center of the screen. This is the JavaScript Integration Debugger.
The debugger modal contains several key pieces of information that will help you troubleshoot your setup. Here’s a breakdown of the information provided:
Script Detection: The debugger will check if the Ezoic script is correctly included on your page. If the script isn't found, you'll see an error message. Ensure that the Ezoic script tag is placed in the right location on your page.
Placeholder Detection: The number of defined placeholders on your page will be displayed. This helps verify whether the placeholders have been successfully recognized by the Ezoic system.
Ad Status: For each placeholder, the debugger will indicate whether an ad has been successfully rendered. It shows:
Request Success: The debugger also monitors whether the ad request was sent successfully. If there’s an issue, the modal will display error details to help identify the root cause (e.g., network problems, misconfiguration).
The information provided in the debugger modal is invaluable for diagnosing common issues such as:
Ads Not Displaying: Check the placeholder detection and ad status to ensure placeholders are defined and ads are assigned.
Ad Requests Failing: If ad requests aren't being sent or are failing, the debugger will provide error messages that point to potential misconfigurations.
Script Loading Issues: If the script isn’t properly loaded, verify that the script tag is present in your source code and correctly configured.
If you need further assistance with Hybrid Integration, please log in via https://support.ezoic.com/ to make use of our dedicated resources for support. We're here to help!