E‑commerce day: Probuďte zapomenuté stránky e‑shopu s AI

Zkuste si vytvořit obsah pro svůj web dle připrevené šblony.

Co k tomu budete potřebovat?

Google tabulku v které založíte sloupce pro:
1. základní prompt
2. URL
3. USP produktové skupiny
4. Interní linky do obsahu
5. obrázky do obsahu
Vygenerujete si API klíč pro Gemini
Nakopírujete AppScript do připravené tabulky + vložíte svůj API klíč
Můžete testovat generování obsahu

Ad 1 Google Tabulka

Základní prompt

Napiš mi popisek kategorie s produktu pro eshop, kde prodáváme dlažbu a obklady. Budeš psát jako odborník z oboru a uvedeš výhody eshopu, které jsou:
- RYCHLÉ DODÁNÍ: Dodání skladového zboží do 24 hodin.
- Ceny obkladů tlačíme na jejich možné minimum.
- široký výběr produktů
- kvalitní dodavatelé - vybíráme kvalitní výrobce, o kterých víme, že mají odolné a funkční produkty
- certifikáty kvality

Dále přidej do popisku proč bych si měl jako zákazník vybrat produkty dané kategorie.

Popisek kategorie napíšeš rovnou v HTML kodu, abychom ho mohli vložit na web. Neuváděj hlavní nadpis H1, ten už na webu máme, začni rovnou obsahem. Budeš-li používat nadpisy v obsahu používej úrovně <h2> a <h3>.

Obsah naformátuj do níže uvedené HTML šablony, kde jednou dáváme obsah doleva a vedle něj vravo fotku, další blok s třídou cont-wrap specifikuje, že bude text vpravo a obrázek vlevo, abychom docílili hezkého vizuálního vjemu. Naším cílem je aby vedle fotky bylo přiměřeně textu ve srovnání s výškou obrázku, pokud to bude mutné můžeme použít i třetí nebo čtvrtý blok s třídou cont-wrap:
<div class="cont-wrap">
<div class="cont-wrap-left">
<div class="cont-wrap-in cont-wrap-in-text">
<p>text</p>
</div>
</div>
<div class="cont-wrap-right">
<div class="cont-wrap-in">
<img src="/obrazky/obrazek.jpg" alt="popis obrazku">
</div>
</div>
</div>

Jako výsledek dej jen čisté HTML bez vysvětlivek, uvozovek a jiných rušivých znaků. Nedávej na počátek odpovědi ```html a na konec odpovědi ```

Kategorie pro kterou napíšeš popisek je:

Ad 2 Generování API klíče

Přihlásíte se zde: https://aistudio.google.com/welcome

API klíč pak vygenerujete na adrese: https://aistudio.google.com/apikey

Ad 3 Nakopírujete AppScript do připravené tabulky + vložíte svůj API klíč

Nakopírujete níže uvedený script + nahradíte "XXX" vlastním API klíčem:

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Gemini AI')
    .addItem('Generovat text pro celý sloupec', 'generateWithGemini')
    .addToUi();
}
function generateWithGemini() {
  const API_KEY = 'XXX';  // Nahraďte vlastním API klíčem
  const MODEL = 'gemini-2.0-flash';
  const API_URL = `https://generativelanguage.googleapis.com/v1/models/${MODEL}:generateContent?key=${API_KEY}`;
  const sheet = SpreadsheetApp.getActiveSheet();
  const lastRow = sheet.getLastRow();
  const dataRange = sheet.getRange('A1:E' + lastRow).getValues();
  dataRange.forEach((row, index) => {
    const promptA = row[0]; // Úvodní zadání
    const promptB = row[1]; // URL
    const promptC = row[2]; // Výhody produktů
    const promptD = row[3]; // Odkazy pro HTML obsah
    const promptE = row[4]; // Obrázky pro obsah
    const rowNum = index + 1;
    if (promptA && promptB && promptC && promptD && promptE &&
        promptA.toString().trim() !== '' &&
        promptB.toString().trim() !== '' &&
        promptC.toString().trim() !== '' &&
        promptD.toString().trim() !== '' &&
        promptE.toString().trim() !== '') {
      const combinedPrompt = `Vytvoř obsah na základě těchto informací:\n\n` +
                             `Zadání: ${promptA}\n` +
                             `URL: ${promptB}\n` +
                             `Výhody produktu: ${promptC}\n` +
                             `Odkazy: ${promptD}\n` +
                             `Obrázky: ${promptE}`;
      const requestBody = {
        contents: [{
          parts: [{
            text: combinedPrompt
          }]
        }]
      };
      const options = {
        method: 'POST',
        contentType: 'application/json',
        payload: JSON.stringify(requestBody),
        muteHttpExceptions: true
      };
      try {
        Utilities.sleep(500);  // Krátká pauza mezi požadavky
        const response = UrlFetchApp.fetch(API_URL, options);
        const result = JSON.parse(response.getContentText());
        if (response.getResponseCode() === 200 && result.candidates && result.candidates.length > 0) {
          sheet.getRange(`F${rowNum}`).setValue(
            result.candidates[0].content.parts[0].text
          );
        } else {
          sheet.getRange(`F${rowNum}`).setValue('Chyba: Prázdná odpověď API');
        }
      } catch (error) {
        sheet.getRange(`F${rowNum}`).setValue('Chyba: ' + error.toString());
      }
    }
  });
  SpreadsheetApp.getUi().alert('Generování dokončeno!');
}

Ad 4 Testování

Script uložíte a spustíte - během tohoto procesu po vás budou chtít tabulky ověření přístupu.

Následně se vám v tabulkách objeví nová položka v navigaci:

Můžete si vyzkoušet generování textu a promp upravit k vlastním potřebám. HTML šablona, která je uvedena dále navazuje na CSS, kdy se střídají bloky textu s fotkou v jednou řádku - jednou je fotka vlevo a text vpravo po druhé naopak. Abyste tohoto efektu docílili je třeba doplnit následující kaskádové styly:

Fajn pro testování je využít aplikaci: https://htmledit.squarefree.com/ kde si vyzkoušíte jak obsah vypadá, můžete jej ladit dle valstních potřeb a až jste spokojeni, přenést do webu / eshopu.

Bude-li cokoliv potřeba, napište na milos.zavadil@increative.cz a mrkneme na to :-)

Naše kompetence

PPC Sociální sítě Facebook SEO Google Ads a Sklik Analýza webu či e‑shopu