Mövzunu Açan
#0
Günümüzde web projeleri için reklam yönetimi önemli bir yer tutmaktadır. Google Ad Manager, bu alanda en yaygın kullanılan araçlardan biridir. SvelteKit ise modern web uygulamaları geliştirmek için tercih edilen bir framework'tür. Bu yazıda, SvelteKit ile Google Ad Manager'ı nasıl entegre edeceğinizi adım adım inceleyeceğiz.
Öncelikle, SvelteKit projemizi oluşturmalıyız. Bunu yapmak için terminalde aşağıdaki komutu çalıştırarak yeni bir proje başlatıyoruz:
Projemiz oluşturulduktan sonra, Google Ad Manager’a erişim sağlamak için bir hesap oluşturmalısınız. Hesabınızı oluşturduktan sonra, yeni bir reklam birimi oluşturun ve gerekli ayarları yapın. Bu reklam biriminin ID'sini not edin, çünkü bu bilgiyi daha sonra kullanacağız.
SvelteKit uygulamamıza Google Ad Manager'ı entegre etmek için, [script] etiketini kullanarak reklam kodunu sayfamıza eklememiz gerekiyor. Bunun için,
Ardından, reklam alanlarını yerleştireceğimiz bir bileşen oluşturmalıyız. Örneğin,
Son olarak, bu bileşeni uygulamanızda kullanmak için ana sayfanızda çağırmalısınız. Örneğin,
Bu adımları tamamladıktan sonra, SvelteKit uygulamanızda Google Ad Manager ile entegre reklam alanları oluşturmuş olacaksınız. Uygulamanızı başlatmak için terminalde
Sonuç olarak, SvelteKit ile Google Ad Manager entegrasyonu, reklam yönetimi açısından oldukça verimli bir yol sunmaktadır. Bu kurulum, geliştiricilerin projelerini daha monetize edilebilir hale getirmelerini sağlamaktadır.
Öncelikle, SvelteKit projemizi oluşturmalıyız. Bunu yapmak için terminalde aşağıdaki komutu çalıştırarak yeni bir proje başlatıyoruz:
CODE
123npm init svelte@next my-svelte-app
cd my-svelte-app
npm installProjemiz oluşturulduktan sonra, Google Ad Manager’a erişim sağlamak için bir hesap oluşturmalısınız. Hesabınızı oluşturduktan sonra, yeni bir reklam birimi oluşturun ve gerekli ayarları yapın. Bu reklam biriminin ID'sini not edin, çünkü bu bilgiyi daha sonra kullanacağız.
SvelteKit uygulamamıza Google Ad Manager'ı entegre etmek için, [script] etiketini kullanarak reklam kodunu sayfamıza eklememiz gerekiyor. Bunun için,
src/routes/+layout.svelte dosyasını açarak aşağıdaki kodu ekleyin:CODE
1<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>Ardından, reklam alanlarını yerleştireceğimiz bir bileşen oluşturmalıyız. Örneğin,
src/components/AdComponent.svelte dosyasını oluşturun ve aşağıdaki gibi düzenleyin:CODE
12345678910111213<script>
export let adUnitPath;
export let slotId;
// Reklamı yükle
window.googletag = window.googletag || { cmd: [] };
window.googletag.cmd.push(function() {
window.googletag.defineSlot(adUnitPath, [300, 250], slotId).addService(window.googletag.pubads());
window.googletag.enableServices();
});
</script>
<div id={slotId}></div>Son olarak, bu bileşeni uygulamanızda kullanmak için ana sayfanızda çağırmalısınız. Örneğin,
src/routes/+page.svelte dosyasına aşağıdaki kodu ekleyebilirsiniz:CODE
1<AdComponent adUnitPath="/1234567/my_ad" slotId="div-gpt-ad-123456789-0" />Bu adımları tamamladıktan sonra, SvelteKit uygulamanızda Google Ad Manager ile entegre reklam alanları oluşturmuş olacaksınız. Uygulamanızı başlatmak için terminalde
npm run dev komutunu kullanın ve tarayıcınızda uygulamanızı kontrol edin.Sonuç olarak, SvelteKit ile Google Ad Manager entegrasyonu, reklam yönetimi açısından oldukça verimli bir yol sunmaktadır. Bu kurulum, geliştiricilerin projelerini daha monetize edilebilir hale getirmelerini sağlamaktadır.