GTM ile Mailchimp API Entegrasyonu

Özel yazılım bir web sitesine sahipseniz mail servis sağlayıcılarıyla entegrasyon sağlamak oldukça karmaşık olabilir. Bu süreci en basite indirgemek ve sitenizi Mailchimp’e bağlamanıza yardımcı olacak bir yapı paylaşacağım. Bu yapı, etiketler eklemek, kişi kartları oluşturmak, güncellemek ve hatta her ikisini aynı anda yapmak için GTM kapsayıcınızı kullanmanıza olanak tanır. Tüm Mailchimp API bağlantılarını bir geliştiriciye ihtiyaç duymadan bağlayabileceksiniz.

Web sitemiz ile Mailchimp hesabımızı bağlayabilmemiz için ihtiyacımız olanlar;

• Mailchimp API: Mailchimp hesabınız üzerinden sırasıyla Profile > Extras > API keys alanlarına ilerleyin ve yeni bir Key oluşturun.
• Mailchimp List Key: Mailchimp hesabınız üzerinden sırasıyla Audience > All Audience > Settings > Audience name and campaign defaults adımlarına ilerleyin ve Audience ID değerini kopyalayın
• Replit hesabı: Bu adres üzerinden Replit hesabı oluşturabilirsiniz.

Artık ihtiyacımız olan argümanlar elimizde olduğuna göre işlemlere başlayabiliriz.

Sistemin çalışma mantığı tam olarak şöyledir ilk olarak bir web sunucusu oluşturacağız. Sunucunun asıl amacı, bir e-posta adresiyle Mailchimp’e üye eklemek veya üyede değişiklik yapmaktır. Sunucu taraflı çalışacak olan kodun yaptığı temel işlevler:

• Bir kullanıcı Mailchimp’te zaten kayıtlı mı diye kontrol eder.
• Eğer kullanıcı kayıtlı değilse, onu yeni bir üye olarak ekler.
• Kullanıcı bir ürünü sepete eklerse, bu bilgiyi Mailchimp’te günceller.
• Kullanıcı bir ürün satın alırsa, bu bilgiyi Mailchimp’te günceller.

Ardından web tarafında kullanıcı bilgilerini sunucuya iletmesi için GTM ile bir etiket oluşturacağız, bu etiket şu işlemleri yapar;

• Kullanıcı web sitesine üye olur yada form bırakırsa sunucuya kullanıcı bilgilerini iletir. Mailchimp tarafına kullanıcı eklenir ve “Üye Olanlar” etiketi tanımlanır
• Kullanıcı siteye üye olur ve sepete herhangi bir ürün ekler ise sunucuya kullanıcı ve sepet bilgileri iletir. Mailchimp tarafına “Üye Olanlar” etiketine sahip kullanıcı ve “Sepete Atanlar” olarak güncellenir ve ürün bilgileri müşteriye tanımlanır.
• Kullanıcı siteye üye olur ve sepete ürün ekler ve ardından satın alma işlemi gerçekleştirirse sunucuya kullanıcı bilgileri iletilir. Mailchimp tarafında “Sepete Atanlar” etiketine sahip kullanıcı “Satın Alanlar” etiketiyse güncellenir.

Bu sayede sitemize üye olmuş veya form bırakmış kullanıcılara email kampanyaları düzenleyebilir hatta sepette ürün bırakan yada satın almış olan kullanıcılar için özelleştirilmiş email kampanyaları düzenleyebiliriz.

Sunucu Yapılandırması

İlk olarak API isteklerini iletebilmemiz için Replit üzerinden Node.js web sunucusu oluşturacağız. Bu yöntemle, sunucunuz bizim tarafımızdan gelen istekleri kabul eder ve bu istekleri mailchimp api’sine iletir.

Replit hesabımıza geçelim ve “Create a Repl” butonu ile bir Node.js şablonu oluşturalım.

Ardından Shell kısmından aşağıdaki kütüphaneleri sırasıyla yapıştıralım.

npm install express node-fetch
npm install cors

ve aşağıdaki kod betiğini ilgili alanları düzenleyerek index.js dosyanıza yapıştırın

düzenlenecek alanlar;

• mailchimpApiKey
• listId
• origin

