Skip to main content

​
This documentation covers two main parts:

  1. Admin Panel for Creating and Managing Ads
  2. Ads API Documentation

​
Admin Panel for Creating and Managing Ads

​
1.1 Overview

The admin panel allows administrators to:
  • Create, edit, and delete advertising blocks.
  • Choose the ad type: Image or Code (HTML/JS).
  • Select the banner format: Square or Horizontal.
  • Specify the ad location on the website (available options: sidebar, homepage, profile, category, blogs).
  • For Image ads, provide a URL (link) where users are redirected on click.
  • For Code ads, insert HTML/JS code. For example, you can insert a Google AdSense code snippet.
  • When editing an ad of type Image, the current image is displayed with an option to delete the image without deleting the whole ad.

​
1.2 Form Fields for Creating/Editing Ads

When creating or editing an ad, the following fields are used:
  • Title: The ad title (string, required).
  • Ad Type: The type of ad (select between Image and Code (HTML/JS)).
  • Banner Format: The ad format (select either Square or Horizontal).
  • Location: The placement on the site (select from: sidebar, homepage, profile, category, blogs).
  • Priority (Weight): A number indicating the display priority (useful for ordering/rotation).
  • Link (URL): The URL to which the user is redirected (only for Image ads).
  • Ad Code: HTML/JS code for the ad (used for Code ads). This field can include Google AdSense code.
  • Ad Image: The image file for Image ads.

​
1.3 Integrating Google AdSense

To integrate Google AdSense:
  1. Settings Panel:
    Navigate to Settings -> Global Settings (Google AdSense ID) in the admin panel. In the settings (see below), the administrator can specify a googleAdsenseId
    (for example, “ca-pub-3940256099942544”). This field is stored in the settings model.
  2. SEO Component:
    The SEO component (using react-helmet-async) dynamically inserts the AdSense script if a googleAdsenseId is provided in the settings:     
{settings.googleAdsenseId && (
 <script
   async
   src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
   data-ad-client={settings.googleAdsenseId}
 ></script>
)}
This ensures that the AdSense library is loaded on every page.
  1. Creating an Ad of Type “Code”:
    If the admin selects Code (HTML/JS) as the ad type, they can insert the AdSense code snippet into the adCode field. For example:
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="auto"
     data-ad-layout-key="-gw-1+2a-9x+5c"
     data-ad-slot="1234567890"></ins>
or 
<a href="https://example.com">
<img src="https://placehold.co/300x300" width="300" height="300" />
</a>
In your React components that render this code (using dangerouslySetInnerHTML), you should call window.adsbygoogle.push() (wrapped in a useEffect) to initialize the ad.

​
1.4 Example Usage in the Admin Panel

The admin panel component (AdsPage) provides the following functionalities: 1. A form for creating/editing ads with the fields listed above.
  • The Link field is displayed only for ads of type Image.
  • When editing an Image ad, the current image is shown along with a Delete Image button. This button sends a PATCH request with an empty imageUrl, thereby deleting only the image.
2. A list of existing ads:
  • Image ads display a small preview of the image.
  • Code ads display an HTML preview (using dangerouslySetInnerHTML).
  • Refer to the provided code for AdsPage (see below) for complete implementation details.

​
Conclusion

This documentation covers:

​
Admin Panel:

  • How to create, edit, and delete ads using the admin panel.
  • Fields available for ads and how to integrate Google AdSense by entering the ad code in the adCode field.
  • How the admin panel conditionally shows the Link field (for Image ads) and displays the current image in edit mode.
Ads API Documentation The API allows dynamic control over Ads API Documentation processes. More details in the API Reference section