Adsense-Popover is a custom element web component that displays Google AdSense in a slide-over format. This approach allows you to show ads without disrupting the content area, making it a subtle yet effective way to catch user attention.
- Non-intrusive: Display ads without compromising your content's integrity.
- Engaging: The slide-over format is more likely to draw user attention.
-
Include the Script: Add the following code inside the
<head>tag of your HTML document.<head> ... <!-- Adsense-Popover --> <script type="module" src="https://cdn.jsdelivr.net/gh/sjquant/[email protected]/dist/adsense-popover.min.js" ></script> </head>
-
Place the Element: Insert the
adsense-popoverelement anywhere within the<body>tag.<body> <adsense-popover layoutKey="<your-layout-key>" client="<your-client>" slot="<your-slot>" format="<your-format>" ></adsense-popover> ... </body>
Here are the customizable options for 'Adsense Popover', with detailed explanations for each:
| Option | Default Value | Description |
|---|---|---|
| width | 400 | Width of the popover in pixels. |
| height | 140 | Height of the popover in pixels. |
| padding | 8 | Padding inside the popover in pixels. |
| offsetX | 16 | Horizontal offset from the edge in pixels. |
| offsetY | 16 | Vertical offset from the bottom in pixels. |
| animationDuration | 0.5 | Duration of the slide-over animation. |
| horizontalPosition | "right" | Determines the horizontal alignment of the popover on the screen. Options are "left", "right", or "center". For example, "right" aligns the popover to the right edge of the screen. |
| verticalPosition | "bottom" | Determines the vertical alignment of the popover on the screen. Options are "bottom" or "top". For example, "bottom" aligns the popover to the bottom edge of the screen. |
| timeout | 2000 | Delay before the popover appears in ms. |
| layoutKey | "" | AdSense layout key. |
| slot | "" | AdSense slot. |
| client | "" | AdSense client ID. |
| format | "auto" | Ad format, e.g., "auto", "fluid". |
| responsive | "true" | Whether the ad is responsive. |
-
Do I need Google AdSense?
Yes, you need to have Google AdSense approval and set up AdSense on your site.
-
How do I find Adsense Attributes?
In AdSense, create an 'In-feed ad' under 'Ads' → 'Ad units'. You'll find a code snippet with attributes starting with
data-. Copy these values forlayoutKey,client,slot, andformat.
This project is licensed under the MIT License - see the LICENSE.md file for details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent