Dijital kataloğu doğrudan web sitenize yerleştirmek, ziyaretçilerin ürünlere göz atmalarına, sayfaları çevirmelerine ve satın alma işlemine tıklamalarına olanak tanır; bunların hepsi alan adınızdan ayrılmadan gerçekleşir. İndirme gerektiren statik PDF'lerin aksine, yerleştirilmiş bir katalog anında yüklenir, her cihazda çalışır ve alışveriş yapanların ilgisini çok daha uzun süre çeker. Bu kılavuzda, kanıtlanmış beş yerleştirme yöntemini öğrenecek, kopyalayabileceğiniz gerçek kod örneklerini görecek ve ortalama katalogları yüksek dönüşüm oranına sahip kataloglardan ayıran optimizasyon püf noktalarını keşfedeceksiniz.
Why Embed a Digital Catalog Instead of Linking to a PDF?
Nasıl yapılacağına geçmeden önce, nedenini ele alalım. İndirilebilir PDF'lerden gömülü dijital kataloglara geçiş yapan işletmeler, üç alanda sürekli olarak iyileşmeler görüyor:
- Daha uzun oturum süresi — Etkileşimli bir dijital kitapçık, ziyaretçilerin sayfanızda kalmasını PDF indirme bağlantısına göre 3-5 kat daha uzun süre sağlar.
- Daha düşük hemen çıkma oranları — Sayfaya içerik yüklendiğinde, ziyaretçiler indirme uyarısından sonra ayrılmak yerine sayfayı keşfetmeye devam ederler.
- Daha iyi analizler — Gömülü kataloglar, sayfa görüntülemelerini, ürün bağlantılarına tıklama oranlarını ve sayfa başına harcanan süreyi izlemenizi sağlar.
Gömülü bir katalog aynı zamanda SEO'nuzu da iyileştirir. Arama motorları, iframe'ler ve JavaScript widget'ları içinde oluşturulan içeriği indeksleyebilir ve ürün sayfalarınıza ek anahtar kelime kapsamı sağlayabilir. Bu amaçla kullanılabilecek araçlar şunlardır: FlipHTML5 Gömüldükten sonra bile taranabilirliğini koruyan metin katmanlarına sahip kataloglar oluşturun.
Step 1: Create Your Digital Catalog
Bir kataloğu yerleştirmeden önce dijital bir kataloğa ihtiyacınız var. Henüz kendi kataloğunuzu oluşturmadıysanız, işte en hızlı yol:
- PDF dosyanızı hazırlayın. — Katalog düzeninizi InDesign, Canva veya herhangi bir tasarım aracından yüksek çözünürlüklü PDF olarak dışa aktarın.
- Flipbook platformuna yükle — Şu gibi hizmetler FlipBuilder ve FlipHTML5 PDF dosyalarını gerçekçi sayfa çevirme efektleriyle etkileşimli flipbook'lara dönüştürün.
- Etkileşimli öğeler ekleyin — Katalog sayfalarınıza doğrudan tıklanabilir ürün bağlantıları, gömülü videolar, resim açılır pencereleri ve alışveriş butonları ekleyin.
- Yayınla ve yerleştirme kodunu al — Yayınlandıktan sonra, platform web sitenize yapıştırabileceğiniz bir yerleştirme kodu oluşturur.
Katalog oluşturma konusunda daha detaylı bilgi için, kapsamlı kılavuzumuza göz atın. Dijital kataloglar nasıl oluşturulur?.
Step 2: Choose Your Embedding Method
Dijital kataloğu bir web sitesine yerleştirmenin beş ana yolu vardır. En iyi yöntem, platformunuza, teknik beceri seviyenize ve tasarım gereksinimlerinize bağlıdır.
Method 1: iFrame Embed (Most Common)
iframe yöntemi, WordPress, Shopify, Wix, Squarespace ve özel HTML siteleri de dahil olmak üzere neredeyse tüm web sitesi platformlarında çalışır. Kataloğunuzu FlipHTML5 veya FlipBuilder'de yayınladıktan sonra, aşağıdaki gibi bir iframe kod parçası alacaksınız:
Kataloğun görünmesini istediğiniz herhangi bir sayfadaki bir HTML bloğuna bu kodu yapıştırın. genişlik="100%" Bu özellik, kabın tamamen dolmasını sağlarken, yükseklik="600" Dikey boşluğu kontrol eder. Yüksekliği tasarımınıza göre ayarlayın; 500-800 piksel çoğu tasarım için uygundur.
Method 2: JavaScript Widget Embed
Bazı platformlar, iframe yerine hafif bir JavaScript kod parçacığı sunar. Avantajı nedir? Bu widget, içerik yüksekliğine otomatik olarak uyum sağlar ve ayrı bir tarama bağlamı oluşturmadığı için genellikle daha hızlı yüklenir.
<div id="catalog-container"></div>
<script src="https://online.fliphtml5.com/widget.js"></script>
<script>
FlipHTML5.init({ container: '#catalog-container', bookId: 'your-id' });
</script>Bu yöntem, tek sayfa uygulamaları ve iframe kısıtlamalarının geçerli olduğu siteler için idealdir.
Method 3: WordPress Plugin or Shortcode
WordPress tabanlı bir siteniz varsa, birçok flipbook platformu özel eklentiler sunmaktadır. Eklentiyi kurduktan sonra, aşağıdaki gibi bir kısa kod kullanmanız yeterlidir. [flipbook id="123"] Gönderi veya sayfa düzenleyicinizde. Eklenti, duyarlı boyutlandırma, tembel yükleme ve önbellekleme işlemlerini otomatik olarak yönetir.
Method 4: Direct Link with Lightbox Pop-up
Ziyaretçilerin sayfadan ayrılmadan kataloğu tam ekran bir yer paylaşımı içinde görüntülemesini mi istiyorsunuz? Bunun için lightbox yaklaşımını kullanın:
<a href="https://online.fliphtml5.com/your-catalog/"
class="lightbox-trigger" data-type="iframe">
Ürün Kataloğumuzu İnceleyin
</a>Kataloğu dikkat dağıtmayan bir katmanda açmak için bunu bir lightbox kütüphanesiyle (Fancybox, Magnific Popup veya Lightbox2) birlikte kullanın. Bu, özellikle gezinme karmaşasını en aza indirmek istediğiniz açılış sayfaları için çok iyi sonuç verir.
Method 5: API-Based Custom Integration
Daha fazla kontrol için, ileri düzey kullanıcılar platform API'lerinden yararlanarak katalog verilerini alabilir ve sayfaları özel bir arayüz içinde görüntüleyebilirler. Bu yaklaşım, ürün veritabanları, CRM sistemleri veya özel analiz panolarıyla derin entegrasyona ihtiyaç duyan kurumsal siteler için uygundur.
Step 3: Optimize for Mobile and Speed
Web trafiğinin 601.260 trilyondan fazlası mobil cihazlardan geliyor, bu nedenle gömülü kataloğunuzun daha küçük ekranlarda da harika görünmesi ve performans göstermesi gerekiyor.
Responsive Sizing
Ekran boyutları arasında doğru en boy oranını korumak için iframe'inizi duyarlı bir kapsayıcıya sarın:
<div style="position:relative; padding-bottom:75%; height:0; overflow:hidden;">
<iframe src="https://online.fliphtml5.com/your-catalog/"
style="position:absolute; top:0; left:0; width:100%; height:100%;"
frameborder="0" allowfullscreen></iframe>
</div>Bu CSS hilesi, katalogun telefonlarda, tabletlerde ve masaüstü bilgisayarlarda 4:3 oranını korumasını ve rahatsız edici kaydırma çubukları veya kesilmiş sayfalar olmamasını sağlar.
Lazy Loading
Ekle yükleniyor="tembel" Bu özellik, tarayıcıların kataloğun ekrana kaydırılana kadar yüklemeyi ertelemesini sağlar. Bu, özellikle birden fazla gömülü öğe içeren sayfalarda, ilk sayfa hızını önemli ölçüde artırır.
Image Optimization
Katalog görselleri yüklenmeden önce optimize edilmelidir. WebP veya sıkıştırılmış JPEG formatlarını kullanın, tek tek sayfa görsellerini 300 KB'ın altında tutun ve platformun yerleşik sıkıştırma özelliğinin gerisini halletmesine izin verin. FlipHTML5'in yayın motoru Her sayfa için otomatik olarak birden fazla çözünürlük kademesi oluşturur; mobil ziyaretçilere daha küçük boyutlu görseller, masaüstü kullanıcılarına ise tam çözünürlüklü sürümler sunar.
Step 4: Add Tracking and Analytics
Kataloğunuzu yerleştirmek işin sadece yarısı. Ziyaretçilerin onunla nasıl etkileşim kurduğunu ve hangi ürünlerin en çok ilgi çektiğini anlamak için verilere ihtiyacınız var.
Google Analytics Integration
Çoğu dijital kitap platformu Google Analytics veya Google Tag Manager entegrasyonunu destekler. Analiz hesabınızı bağlayarak şunları takip edebilirsiniz:
- Ziyaretçilerin en çok görüntülediği katalog sayfaları hangileri?
- Sayfa başına ortalama harcanan süre
- Ürün bağlantılarına tıklama oranları
- Ziyaretçilerin kataloğu bıraktıkları teslim noktaları.
UTM Parameters for Internal Campaigns
Katalog sayfalarınızdan ürün veya ödeme sayfalarına bağlantı verirken, dönüşüm ilişkilendirmesini izlemek için UTM parametreleri ekleyin:
https://yourstore.com/product?utm_source=catalog&utm_medium=embed&utm_campaign=spring2026Bu, analiz platformunuza hangi satışların yerleşik kataloğunuzdan, hangilerinin diğer trafik kaynaklarından kaynaklandığını tam olarak gösterir.
Step 5: Best Practices for Higher Engagement
Farklı sektörlere ait yüzlerce kataloğu entegre ettikten sonra, bazı kalıpların sürekli olarak daha iyi sonuçlar verdiğini tespit ettik.
Position the Catalog Above the Fold
Gömülü kataloğu, ziyaretçilerin hemen görebileceği bir yere, ideal olarak içeriğin ilk ekranına yerleştirin. Uzun metin bloklarının altına gizlenmiş kataloglar -50 daha az etkileşim alır.
Add a Clear Call-to-Action Around the Embed
Kataloğu sayfaya öylece bırakmayın. İçeriğini açıklayan bir başlık, ziyaretçilerin bulacakları şeylerin kısa bir açıklaması ve ürün koleksiyonunuza veya iletişim formunuza bağlantı veren bir harekete geçirici düğme (CTA) ile çevreleyin.
Keep Catalog Length Manageable
Web sitelerine yerleştirme için, daha kısa kataloglar (10-30 sayfa) daha uzun olanlardan daha iyi performans gösterir. Tam kataloğunuz 50 sayfayı aşarsa, onu temalı bölümlere ayırmayı düşünün — mevsimlik koleksiyonlar, ürün kategorileri veya yeni gelenler — ve her birini ilgili sayfasına yerleştirin. İşte bu noktada, gibi bir araç devreye giriyor. FlipHTML5 Yapay Zeka Katalog Oluşturucu Ürün verilerinizden otomatik olarak odaklanmış katalog bölümleri oluşturarak saatlerce zamandan tasarruf sağlar.
Use Clickable Hotspots and Buy Buttons
Dijital kataloğun basılı kataloğa göre en büyük avantajı etkileşimliliktir. Doğrudan ürün sayfalarına, alışveriş sepetlerine veya iletişim formlarına bağlantı veren tıklanabilir alanlar ekleyin. Katalog sayfasına doğrudan "Şimdi Satın Al" veya "Sepete Ekle" düğmeleri ekleyin. Bu tür araçlar sayesinde, dijital kataloglar oluşturmak çok daha kolay hale gelir. Flip PDF Pro Bu etkileşimli öğeleri eklemeyi son derece kolaylaştırın; kodlama gerekmez.
Platform-Specific Embedding Guides
Her web sitesi oluşturucu, gömülü içeriği biraz farklı şekilde ele alır. İşte en popüler platformlar için kısa talimatlar:
WordPress
Gutenberg'de "Kod Düzenleyici"ye geçin veya "Özel HTML" bloğu ekleyin. İframe kodunuzu yapıştırın. Klasik Düzenleyici'de, yapıştırmadan önce "Metin" sekmesine geçin. FlipBuilder dahil birçok katalog platformu, süreci daha da basitleştiren WordPress eklentileri de sunmaktadır.
Shopify
Çevrimiçi Mağaza → Sayfalar → Düzenle'ye gidin. Zengin metin düzenleyicisinde, HTML düğmesine tıklayın () ve iframe kodunuzu yapıştırın. Ürün sayfaları için, yerleştirme kodunu ürün açıklaması HTML'sine ekleyin.
Wix
“Ekle” menüsünden “Yerleştirme Kodu” widget'ını kullanın. “Widget Yerleştir” → “Kod Gir” seçeneğini seçin ve iframe kod parçacığınızı yapıştırın. Wix ayrıca, widget'ı sayfa genişliğini dolduracak şekilde sürükleyerek tam genişlikte yerleştirmeyi de destekler.
Squarespace
Sayfa bölümünüze bir "Kod" bloğu ekleyin. iframe yerleştirme kodunu yapıştırın ve kaydedin. Squarespace, güvenlik için iframe'i otomatik olarak sanal ortamda çalıştırır, bu nedenle kataloğunuzun barındırma hizmetinin farklı kaynaklardan yerleştirmeye izin verdiğinden emin olun.
Tasarım ilhamı arıyorsanız, şunlara göz atın: FlipHTML5 katalog şablonları Gömme işleminden önce özelleştirebileceğiniz hazır şablonlar galerisi.
Troubleshooting Common Embedding Issues
Basit yerleştirmelerde bile sorunlar yaşanabilir. İşte en sık karşılaşılan sorunlar ve çözümleri:
Catalog Shows a Blank White Box
Bu genellikle barındırma platformunun iframe yerleştirmeyi engellediği anlamına gelir. Kataloğun X-Frame-Options başlığını kontrol edin. FlipHTML5 gibi platformlar varsayılan olarak yerleştirmeye izin verir, ancak kendi sunucunuzda barındırıyorsanız, ayarlamanız gerekebilir. X-Frame-Options: ALLOW-FROM https://yoursite.com veya kullanın İçerik-Güvenlik-Politikası Başlıklar yerine.
Catalog Loads Slowly
Büyük katalog dosyaları yavaş yüklemelere neden olur. Yüklemeden önce kaynak PDF dosyanızı sıkıştırın, web'de görüntüleme için görüntü çözünürlüğünü 150 DPI'ye düşürün ve iframe'inizde tembel yüklemeyi etkinleştirin. Ayrıca, katalog sunucunuzun bir CDN kullandığından emin olun; hem FlipBuilder hem de FlipHTML5, dünya çapında hızlı yükleme için küresel CDN ağları aracılığıyla içerik sunmaktadır.
Scrolling Conflicts on Mobile
Kaydırılabilir bir sayfada tam yükseklikte bir iframe bulunduğunda, kullanıcılar iframe içinde kaydırma yaparken "sıkışıp kalabilirler". Bunu düzeltmek için, `overflow:hidden` özelliğine sahip sabit bir yükseklik ekleyin veya mobil cihazlarda kataloğu yeni bir sekmede açan bir "açmak için dokunun" düğmesi kullanın.
Catalog Doesn’t Display on Certain Browsers
Bazı eski tarayıcılar veya gizlilik odaklı tarayıcılar üçüncü taraf çerezlerini ve komut dosyalarını engeller. Kataloğunuzun yerleştirme URL'sinin HTTPS kullandığından emin olun. Sorunlar devam ederse, kataloğu yeni bir sekmede açan yedek bir bağlantı sağlayın.
Etkili kataloglar oluşturma hakkında daha fazla bilgi için kılavuzumuza bakın. Satışları artırmak için etkileşimli dijital kataloglar oluşturmak.
Real-World Examples of Embedded Catalogs
Gömülü katalogların nasıl çalıştığını görmek, nelerin işe yaradığını netleştirmeye yardımcı olur. İşte etkili gömme stratejilerini gösteren üç kullanım örneği:
E-commerce Product Catalog
Moda ve ev eşyası markaları, ana sayfalarının üst bölümüne mevsimlik kataloglar yerleştiriyor. Ziyaretçiler özenle seçilmiş koleksiyonlara göz atıyor, ürün resimlerine tıklayarak tek tek ürün sayfalarına gidiyor ve yerleşik sosyal paylaşım butonları aracılığıyla favori sayfalarını paylaşıyor. İlham verici örnekleri derlememizde görebilirsiniz. dijital katalog örnekleri.
B2B Wholesale Catalog
Üreticiler, toptan satış kataloglarını erişim kısıtlamalı açılış sayfalarına yerleştiriyor. Alıcı giriş yaptıktan veya iletişim formunu gönderdikten sonra, fiyatlandırma, minimum sipariş miktarları ve her sayfada "Teklif İste" butonları bulunan tam kataloğa erişebiliyor. Bu yaklaşım, özellikle nasıl satış yapacağını araştıran işletmeler için oldukça iyi sonuç veriyor. çevrimiçi bir ürün kataloğu oluşturun.
Marketing Brochure on a Landing Page
Hizmet sektöründeki işletmeler, şirket tanıtımını, müşteri referanslarını, fiyatlandırma kademelerini ve iletişim formunu bir araya getiren çok sayfalı broşürlerini, ziyaretçilerin sayfayı kaydırmaya devam etmesini sağlayan etkileşimli bir dijital kitapçık (flipbook) widget'ı içinde sunarlar. Daha fazla bilgi için sitemizi inceleyin. dijital katalog tasarım ipuçları Bu yaklaşımla dönüşümleri en üst düzeye çıkarmak için.
SEO Benefits of Embedded Catalogs
Katalogları web sitenize entegre etmek yalnızca kullanıcı deneyimini iyileştirmekle kalmaz, aynı zamanda arama motoru optimizasyon stratejinizi de doğrudan destekler.
- Kalma süresinin artırılması — Etkileşimli içerik, ziyaretçilerin sayfada daha uzun süre kalmasını sağlayarak Google'a sayfanızın değer sağladığı sinyalini verir.
- Zengin medya sinyalleri — Etkileşimli içerik barındıran sayfalar, yalnızca metin içeren rakiplerine kıyasla daha zengin bir deneyim sundukları için rekabetçi alanlarda daha iyi sıralama elde ederler.
- Dahili bağlantı fırsatları — Her katalog sayfası, sitenizdeki ilgili blog gönderilerine, ürün sayfalarına veya kategori sayfalarına bağlantı verebilir ve böylece iç bağlantı yapınızı güçlendirebilir.
- Azaltılmış hemen çıkma oranı — Ziyaretçiler ilgi çekici bir kataloğu anında bulduklarında, geri düğmesine basma olasılıkları daha düşüktür.
Katalogunuzu arama motorları için optimize etme hakkında daha fazla bilgi için, aşağıdaki kaynaklara göz atın. FlipHTML5 Öğrenme MerkeziBu platform, hem etkileşimli hem de SEO dostu kataloglar yayınlama konusunda eğitimler sunmaktadır.
Daha da fazla tasarım seçeneği arıyorsanız, göz atın. ücretsiz ürün kataloğu şablonları veya katalog düzeni fikirleri kullanıma hazır düzenler için.
Start Embedding Your First Catalog Today
Web sitenize dijital bir katalog yerleştirmek, pasif gezinmeyi aktif ürün keşfine dönüştürür. İster basit bir iframe, ister bir JavaScript widget'ı veya platforma özgü bir eklenti seçin, kataloğunuz hazır olduktan sonra işlem birkaç dakika sürer.
İşte yapmanız gerekenlerin kısa bir özeti:
- Kataloğunuzu aşağıdaki gibi bir araç kullanarak oluşturun. FlipBuilder veya FlipHTML5.
- Web sitenizin platformuna uygun yerleştirme yöntemini seçin.
- Mobil cihazlar için duyarlı konteynerler ve tembel yükleme (lazy loading) ile optimize edin.
- Etkileşimi ve dönüşümleri ölçmek için izleme özelliği ekleyin.
- En iyi uygulamaları takip edin: sayfanın üst kısmında yer alma, net harekete geçirici mesajlar (CTA) ve yönetilebilir katalog uzunluğu.
Gömülebilir dijital katalog oluşturmaya hazır mısınız? FlipHTML5'e ücretsiz kaydolun PDF dosyanızı dakikalar içinde etkileşimli, yerleştirilebilir bir kataloğa dönüştürün. Tasarım deneyimine gerek yok; sadece yükleyin, özelleştirin ve yerleştirme kodunu sitenize yapıştırın.