> ## Documentation Index
> Fetch the complete documentation index at: https://docwrite.jooj.us/llms.txt
> Use this file to discover all available pages before exploring further.

# Advertising

> Documentation for Ads Management

### 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`, `blog`s)**.
* 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:** <br />
   Navigate to Settings -> Global Settings **(Google AdSense ID)** in the admin panel. In the settings (see below), the administrator can specify a **googleAdsenseId** <br />(for example, **"ca-pub-3940256099942544"**). This field is stored in the settings model.

2. **SEO Component:** <br />
   The SEO component (using react-helmet-async) dynamically inserts the AdSense script if a googleAdsenseId is provided in the settings:

```jsx theme={null}
{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.

3. **Creating an Ad of Type "Code":** <br />
   If the admin selects Code (HTML/JS) as the ad type, they can insert the AdSense code snippet into the adCode field. For example:

```jsx theme={null}
<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**

```HTML theme={null}
<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.

<Tip>
  Ads API Documentation
  The API allows dynamic control over Ads API Documentation processes. More details in the [API Reference](/api-reference/advertising) section
</Tip>