const express = require('express');
const fetch = require('node-fetch');
const cors = require('cors');

const app = express();
const PORT = 3000;

const mailchimpApiKey = 'MAILCHIMP_KEY_BURAYA';
const listId = 'LISTID_BURAYA';

app.use(cors({
    origin: 'WEB_SITENIZ' //örn https://abdulazizgolca.com/
}));

app.use(express.json());

async function checkIfMemberExists(email) {
    const response = await fetch(`https://us17.api.mailchimp.com/3.0/lists/${listId}/members/${encodeURIComponent(email)}`, {
        method: 'GET',
        headers: {
            Authorization: `apikey ${mailchimpApiKey}`,
            'Content-Type': 'application/json'
        }
    });

    if (response.status === 404) {
        return false;
    } else {
        const data = await response.json();
        return data.id;
    }
}

async function addNewMember(name, email, surname) {
    const subscriberData = {
        email_address: email,
        status: "subscribed",
        tags: ["Üye Olanlar"],
        merge_fields: {
            FNAME: name,
            LNAME: surname
        }
    };

    const response = await fetch(`https://us17.api.mailchimp.com/3.0/lists/${listId}/members`, {
        method: 'POST',
        headers: {
            Authorization: `apikey ${mailchimpApiKey}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(subscriberData)
    });

    const data = await response.json();
    return data.id;
}

async function updateMemberTagsAndMergeFields(memberId, tags, mergeFields) {
    await updateTags(memberId, tags);
    if (mergeFields) {
        await updateMergeFields(memberId, mergeFields.PRODUCT, mergeFields.PRICE);
    }
}

async function updateTags(memberId, tags) {
    await fetch(`https://us17.api.mailchimp.com/3.0/lists/${listId}/members/${memberId}/tags`, {
        method: 'POST',
        headers: {
            Authorization: `apikey ${mailchimpApiKey}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            tags: tags.map(tag => ({ name: tag, status: "active" }))
        })
    });
}

async function updateMergeFields(memberId, product, price) {
    await fetch(`https://us17.api.mailchimp.com/3.0/lists/${listId}/members/${memberId}`, {
        method: 'PATCH',
        headers: {
            Authorization: `apikey ${mailchimpApiKey}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            merge_fields: {
                PRODUCT: product,
                PRICE: price
            }
        })
    });
}

async function removeTag(memberId, tag) {
    await fetch(`https://us17.api.mailchimp.com/3.0/lists/${listId}/members/${memberId}/tags`, {
        method: 'POST',
        headers: {
            Authorization: `apikey ${mailchimpApiKey}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            tags: [{ name: tag, status: "inactive" }]
        })
    });
}

app.post('/handleUserAction', async (req, res) => {
    const { action, name, email, surname, product, price } = req.body;

    let memberId = await checkIfMemberExists(email);

    switch (action) {
        case "newMember":
            if (!memberId) {
                memberId = await addNewMember(name, email, surname);
                await updateTags(memberId, ["Üye Olanlar"]);
            } else {
                res.json({ message: "Bu e-posta zaten kayıtlı." });
                return;
            }
            break;

        case "addToCart":
            if (memberId) {
                await updateMemberTagsAndMergeFields(memberId, ["Sepete Atanlar"], { PRODUCT: product, PRICE: price });
                await removeTag(memberId, "Üye Olanlar");
            } else {
                res.json({ message: "Bu e-posta kayıtlı değil." });
                return;
            }
            break;

        case "purchase":
            if (memberId) {
                await updateTags(memberId, ["Satın Alanlar"]);
                await removeTag(memberId, "Sepete Atanlar");
            } else {
                res.json({ message: "Bu e-posta kayıtlı değil." });
                return;
            }
            break;
    }

    res.json({ message: "İşlem başarıyla tamamlandı." });
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Tüm değişiklikleri gerçekleştirdikten sonra “RUN” butonuna basarak sunucuyu aktif hale getirebilirsiniz.

Webview ekranı “Cannot Get /” yatını döndürmeli.

Artık sunucunuz aktif mailchimp hesabınıza veri iletebilir halde.

GTM Yapılandırması

Tag manager hesabınıza yeni bir HTML etiketi oluşturdun ve aşağıdaki kodu yaptıştırın.

<script>

function setCookie(name, value, days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

function getCookie(name) {
    var value = "; " + document.cookie;
    var parts = value.split("; " + name + "=");
    if (parts.length === 2) {
        return parts.pop().split(";").shift();
    }
}

function handleUserAction(action, email, name, surname, product, price) {
    var cookieValue = getCookie(action);

    if (cookieValue === "sent") {
        console.log("The " + action + " action has already been executed.");
        return;
    }

    if (!email || (action === 'newMember' && (!name || !surname)) || (action === 'addToCart' && (!name || !surname || !product || !price))) {
        console.error("Gerekli bilgiler eksik!");
        return;
    }

    fetch('BURAYA NODE.JS SUNUCU ADRESİNİZ GELECEK /handleUserAction', {   // örnek: https://mailchimp.deneme.repl.co/handleUserAction
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ action: action, name: name, surname: surname, email: email, product: product, price: price })
    })
    .then(function(response) {
        return response.json();
    })
    .then(function(data) {
        console.log(data.message);
        setCookie(action, "sent", 365);
    })
    .catch(function(error) {
        console.error("API isteği sırasında bir hata oluştu:", error);
    });
}

  handleUserAction('newMember', '{{Müşteri Email}}', '{{Müşteri İsmi}}', '{{Müşteri Soyadı}}');  
  
// Örnek kullanımlar:
// handleUserAction('newMember', 'deneme4@aziz.com', 'Aziz', 'Soyad');
// handleUserAction('addToCart', 'deneme4@aziz.com', 'Aziz', 'Soyad', 'ExampleProduct', 100);
// handleUserAction('purchase', 'deneme4@aziz.com');




</script>

Kod içerisindeki süslü parantezli alanları ve “Fetch” Url adresini kendi değişken değerleriniz ile değiştiriniz. Bu kodu 3 farklı şekilde kullanabilirsiniz;

• Eğer bir e ticaret sitesiyseniz; her adım için aşağıda belirtilen örnek kullanımları kullanabilirsiniz;
  • Kullanıcı siteye üye olması durumunda handleUserAction(‘newMember’, ‘deneme4@aziz.com’, ‘Aziz’, ‘Soyad’); fonksiyonunu
  • Üye olan kullanıcının ürünü sepete atması durumunda handleUserAction(‘addToCart’, ‘deneme4@aziz.com’, ‘Aziz’, ‘Soyad’, ‘ExampleProduct’, 100); fonksiyonunu
  • Üye olan kullanıcının ürünü satın alması durumunda handleUserAction(‘purchase’, ‘deneme4@aziz.com’); fonksiyonunu

Fonksiyonlarını kullanabilirsiniz, aynı müşteri işlemleri sırası ile gerçekleştirdiğinde Mailchimp hesabınız ilgili kullanıcının etiketleri otomatik değişecektir.

• E ticaret sitesi değilseniz sadece handleUserAction(‘newMember’, ‘{{Müşteri Email}}’, ‘{{Müşteri İsmi}}’, ‘{{Müşteri Soyadı}}’); fonksiyonunu kullanarak, mailchimp panelinize müşteri bilgilerini iletebilirsiniz.

Tetikleyici ayarlamalarını müşteri bilgilerini aldığınız sayfalarda oluşturabilirsiniz.

Sonuç

Bu yazıda, Mailchimp ile entegrasyonun karmaşık olabileceği düşüncesini ortadan kaldırarak, bu süreci basit ve erişilebilir hale getirmeye çalıştım. Replit kullanarak oluşturduğumuz Node.js sunucusu, Mailchimp API’siyle etkileşimde bulunarak yeni kullanıcı ekleme ve bu kullanıcıların eylemlerine göre etiketleme işlemlerini otomatikleştirir. Diğer yandan, Google Etiket Yöneticisi (GTM) ile oluşturduğumuz etiket, web sitesi üzerindeki kullanıcı eylemlerini algılar ve bu bilgileri sunucuya iletir.

Bu sayede sitemize üye olmuş veya form bırakmış kullanıcılara email kampanyaları düzenleyebilir hatta sepette ürün bırakan yada satın almış olan kullanıcılar için özelleştirilmiş email kampanyaları düzenleyebiliriz.