Google Ad Manager Next.js Kurulumu

Yesterday at 22:36 OP

Thread Starter #0

Next.js, React tabanlı bir framework olarak, sunucu tarafı render ve statik site oluşturma gibi özellikleriyle web uygulamaları geliştirmeyi kolaylaştırır. Google Ad Manager ise çevrimiçi reklamcılık işlemlerini yönetmek için kullanılan güçlü bir platformdur. Bu iki aracı entegre etmek, hem kullanıcı deneyimini artırmak hem de reklam gelirlerini optimize etmek için önemlidir. İşte adım adım Google Ad Manager’ı Next.js projenize nasıl kuracağınız.

1. Ad Manager Hesabı Oluşturma:
Öncelikle, Google Ad Manager’da bir hesap oluşturmanız gerekiyor. Hesabınızı oluşturduktan sonra, reklam alanlarınızı tanımlamak için "Inventory" sekmesine gidin ve "Ad Units" kısmında yeni bir reklam birimi ekleyin. Her reklam birimi için bir "Ad Unit Code" alacaksınız; bu kod, Next.js uygulamanızda kullanılacaktır.

2. Next.js Projesini Oluşturma:
Next.js projenizi oluşturmak için terminalde aşağıdaki komutları kullanabilirsiniz:

CODE

12npx create-next-app@latest my-ad-manager-app
cd my-ad-manager-app

Bu, yeni bir Next.js uygulaması oluşturur ve projeye geçiş yapar.

3. Google Ad Manager Script’ini Ekleme:
Google Ad Manager’ı kullanmak için gerekli olan script kodunu, projenizin pages/_document.js dosyasına eklemeniz gerekiyor. Aşağıdaki kodu bu dosyaya ekleyin:

CODE

12345678910111213141516171819import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default MyDocument;

4. Reklam Bileşeni Oluşturma:
Next.js içinde bir reklam bileşeni oluşturmalısınız. Örneğin, components/Ad.js dosyasını oluşturun ve aşağıdaki kodu ekleyin:

CODE

12345678910111213141516import { useEffect } from 'react';

const Ad = ({ adUnit }) => {
    useEffect(() => {
        window.googletag = window.googletag || { cmd: [] };
        googletag.cmd.push(() => {
            googletag.defineSlot(adUnit, [300, 250], 'div-gpt-ad-123456789-0').addService(googletag.pubads());
            googletag.pubads().enableSingleRequest();
            googletag.pubads().refresh();
        });
    }, [adUnit]);

    return <div id="div-gpt-ad-123456789-0" style={{ width: '300px', height: '250px' }} />;
};

export default Ad;

5. Reklam Bileşenini Sayfanıza Ekleme:
Son olarak, oluşturduğunuz Ad bileşenini herhangi bir sayfada kullanabilirsiniz. Örneğin, pages/index.js dosyasına şu şekilde ekleyebilirsiniz:

CODE

12345678910import Ad from '../components/Ad';

export default function Home() {
    return (
        <div>
            <h1>Hoşgeldiniz!</h1>
            <Ad adUnit="/1234567/homepage" />
        </div>
    );
}

Bu adımları tamamladıktan sonra, Next.js uygulamanızda Google Ad Manager ile reklamlarınızı göstermeye hazır hale geleceksiniz. Herhangi bir sorun ile karşılaşırsanız, Google Ad Manager belgelerine başvurmayı unutmayın.

Similar threads

Report Content