Usando VTurb com React

Nesse artigo, vamos aprender a usar VTurb com React em um passo a passo super detalhado.

Segue:

Primeiro vamos precisar instalar o react-helmet

Rode o seguinte comando na sua aplicação para instalá-lo:

Com yarn:

yarn add react-helmet

ou com npm:

npm install --save react-helmet

Importe o "Helmet" na página em que vai ficar o vídeo da seguinte maneira:

import { Helmet } from "react-helmet"

Coloque o vídeo na sua página

Para isso, você precisa colar o código abaixo no local em que o vídeo vai ficar e substituir as informações do código abaixo pelas informações do embed JS do seu vídeo.

<div dangerouslySetInnerHTML={{ __html: 'HTMLDOSEUVÍDEO' }} />
      <Helmet>
        SCRIPTDOSEUVÍDEO
      </Helmet>

Em

HTMLDOSEUVÍDEO

coloque essa parte do código do seu vídeo:



Em

SCRIPTDOSEUVÍDEO

coloque essa parte do código do seu vídeo:




Prontinho! O vídeo já está funcionando na sua aplicação.

Teste ab com react

Caso o seu vídeo seja um teste ab vamos precisar mudar algumas coisas, segue:

Primero remova o id do script do código do teste ab e cole onde está escrito ID_DO_SEU_SCRIPT_DE_TESTEAB e depois cole o script do teste ab sem o id onde está escrito SCRIPT_DO_SEU_TESTEAB

<div dangerouslySetInnerHTML={{ __html: '<script type="text/javascript" id="ID_DO_SEU_SCRIPT_DE_TESTEAB"></script>' }} />
      <Helmet>
        SCRIPT_DO_SEU_TESTEAB
      </Helmet>

O seu script deve ficar dessa forma abaixo e já está tudo certo para rodar o seu teste

<div dangerouslySetInnerHTML={{ __html: '<script type="text/javascript" id="scr_657afe5a6ab1740009719845"></script>' }} />
      <Helmet>
        <script type="text/javascript">var s=document.createElement("script");s.src="https://scripts.converteai.net/12ad2d53-6275-484d-a818-c6c5c23f6c5f/ab-test/scr_657afe5a6ab1740009719845/player.js",s.async=!0,document.head.appendChild(s);</script>
      </Helmet>

Deixando sua página sincronizada com o vídeo

Importe o useEffect e o useState

import { useState, useEffect } from 'react';

Crie um estado para definir se os elementos estão visíveis ou não:

const [isVisible, setIsVisible] = useState(false);

Adicione o código de delay abaixo e altere o tempo em segundos em que deseja que o estado isVisible fique como true:

Dessa forma, você pode mostrar os elementos que deseja apenas quando esse estado estiver como

true

e esconder quando estiver como

false

.

useEffect(() => { /* ALTERE O VALOR 10 PARA OS SEGUNDOS EM QUE AS SEÇÕES VÃO APARECER */ const SECONDS_TO_DISPLAY = 10; /* DAQUI PARA BAIXO NAO PRECISA ALTERAR */ let attempts = 0; let elsDisplayed = false; const alreadyDisplayedKey =`alreadyElsDisplayed${SECONDS_TO_DISPLAY}` const alreadyElsDisplayed = localStorage.getItem(alreadyDisplayedKey); const showHiddenElements = function () { elsDisplayed = true; setIsVisible(true); localStorage.setItem(alreadyDisplayedKey, true) } const startWatchVideoProgress = function () { if (typeof smartplayer === 'undefined' || !(smartplayer.instances && smartplayer.instances.length)) { if (attempts >= 10) return; attempts += 1; return setTimeout(function () { startWatchVideoProgress() }, 1000); } smartplayer.instances[0].on('timeupdate', () => { if (elsDisplayed || smartplayer.instances[0].smartAutoPlay) return; if (smartplayer.instances[0].video.currentTime < SECONDS_TO_DISPLAY) return; showHiddenElements(); }) } if (alreadyElsDisplayed === 'true') { setTimeout(function () { showHiddenElements(); }, 100); } else { startWatchVideoProgress() } }, [])

Prontinho! Os elementos vão ficar sincronizados com o tempo do vídeo em que definiu em segundos.

Exemplo de condição para aparecer apenas quando chegar no tempo definido:

{isVisible && <h1>DELAY TEST</h1>}

Não esqueça de adicionar seu(s) domínio(s) na aba de Segurança, garantindo proteção extra aos seus VSLs.

Saiba mais sobre o assunto em:

Saiba como usar o VTurb com os principais construtores de página!

Diferença entre o Iframe e o código JS

Atualizado em: 22/12/2023