Introdução

Os webstories são um formato de página web que utiliza AMP, como este exemplo.

⚠️ É importante que todo webstory seja um AMP validado: LINK PARA O VALIDADOR

🖌️ Layout

O layout do webstory consiste em 2 páginas diferentes:

• Lista: É a lista com todos os webstories;
• Story: É o webstory em si;

O código é explicado mais abaixo.

Considerações importantes

• Cada slide chama-se "página";
• O webstory possui um link exclusivo e isolado. Ele não faz parte de outra página. Você pode criar seu link com um target="_blank" ou na mesma página. O usuário precisa "voltar" para continuar navegando na página tradicional;
• Para ser indexado no Google, é importante que seu link esteja disponível no website, preferencialmente, no menu ou na inicial;
• ⚠️ Pode-se utilizar vídeos mp4, mas cuidado, recomenda-se vídeos de aproximadamente 1MB no máximo para abrir no 3G. Ao usar o vídeo, o webstory não passa automaticamente de página. A imagem é exibida até o vídeo carregar;
  

✍🏼 Criação do webstory

A criação do websoty consiste nas informações padrão e a composição de cada página.

1. 1. O título é obrigatório. Ele é exibido nas listas e é importante na indexação pelo Google. É importante manter o título dentro do "verde" na contagem de caracteres;
2. 2. A descrição é exibida somente na lista de histórias do website;
3. 3. A imagem de compartilhamento é obrigatória e é importante que sua qualidade seja alta. Recomenda-se 1200x1200px - ela não é exibida no story;
4. 4. Botão para adicionar páginas.

⚠️ O webstory exibe publicidade a cada 6˜8 páginas. Então é importante que o webstory tenha ou aprox. 10 páginas (vai exibir 1 anúncio) e se maior, aprox. 20 páginas (vai exibir 2 anúncios).

1. 1. Opcional: É o título do webstory, como consideramos um tamanho escaço (ele é visto no celular em pá), recomenda-se usar 1 a 5 palavras;
2. 2. Opcional: O texto do webstory é literalmente o parágrafo que será exibido nele. Recomenda-se de 10 a 30 palavras (para parágrafos longos, pode-se usar o Arrasta p/ cima para continuar). ⚠️ É sempre importante ver o webstory no celular para checar se tudo está ok.
3. 3. Opcional: É o espaço para adicionar links (isso é opcional), ao adicionar o link a partir do https:// neste campo, no webstory será exibido o botão "Saiba mais" (pode ser alterado no layout).
4. 4. Opcional: É um texto que pode ser inserido e o usuário só lerá caso arraste para cima;
5. 5. Obrigatório: A imagem é obrigatória (é o mais importante no webstory). É importante que a imagem tenha uma boa resolução. Recomenda-se 1200px de altura. 
6. 6. Opcional: Caso você utilize o webstory para exibir um vídeo (principal ou de fundo, caso tenham textos também). Conforme falamos acima, é bom que o vídeo seja leve (aprox. 1MB) e é obrigatório ser no formato mp4.
7. 7. Opcional: é um identificador do sistema, pode ser deixado em branco. Ele é usado como classe para exibir um layout diferente para o webstory, caso necessário.

👨🏻‍💻 Dados para o layout

Para usar os blocos, pode se usar o getBlockData(ID), conforme as notícias e produtos.

getBlockData(9929)

Como coletar os dados do website:

$website = getWebsiteData();
$website['id'];
$website['name'];
$website['domain'];
$website['path']; //configPath da extensão, normalmente /webstories

Como coletar os dados do webstory:

$webstory = getWebstoryData($webstoryId);
$webstory['title'];
$webstory['description'];
$webstory['image'];
$webstory['content']; //json com os dados das páginas

Como coletar os dados de cada página (slide)

foreach($webstory['content'] as $slide){
 //get file path and file to transform into cdn url
 $getImageExtension = explode('.', $slide['imgFile']);
 $extension = end($getImageExtension);
 $fileNameWithoutExtension = str_replace('.'.$extension, '', $slide['imgFile']);
 $cdnLink = 'https://cdn.interago.com.br/img/'.$extension.'/w_720_q_8/'.$website['id'].'/mc/'.$slide['imgPath'].'/'.$fileNameWithoutExtension;
 //other data
 $title = $slide['wbPageTitle'];
 $text = $slide['wbPageDescription']; //texto da página
 $swipeUpContent = $slide['wbPageSwipeUp']; //texto do arrasta p cima
 $link = $slide['wbPageCtaLink']; //CTA
 $video = $slide['wbPageVideo']; // video
 $customId = $slide['wbPageCustomId']; //identificador único
}

Como coletar os dados para listar os webstories

$webstories = getWebstoriesList(999); //999 é a quantidade de webstories a serem carregados

Exemplo de iteração para obter cada webstory individualmente

 foreach($webstories as $webstory) {
//get file path and file to transform into cdn url
$getImageExtension = explode('.', $webstory['image']);
$extension = end($getImageExtension);
$fileNameWithoutExtension = str_replace('.'.$extension, '', $webstory['image']);
$cdnLink = 'https://cdn.interago.com.br/img/'.$extension.'/w_300_q_8/'.$website['id'].'/mc/'. $fileNameWithoutExtension;
$tag .= '
 <div class="col-12 col-sm-6 col-md-6 col-lg-4 textCenter webstoryContainer">
 <a href="https://'.$webstory['url'].'" alt="Ir para webstory '.$webstory['title'].'" title="Ir para webstory '.$webstory['title'].'" target="_blank">
 <img src="'.$cdnLink.'" alt="Imagem do web story '.$webstory['title'].'" title="Imagem do webstory '.$webstory['title'].'" class="webstoryListImage" />
 <h4 class="webstoryListTitle">'.$webstory['title'].'</h4>
 <p class="webstoryListDescription">'.$webstory['description'].'</p>
 </a>
 </div>
 ';
}