add adsense component
This commit is contained in:
MuslemRahimi
parent
a14a4ba59e
commit
34c6ca2bb3
57
src/lib/components/Adsense/BottomAds.svelte
Normal file
57
src/lib/components/Adsense/BottomAds.svelte
Normal file
@ -0,0 +1,57 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
|
||||
onMount(() => {
|
||||
// Load the Google AdSense script if it hasn't been added yet.
|
||||
if (
|
||||
!document.querySelector(
|
||||
'script[src*="googlesyndication.com/pagead/js/adsbygoogle.js"]',
|
||||
)
|
||||
) {
|
||||
const script = document.createElement("script");
|
||||
script.src =
|
||||
"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7722951169931877";
|
||||
script.async = true;
|
||||
script.crossOrigin = "anonymous";
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
// Push to adsbygoogle after the script has loaded
|
||||
// You might need a small delay if the script isn't immediately ready.
|
||||
const loadAds = () => {
|
||||
try {
|
||||
(window.adsbygoogle = window.adsbygoogle || []).push({});
|
||||
} catch (e) {
|
||||
console.error("Ads failed to load", e);
|
||||
}
|
||||
};
|
||||
|
||||
// Check if the ads script is loaded, then load the ads.
|
||||
if (window.adsbygoogle) {
|
||||
loadAds();
|
||||
} else {
|
||||
// If not, add an event listener to load ads once the script loads.
|
||||
window.addEventListener("load", loadAds);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Ad markup -->
|
||||
<div
|
||||
class="border bg-gray-100 dark:bg-default shadow-sm border-gray-100 dark:border-gray-600 relative w-full min-h-[150px] mt-10 rounded"
|
||||
>
|
||||
<h3
|
||||
class="absolute -top-3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 uppercase text-xs"
|
||||
>
|
||||
Advertisement
|
||||
</h3>
|
||||
<ins
|
||||
class="adsbygoogle"
|
||||
style="display:block"
|
||||
data-ad-client="ca-pub-7722951169931877"
|
||||
data-ad-slot="4890164325"
|
||||
data-ad-format="auto"
|
||||
data-full-width-responsive="true"
|
||||
>
|
||||
</ins>
|
||||
</div>
|
||||
@ -44,62 +44,6 @@
|
||||
<dl
|
||||
class="space-y-10 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12 md:space-y-0"
|
||||
>
|
||||
<div class="relative">
|
||||
<dt>
|
||||
<div
|
||||
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white text-white dark:text-black"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
style="max-width:40px"
|
||||
aria-hidden="true"
|
||||
><path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2.3"
|
||||
d="M8.75 6.5L3.25 12l5.5 5.5m6.5-11l5.5 5.5l-5.5 5.5"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
<p class="ml-16 text-lg font-semibold leading-6">Open Source</p>
|
||||
</dt>
|
||||
<dd class="ml-16 mt-2">
|
||||
Stocknear's codebase is 100% open-source, ensuring complete
|
||||
transparency.
|
||||
</dd>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<dt>
|
||||
<div
|
||||
class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white text-white dark:text-black"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
><g fill="none" fill-rule="evenodd"
|
||||
><path
|
||||
d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
|
||||
/><path
|
||||
fill="currentColor"
|
||||
d="M19 4.741V8a3 3 0 1 1 0 6v3c0 1.648-1.881 2.589-3.2 1.6l-2.06-1.546A8.66 8.66 0 0 0 10 15.446v2.844a2.71 2.71 0 0 1-5.316.744l-1.57-5.496a4.7 4.7 0 0 1 3.326-7.73l3.018-.168a9.34 9.34 0 0 0 4.19-1.259l2.344-1.368C17.326 2.236 19 3.197 19 4.741M5.634 15.078l.973 3.407A.71.71 0 0 0 8 18.29v-3.01l-1.56-.087a5 5 0 0 1-.806-.115M17 4.741L14.655 6.11A11.3 11.3 0 0 1 10 7.604v5.819c1.787.246 3.488.943 4.94 2.031L17 17zM8 7.724l-1.45.08a2.7 2.7 0 0 0-.17 5.377l.17.015l1.45.08zM19 10v2a1 1 0 0 0 .117-1.993z"
|
||||
/></g
|
||||
></svg
|
||||
>
|
||||
</div>
|
||||
<p class="ml-16 text-lg font-semibold leading-6">No ads</p>
|
||||
</dt>
|
||||
<dd class="ml-16 mt-2">
|
||||
Without interruptions or distractions, ensuring your experience is
|
||||
smooth and fast.
|
||||
</dd>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<dt>
|
||||
<div
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<script>
|
||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
import BottomAds from "$lib/components/Adsense/BottomAds.svelte";
|
||||
|
||||
export let data;
|
||||
let discordURL = import.meta.env.VITE_DISCORD_URL;
|
||||
const emailAddress = "contact@stocknear.com";
|
||||
</script>
|
||||
@ -146,6 +148,10 @@
|
||||
an API in the future.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if !["Pro", "Plus"]?.includes(data?.user?.tier)}
|
||||
<BottomAds />
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user