Harika web deneyimleri sağlamak için Digizuite'deki dijital varlıklar ve Contentful'daki web içeriği yönetimi ile pazarlama yığınınızı nasıl oluşturabilirsiniz? Bu size gerçek bir örnekle nasıl olduğunu gösterecektir .

Önceki gönderilerimde, tüm temas noktalarında ilgi çekici ve tutarlı içeriğin öneminden bahsetmiştim. Ve doğru yapı taşlarından oluşan şekillendirilebilir bir mimari ile nasıl etkinleştirileceği .

Kulağa hoş ve züppe geliyor, ama pratikte nasıl çalışıyor? Bu yazının geri kalanında, Contentful CMS (İçerik Yönetim Sistemi) ve Digizuite DAM'de (Digital Asset Management) bir uygulama oluşturduğum teknik bir örneği göstereceğim.

Neden DAM ve CMS?

Herhangi bir web sitesi, ziyaretçilerimizin ilgisini çekmek için çekici resimlere ve videolara ihtiyaç duyar. DAM ve CMS'nin mükemmel bir şekilde birlikte oynadığı yer burasıdır.

Digizuite DAM, tüm dijital varlıklar için tek bir gerçek kaynağı sağlar. Tüm varlıklar buradan oluşturulur ve ardından onaylanan tüm kanallara (sadece CMS'ye değil) dağıtılır. Üstüne üstlük, harika bir kullanıcı deneyimi için herhangi bir platforma entegre olan UI widget'ları gibi harika entegrasyon yetenekleri sağlar . Ancak aynı zamanda masaüstünde, tablette ve mobilde gerçekleştirmek üzere doğru yorumlamalarda görüntü ve videolar elde etmek için medya işleme gücü .

Contentful CMS başsızdır ve özünde birleştirilebilir. Tüm içeriğiniz için bir platform sağlar. Web siteniz veya ticaret platformunuz için hangi gereksinimleriniz olursa olsun. İçerik daha sonra harika API'lerinden herhangi bir dijital kanaldan yayınlanabilir ve kullanılabilir.

Contentful'ın içeriği daha sonra Digizuite'tan gelen dijital varlıklarla birleştirilebilir. Örneğin Contentful, blog gönderinizin başlığı, açıklaması, gövde metni ve aynı zamanda bu blog gönderisini hayata geçirecek dijital varlıklar içeren yapısını sağlar.

Entegrasyon Yaklaşımı

Contentful için, kullanıcıların Digizuite'te bir varlık bulmasına (filtreler kullanarak, arama yaparak veya yalnızca klasörlerde gezinerek) ve ardından doğru yorumlamada varlığı seçmesine olanak tanıyan yeni bir uygulama oluşturacağız.

Contentful, bu görevde bize yardımcı olacak harika bir Uygulama Araç Seti'ne sahiptir. Hatta kolay ama harika bir entegrasyon sağlayan @contentful/dam-app-base'e sahipler .

Digizuite , herhangi bir web platformuna iç çerçeveye eklenebilen ve Contentful tarafından sağlanan çerçeveye çok uygun olan Standart Gömülü Kullanıcı Arayüzüne sahiptir .

Uygulamayı Oluşturma

İlk olarak, yeni bir uygulama oluşturmamız ve bazı bağımlılıklar yüklememiz gerekiyor. Biz sadece Contentful'ın rehberini takip ediyoruz .

// first create a contentful app
npx create-contentful-app --typescript

// then install the dam-app-base
npm install @contentful/dam-app-base

setup({
  cta: CTA,
  name: 'Digizuite',
  logo: 'https://url-to-logo.com/logo.png',
  color: '#40D1F5',
  description:
    'Digizuite is a leading Digital Asset Management Platform.',
  parameterDefinitions: [
    {
      id: 'digizuiteMmUrl',
      type: 'Symbol',
      name: 'Digizuite MM URL',
      description:
        'Provide your media manager URL',
      default: "https://your-mm-url.com",
      required: true,
    },
  ],
  validateParameters: () => null,
  makeThumbnail, // Defines what thumbnail to show when asset is selected
  renderDialog, // Renders the Digizuite Embedded UI
  openDialog, // Opens the Digizuite Embedded UI with settings
  isDisabled: () => false,
});

Uygulama tamamlandığında, uygulamayı aşağıdaki komutla oluşturmanız yeterlidir.

npm run build

Contentful'a ekleme

Şimdi uygulama, hesabınıza gidip uygulamalara tıklayarak ve ardından 'Uygulama oluştur' seçeneğine tıklayarak yapılabilecek Contentful'a eklenmelidir.

Ardından, tüm doğru bilgileri doldurmanız gereken aşağıdaki ekranı göreceksiniz. 'Contentful tarafından barındırılıyor' seçeneğini işaretleyin ve ardından projenizden (build komutunu çalıştırdıktan sonra) uygulama çıktı klasörüne ( burada 'uygulama çıktınızı buraya sürükleyip bırakın' yazıyor ) sürükleyin.

Artık hazırsınız ve sıkı çalışmanızın sonuçlarını kontrol edebilirsiniz.

1. Yeni bir içerik türü oluşturun:

3. Görünüm altında yeni Digizuite DAM eklentinizi seçin.

4. Ardından 'İçerik'in altına gidin ve yeni içerik türünüze göre oluşturun.

'Digizuite'ten varlık seç' seçeneğine tıkladığınızda, seçtiğiniz yerden aşağıdaki Digizuite DAM UI'yi görüntüleyecektir.

Önemli olan, bu örnek için Contentful'da hiçbir fiziksel dosyanın depolanmadığına dikkat etmektir. Tüm varlıklar, beklediğiniz gibi performans ve hız vermesi gereken doğrudan CDN hızlandırmalı bir dijital URL kullanıyor.

Tam Örnek

Aşağıdaki gif, seçimin nasıl çalıştığını gösterecektir (basit bir örnek).

Digizuite Gömülü Kullanıcı Arabiriminde meta verileri değiştirmek ve (çoklu) odak noktası kırpma gibi çok daha fazlası var, ancak bu yazının konusu olmadığı için, ilham almak için aşağıda yalnızca bu küçük örneği paylaşacağım.

Son söz

Yukarıda Contentful ve Digizuite arasında bir entegrasyon etkinleştirildi. Uygulama oluşturmayı basit bir görev haline getiren Contentful App Toolkit ile sorunsuz süreç.

Digizuite Embedded UI ile birlikte uygulama araç seti, Contentful editörlerinin artık Digizuite DAM'lerinden yararlanabilecekleri harika bir entegrasyon oluşturur.

Bu örnekte, her şey Digizuite'den CDN URL'leri kullanılarak etkinleştirilmiştir. Dolayısıyla, herhangi bir varlığın Digizuite içinde güncellenmesi ve onaylanması durumunda, bu değişiklikler bu URL'ler aracılığıyla otomatik olarak kullanıma sunulur. Bu, tam olarak bir DAM'den beklenen şey olan, tamamen merkezileştirilmiş varlık kontrolü ve yönetişimi sağlar.
Bir ekleme, SEO amaçları için Digizuite'ten Contentful'daki içeriğe meta veriler eklemek olacaktır. Ancak bu, yukarıdakilere basit bir ektir.

Varlıkların oluşturulması artık DAM'de merkezi olarak gerçekleştirilebilir. Fotoğrafçılardan, stüdyolardan ve kreatiflerden, daha fazla verimlilik, tutarlılık ve kontrole yol açacak herhangi bir başka entegrasyon olmadan sonunda onaylanacak ve doğrudan Contentful'da erişilebilir hale getirilecek varlıklar alma.

Kaynaklar

• Digizuite Örnekleri:https://github.com/Digizuite/embedded-ui-examples
• İçerikli Uygulama Çerçevesi:https://www.contentful.com/developers/docs/extensibility/app-framework/libraries/