Produto Patrocinado para Vtex IO

Siga o passo-a-passo abaixo para implantar anúncios em Busca Patrocinada Zaply Ads em e-commerces VTEX IO.



Passo-a-passo de implantação


1- Instale o  aplicativo Zaply Ads via VTEX App Store ;


2- Adicione sua chave de API fornecida durante o processo de integração com a Zaply Ads.

Não possui ainda uma chave de API Zaply Ads? Solicite para nosso time técnico através de  suporte@zaply.com.br .

Abra a  VTEX App Store  e instale esse aplicativo em sua loja ou execute o seguinte comando no VTEX toolbelt:
vtex install zaply.zaply-ads@0.x
Agora, abra as configurações do aplicativo em seu administrador -  https://your-store-name.myvtex.com/admin/apps  - clique no aplicativo de integração Zaply Ads e preencha a chave de API em "Enter the key from your Zaply Ads account".


3- Adicione o app do Zaply Ads no seu Store Framework:

Importe o app do Zaply Ads no manifest.json da sua loja, adicionando zaply.zaply-ads: 0.x em peerDependencies:

"peerDependencies": {
...
"zaply.zaply-ads": "0.x"
},


4- Adicione a inteface do Zaply Ads nos blocos de busca.

A interface zaply-ads precisa ser adicionada nos blocos que tenham acesso ao  Search Context da VTEX .

Por exemplo, na  loja tema da Vtex , esses blocos ficam em store/blocks/search.jsonc na lista de childrens dos blocos search-result-layout.mobile e search-result-layout.desktop:
search-result-layout.mobile :
...
"search-result-layout.mobile": {
 "children": [
 "zaply-ads", // Interface do zaply ads
 "flex-layout.row#searchinfomobile",
 "flex-layout.row#searchbread",
 "flex-layout.row#productCountMobile",
 "flex-layout.row#fetchprevious",
 "flex-layout.row#contentmobile",
 "flex-layout.row#fetchmore"
 ],
 "props": {
 "pagination": "show-more",
 "mobileLayout": {
 "mode1": "small",
 "mode2": "normal"
 },
 "defaultGalleryLayout": "grid"
 }
 },
 ...
search-result-layout.desktop :
 ...
 "search-result-layout.desktop": {
 "children": [
 "zaply-ads", // Interface do zaply ads
 "flex-layout.row#searchbread",
 "flex-layout.row#searchtitle",
 "flex-layout.row#result"
 ],
 "props": {
 "pagination": "show-more",
 "preventRouteChange": false,
 "defaultGalleryLayout": "grid"
 }
 },
 ...

Sugerimos implantar inicialmente em uma loja de desenvolvimento para testes integrados antes de submeter para o ambiente de produção. Nosso time de tecnologia está a disposição para a realização de teste de homologação.

É possível editar o layout do destacado "patrocinado" nos cards que serão ocupados por produtos patrocinados. Para tanto consulte a documentação abaixo.  https://developers.vtex.com/docs/apps/vtex.product-highlights#customization 







English Document

Zaply Ads integration for Vtex IO storefronts

This application offers an easy plug-and-play integration for Vtex IO storefronts.


How to set up


1- Install the Zaply Ads integration app in the  VTEX App Store ;

2- Add your API key acquired during the integration process with Zaply Ads:
Open the  VTEX App Store  and install this app in your store or run the following command in VTEX toolbelt:
vtex install zaply.zaply-ads@0.x
Now, open the app settings in your admin -  https://your-store-name.myvtex.com/admin/apps  - click on the Zaply Ads integration app and fill in the API key in "Enter the key from your Zaply Ads account".

3- Add the Zaply Ads app to your Store Framework:
import the Zaply Ads app into your store's manifest.json, adding zaply.zaply-ads: 0.x in peerDependencies:

"peerDependencies": {
...
"zaply.zaply-ads": "0.x"
},

4- Add the Zaply Ads interface to the search blocks. The zaply-ads interface needs to be added to the blocks that have access to the  VTEX Search Context . For example, in the  Vtex store theme , these blocks are located in store/blocks/search.jsonc in the list of children of the blocks search-result-layout.mobile and search-result-layout.desktop:
search-result-layout.mobile :
...
"search-result-layout.mobile": {
 "children": [
 "zaply-ads", // zaply ads interface
 "flex-layout.row#searchinfomobile",
 "flex-layout.row#searchbread",
 "flex-layout.row#productCountMobile",
 "flex-layout.row#fetchprevious",
 "flex-layout.row#contentmobile",
 "flex-layout.row#fetchmore"
 ],
 "props": {
 "pagination": "show-more",
 "mobileLayout": {
 "mode1": "small",
 "mode2": "normal"
 },
 "defaultGalleryLayout": "grid"
 }
 },
 ...
search-result-layout.desktop :
 ...
 "search-result-layout.desktop": {
 "children": [
 "zaply-ads", // zaply ads interface
 "flex-layout.row#searchbread",
 "flex-layout.row#searchtitle",
 "flex-layout.row#result"
 ],
 "props": {
 "pagination": "show-more",
 "preventRouteChange": false,
 "defaultGalleryLayout": "grid"
 }
 },
 ...

We advise to set up first a development store to test implementation before pushing it to production.

If desired, the "sponsored" highlight layout can be edited  https://developers.vtex.com/docs/apps/vtex.product-highlights#customization 






Dúvidas? Entre com contato com  suporte@zaply.com.br 

 Zaply Ads  é uma plataforma e marcas registrada da Zaply