Skip to content

Commit 984dd85

Browse files
muhammad-fiazmuhammad-fiaz
committed
fix responsive ads
1 parent 9466988 commit 984dd85

File tree

8 files changed

+106
-31
lines changed

8 files changed

+106
-31
lines changed

‎src/components/bases/head.astro‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,12 @@ const OGImage = new URL(meta.ogImage, Astro.url).href;
4141

4242
<!-- Google AdSense -->
4343
{hasGoogleAdSense() && (
44-
<script is:inline async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${GOOGLE_CONFIG.ADSENSE_CLIENT_ID}`}
45-
crossorigin="anonymous"></script>
44+
<>
45+
<link rel="preload" as="script" href={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${GOOGLE_CONFIG.ADSENSE_CLIENT_ID}`}>
46+
<link rel="prefetch" href={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${GOOGLE_CONFIG.ADSENSE_CLIENT_ID}`}>
47+
<script is:inline async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${GOOGLE_CONFIG.ADSENSE_CLIENT_ID}`}
48+
crossorigin="anonymous"></script>
49+
</>
4650
)}
4751

4852
<!-- Google Analytics and Consent Mode -->

‎src/components/elements/AdUnit.astro‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,6 @@ const adId = `ad-${adType}-${adSlot}-${Math.random().toString(36).substr(2, 9)}`
2626
{
2727
GOOGLE_CONFIG.ADSENSE_CLIENT_ID && (
2828
<div id={adId} class={`ad-container ${className}`} style="min-height: 0;">
29-
<script
30-
is:inline
31-
async
32-
src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${GOOGLE_CONFIG.ADSENSE_CLIENT_ID}`}
33-
crossorigin="anonymous"
34-
/>
35-
3629
{adType === "display" && (
3730
<ins
3831
class="adsbygoogle"

‎src/layouts/content.astro‎

Lines changed: 49 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -92,28 +92,61 @@ const googleAdsenseClientId = import.meta.env.PUBLIC_GOOGLE_ADSENSE_CLIENT_ID;
9292
if (targetParagraph && targetParagraph.parentNode) {
9393
const adContainer = document.createElement('div');
9494
adContainer.className = 'my-6 flex justify-center ad-container';
95-
adContainer.innerHTML = `
96-
<div class="w-full max-w-sm">
97-
<ins class="adsbygoogle"
98-
style="display:block"
99-
data-ad-client="${googleAdsenseClientId}"
100-
data-ad-slot="2308296961"
101-
data-ad-format="auto"
102-
data-full-width-responsive="true"></ins>
103-
<script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>
104-
</div>
105-
`;
95+
96+
// Create ad wrapper
97+
const adWrapper = document.createElement('div');
98+
adWrapper.className = 'w-full';
99+
100+
// Create ins element
101+
const insElement = document.createElement('ins');
102+
insElement.className = 'adsbygoogle';
103+
insElement.style.display = 'block';
104+
insElement.setAttribute('data-ad-client', googleAdsenseClientId);
105+
insElement.setAttribute('data-ad-slot', '1673926045');
106+
insElement.setAttribute('data-ad-format', 'auto');
107+
insElement.setAttribute('data-full-width-responsive', 'true');
108+
109+
// Create push script
110+
const pushScript = document.createElement('script');
111+
pushScript.textContent = '(adsbygoogle = window.adsbygoogle || []).push({});';
112+
113+
// Append elements
114+
adWrapper.appendChild(insElement);
115+
adWrapper.appendChild(pushScript);
116+
adContainer.appendChild(adWrapper);
106117

107118
targetParagraph.parentNode.insertBefore(adContainer, targetParagraph.nextSibling);
108119
}
109120
});
110121
}
111122

112-
// Run ad injection after content is loaded
113-
if (document.readyState === 'loading') {
114-
document.addEventListener('DOMContentLoaded', injectAdsIntoContent);
115-
} else {
116-
injectAdsIntoContent();
123+
// Function to wait for AdSense to load
124+
function waitForAdSense(callback, maxAttempts = 50) {
125+
let attempts = 0;
126+
const checkAdSense = () => {
127+
attempts++;
128+
if (window.adsbygoogle) {
129+
callback();
130+
} else if (attempts < maxAttempts) {
131+
setTimeout(checkAdSense, 100); // Check every 100ms
132+
} else {
133+
console.warn('AdSense failed to load within timeout');
134+
}
135+
};
136+
checkAdSense();
117137
}
138+
139+
// Run ad injection after both DOM and AdSense are loaded
140+
function initAds() {
141+
if (document.readyState === 'loading') {
142+
document.addEventListener('DOMContentLoaded', () => {
143+
waitForAdSense(injectAdsIntoContent);
144+
});
145+
} else {
146+
waitForAdSense(injectAdsIntoContent);
147+
}
148+
}
149+
150+
initAds();
118151
</script>
119152
)}

‎src/layouts/list.astro‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,9 @@ const { entry, header } = Astro.props;
5353
</div>
5454

5555
<!-- Autorelaxed Ad -->
56-
<AdUnit adType="autorelaxed" adSlot="9560154927" className="my-8" />
56+
<AdUnit
57+
adType="autorelaxed"
58+
adSlot="9560154927"
59+
className="my-8 text-center"
60+
/>
5761
</BaseLayout>

‎src/pages/articles/[page].astro‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,4 +69,11 @@ const [HEADER] = entry.data.blocks;
6969
/>
7070
)
7171
}
72+
73+
<!-- Autorelaxed Ad -->
74+
<AdUnit
75+
adType="autorelaxed"
76+
adSlot="9560154927"
77+
className="my-8 text-center"
78+
/>
7279
</ListLayout>

‎src/pages/articles/[year]/[month]/[day]/[slug].astro‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,15 @@ if (recommended.length < 3) {
128128
</section>
129129
) : null
130130
}
131+
}
132+
133+
<!-- Autorelaxed Ad -->
134+
<AdUnit
135+
adType="autorelaxed"
136+
adSlot="9560154927"
137+
className="my-8 text-center"
138+
/>
139+
131140
<!-- Comments -->
132141
<div class="mt-8">
133142
<Giscus />
@@ -272,6 +281,22 @@ if (recommended.length < 3) {
272281
document.addEventListener("astro:page-load", initTOC);
273282
document.addEventListener("astro:after-swap", initTOC);
274283

284+
// Function to wait for AdSense to load
285+
function waitForAdSense(callback, maxAttempts = 50) {
286+
let attempts = 0;
287+
const checkAdSense = () => {
288+
attempts++;
289+
if (window.adsbygoogle) {
290+
callback();
291+
} else if (attempts < maxAttempts) {
292+
setTimeout(checkAdSense, 100); // Check every 100ms
293+
} else {
294+
console.warn("AdSense failed to load within timeout");
295+
}
296+
};
297+
checkAdSense();
298+
}
299+
275300
// Position the ad after the 3rd paragraph
276301
function positionArticleAd() {
277302
const articleContent = document.getElementById("article-content");
@@ -292,10 +317,12 @@ if (recommended.length < 3) {
292317
}
293318
}
294319

295-
// Run ad positioning after TOC is initialized
296-
const initAds = () => {
297-
setTimeout(positionArticleAd, 100); // Small delay to ensure content is rendered
298-
};
320+
// Run ad positioning after both DOM and AdSense are loaded
321+
function initAds() {
322+
waitForAdSense(() => {
323+
setTimeout(positionArticleAd, 100); // Small delay to ensure content is rendered
324+
});
325+
}
299326

300327
if (document.readyState === "loading") {
301328
document.addEventListener("DOMContentLoaded", initAds, { once: true });

‎src/pages/authors/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,5 +88,5 @@ const [HEADER, ATTENTION] = entry.data.blocks;
8888
</section>
8989

9090
<!-- Autorelaxed Ad -->
91-
<AdUnit adType="autorelaxed" adSlot="9560154927" className="my-8" />
91+
<AdUnit adType="autorelaxed" adSlot="9560154927" className="my-8 text-center" />
9292
</ListLayout>

‎src/pages/categories/[category]/[page].astro‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,4 +79,11 @@ if (!entry) {
7979
/>
8080
) : null
8181
}
82+
83+
<!-- Autorelaxed Ad -->
84+
<AdUnit
85+
adType="autorelaxed"
86+
adSlot="9560154927"
87+
className="my-8 text-center"
88+
/>
8289
</ListLayout>

0 commit comments

Comments
 (0)