[EXCLUSIVO] Script mostra conteúdo no momento da oferta p/ VTurb

@imarcosviana · Junho 13, 2022

A maioria das pessoas utilizam o script abaixo para mostrar o conteúdo da página quando chega no momento da oferta na VSL, mas não é isso que acontece:

setTimeout(function() {
	$('.delay').show();
}, tempo_da_oferta);

Os problemas deste script são:

Se a pessoa pausar o vídeo, o timer para exibir o conteúdo da página ainda estará rolando.
Se a pessoa demorar para dar play no vídeo, o timer para exibir o conteúdo ainda estará rolando.

...Logo, o conteúdo será mostrado antes da oferta.

O script abaixo serve especificamente para VTurb, com ele o conteúdo da sua página será mostrado no momento certo da oferta.

Não terá problema se a pessoa pausar o vídeo.
Não terá problema se a pessoa demorar para dar o play no vídeo.

Segue abaixo o script que você irá colocar em sua página, seja ela feita em Html, ou Elementor ou qualquer outra construtor de página.

var timeOfferInSeconds = tempo_da_sua_oferta_em_segundos;
var classElementsToShowAfterOffer = '.delay';
var elementsHasShowAfterOffer = false;
$(classElementsToShowAfterOffer).hide();

function showElementsAfterOffer() {
	var player = window.smartplayer.instances[0];
	var time = Math.floor(player.video.currentTime);
	if (time >= timeOfferInSeconds; && !elementsHasShowAfterOffer) {
		$(classElementsToShowAfterOffer).show();
		elementsHasShowAfterOffer = true;
	}
}

setTimeout(function () {
	window.smartplayer.instances[0].events.events.timeupdate.push(showElementsAfterOffer);
}, 30000);

Neste código possui algumas variáveis, exemplo:

timeOfferInSeconds, que é o tempo da oferta em segundos e isto você pode pesquisar no google "minutos para segundos" e descobrir.

classElementsToShowAfterOffer, é a classe dos elementos que serão exibidos no momento da oferta, por padrão é .delay

Configurando isso o seu script já estará pronto para ação e funcionando corretamente.

👉 Observação: Testei e a conversão de compra aumentou, principalmente a taxa de pix pagos.

👉 Observação 2: Caso não saiba o tempo da oferta em segundos, ou ela esta aparecendo antes, abra o console do navegador ctrl + shift + i e aperte em console e digite o seguinte código no momento que a oferta aparecer no vídeo:

Math.floor(player.video.currentTime)

Ele irá mostrar o tempo em segundos que você deve substituir na variável timeOfferInSeconds .

Qualquer dúvida é só falar nos comentários e eu ajudarei.

Editado Junho 13, 2022 por @imarcosviana

Rato Anonimo · Junho 13, 2022

dica foda! valeu irmão, já vou aplicar aqui!

rgioodr · Junho 27, 2022

Poderia explicar melhor como ficaria a implementação no elementor?

Fiz o teste aqui mas não deu certo.

Coloquei um widget de HTML na página com a tag de <script>, coloquei a classe nos elementos, mas nada.

@imarcosviana · Junho 27, 2022

6 minutos atrás, rgioodr disse:

Poderia explicar melhor como ficaria a implementação no elementor?

Fiz o teste aqui mas não deu certo.

Coloquei um widget de HTML na página com a tag de <script>, coloquei a classe nos elementos, mas nada.

Consegue enviar um print de como você colocou o código?

Cerebro · Junho 28, 2022

Aqui também não deu certo não! teria como ajudar a gente man?

@imarcosviana · Junho 28, 2022

6 horas atrás, Cerebro disse:

Aqui também não deu certo não! teria como ajudar a gente man?

Tenho sim mano. Manda um print de como colocou o código no seu site.

HARPA · Junho 28, 2022

@imarcosvin

4 minutos atrás, @imarcosviana disse:

Tenho sim mano. Manda um print de como colocou o código no seu site.

Em 13/06/2022 em 17:06, @imarcosviana disse:
A maioria das pessoas utilizam o script abaixo para mostrar o conteúdo da página quando chega no momento da oferta na VSL, mas não é isso que acontece:
setTimeout(function() {
	$('.delay').show();
}, tempo_da_oferta);
Os problemas deste script são:

Se a pessoa pausar o vídeo, o timer para exibir o conteúdo da página ainda estará rolando.

Se a pessoa demorar para dar play no vídeo, o timer para exibir o conteúdo ainda estará rolando.

...Logo, o conteúdo será mostrado antes da oferta.

O script abaixo serve especificamente para VTurb, com ele o conteúdo da sua página será mostrado no momento certo da oferta.

Não terá problema se a pessoa pausar o vídeo.

Não terá problema se a pessoa demorar para dar o play no vídeo.

Segue abaixo o script que você irá colocar em sua página, seja ela feita em Html, ou Elementor ou qualquer outra construtor de página.
var timeOfferInSeconds = tempo_da_sua_oferta_em_segundos;
var classElementsToShowAfterOffer = '.delay';
var elementsHasShowAfterOffer = false;
$(classElementsToShowAfterOffer).hide();

function showElementsAfterOffer() {
	var player = window.smartplayer.instances[0];
	var time = Math.floor(player.video.currentTime);
	if (time >= timeOfferInSeconds; && !elementsHasShowAfterOffer) {
		$(classElementsToShowAfterOffer).show();
		elementsHasShowAfterOffer = true;
	}
}

setTimeout(function () {
	window.smartplayer.instances[0].events.events.timeupdate.push(showElementsAfterOffer);
}, 30000);
Neste código possui algumas variáveis, exemplo:

timeOfferInSeconds, que é o tempo da oferta em segundos e isto você pode pesquisar no google "minutos para segundos" e descobrir.

classElementsToShowAfterOffer, é a classe dos elementos que serão exibidos no momento da oferta, por padrão é .delay

Configurando isso o seu script já estará pronto para ação e funcionando corretamente.

👉 Observação: Testei e a conversão de compra aumentou, principalmente a taxa de pix pagos.

👉 Observação 2: Caso não saiba o tempo da oferta em segundos, ou ela esta aparecendo antes, abra o console do navegador ctrl + shift + i e aperte em console e digite o seguinte código no momento que a oferta aparecer no vídeo:
Math.floor(player.video.currentTime)
Ele irá mostrar o tempo em segundos que você deve substituir na variável timeOfferInSeconds .

Qualquer dúvida é só falar nos comentários e eu ajudarei.

Explica para nós ai como que aplica na pratica isso dai no HTML, dentro do head, body, topo da página...

@imarcosviana · Junho 28, 2022

Beleza, vou ver se consigo gravar um vídeo explicando como fazer. Assim fica melhor.

Soulfaake · Junho 28, 2022

grava um videozin se der irmãozao! obgg

Suco de Fruta · Junho 28, 2022

irmão, tem como montar um desse pra outras plataformas? exemplo @PandaVideo.com.brque a galera ta gostando bastante

Omiranha · Junho 28, 2022

deu certo ai galera? só da certo para o vturb?

@imarcosviana · Junho 28, 2022

30 minutos atrás, Suco de Fruta disse:

irmão, tem como montar um desse pra outras plataformas? exemplo @PandaVideo.com.brque a galera ta gostando bastante

Mano tem sim, porém só olhando o código do PandaVideo mesmo. Eu tenho ele aqui também, mas será meu último mês, não gostei.

27 minutos atrás, Harvey Specter disse:

deu certo ai galera? só da certo para o vturb?

Este código é específico para VTurb, eu também tenho para Vimeo e Youtube.

Pessoal, assim que eu tiver um tempo eu gravo um vídeo e mando aqui para vocês. Vou ver se consigo hoje.

Vivito · Junho 28, 2022

1 hora atrás, @imarcosviana disse:

Mano tem sim, porém só olhando o código do PandaVideo mesmo. Eu tenho ele aqui também, mas será meu último mês, não gostei.

Este código é específico para VTurb, eu também tenho para Vimeo e Youtube.

Pessoal, assim que eu tiver um tempo eu gravo um vídeo e mando aqui para vocês. Vou ver se consigo hoje.

Tem da WISTIA?

Suco de Fruta · Junho 28, 2022

1 hora atrás, @imarcosviana disse:

Mano tem sim, porém só olhando o código do PandaVideo mesmo. Eu tenho ele aqui também, mas será meu último mês, não gostei.

Este código é específico para VTurb, eu também tenho para Vimeo e Youtube.

Pessoal, assim que eu tiver um tempo eu gravo um vídeo e mando aqui para vocês. Vou ver se consigo hoje.

Po, estava querendo testar lá. Pode compartilhar o porque não curtiu a plataforma deles?

@imarcosviana · Junho 29, 2022

5 horas atrás, Vivito disse:

Tem da WISTIA?

Mano, esses scripts sou eu que crio na mão. Não consigo dizer se tem para Wistia, só olhando a fundo.

Assim que eu tiver um tempo disponível vou procurar fazer para outras plataformas.

4 horas atrás, Suco de Fruta disse:

Po, estava querendo testar lá. Pode compartilhar o porque não curtiu a plataforma deles?

Compartilho sim.
- Fiz um Teste A/B durante 07 dias e a conversão da VTurb foi maior.
- Senti uma demora de carregamento também.
- Não gostei de como a fake bar se comportou, a do VTurb é muito mais planejada, ela divide o tempo do vídeo em partes e define uma velocidade da barra de progresso para cada uma das partes.

Teve mais uns 2 motivos, que não citei, porque não me recordo muito bem. Faz 1 mês e meio que fiz o teste.

Cerebro · Junho 29, 2022

17 horas atrás, @imarcosviana disse:

Tenho sim mano. Manda um print de como colocou o código no seu site.

Aew Rato, fica desse jeito ai...

agenciaveupoficial · Junho 29, 2022

16 horas atrás, @imarcosviana disse:

Mano tem sim, porém só olhando o código do PandaVideo mesmo. Eu tenho ele aqui também, mas será meu último mês, não gostei.

Este código é específico para VTurb, eu também tenho para Vimeo e Youtube.

Pessoal, assim que eu tiver um tempo eu gravo um vídeo e mando aqui para vocês. Vou ver se consigo hoje.

Bom dia brother! Pode mandar o código em VIMEO ?

motomoto · Junho 29, 2022

4 horas atrás, Cerebro disse:

Aew Rato, fica desse jeito ai...

<script>
var timeOfferInSeconds = tempo_da_sua_oferta_em_segundos;
var classElementsToShowAfterOffer = '.delay';
var elementsHasShowAfterOffer = false;
$(classElementsToShowAfterOffer).hide();

function showElementsAfterOffer() {
	var player = window.smartplayer.instances[0];
	var time = Math.floor(player.video.currentTime);
	if (time >= timeOfferInSeconds; && !elementsHasShowAfterOffer) {
		$(classElementsToShowAfterOffer).show();
		elementsHasShowAfterOffer = true;
	}
}

setTimeout(function () {
	window.smartplayer.instances[0].events.events.timeupdate.push(showElementsAfterOffer);
}, 30000);
</script>

Falto abrir e fechar o script, tenta com esse código agora

Omiranha · Junho 29, 2022

17 horas atrás, @imarcosviana disse:

Mano tem sim, porém só olhando o código do PandaVideo mesmo. Eu tenho ele aqui também, mas será meu último mês, não gostei.

Este código é específico para VTurb, eu também tenho para Vimeo e Youtube.

Pessoal, assim que eu tiver um tempo eu gravo um vídeo e mando aqui para vocês. Vou ver se consigo hoje.

Me manda ou vende o do Vimeo por favor?

Thiago Finchness · Junho 29, 2022

55 minutos atrás, Harvey Specter disse:

Me manda ou vende o do Vimeo por favor?

mestre Harvey, Mike programador aqui, tenho o código pro vimeo..

<script>
	var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);
    player.on('play', function() {
        setTimeout(function() {
			document.querySelector('#conteudo').style.display = 'block'; // "#conteudo" é o id do conteudo de delay, caso seja uma classe troque para ".nomedaclasse"
		}, 135000); // tempo em milissegundos do seu pitch que deseja que aparece o conteudo de delay
    });
</script>

@imarcosviana · Junho 29, 2022

1 hora atrás, motomoto disse:

<script>
var timeOfferInSeconds = tempo_da_sua_oferta_em_segundos;
var classElementsToShowAfterOffer = '.delay';
var elementsHasShowAfterOffer = false;
$(classElementsToShowAfterOffer).hide();

function showElementsAfterOffer() {
	var player = window.smartplayer.instances[0];
	var time = Math.floor(player.video.currentTime);
	if (time >= timeOfferInSeconds; && !elementsHasShowAfterOffer) {
		$(classElementsToShowAfterOffer).show();
		elementsHasShowAfterOffer = true;
	}
}

setTimeout(function () {
	window.smartplayer.instances[0].events.events.timeupdate.push(showElementsAfterOffer);
}, 30000);
</script>

Falto abrir e fechar o script, tenta com esse código agora

Precisa substituir tempo_da_sua_oferta_em_segundos pelo Tempo da sua oferta em segundos.

48 minutos atrás, ctaonot disse:

mestre Harvey, Mike programador aqui, tenho o código pro vimeo..

<script>
	var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);
    player.on('play', function() {
        setTimeout(function() {
			document.querySelector('#conteudo').style.display = 'block'; // "#conteudo" é o id do conteudo de delay, caso seja uma classe troque para ".nomedaclasse"
		}, 135000); // tempo em milissegundos do seu pitch que deseja que aparece o conteudo de delay
    });
</script>

Boa! Mas só tem um problema, caso dê pause o seu setTimeout ainda será executado. O ideal é pegar uma evento de alteração do tempo, no caso do Vimeo seria:

player.on('timeupdate', function (event) {
	var current_time = event.seconds;
});

Você pegaria deste jeito acima.

Como muita gente ta com dificuldade, vou tentar dar um jeito de gravar isso hoje. 👊

Editado Junho 29, 2022 por @imarcosviana

@imarcosviana · Junho 29, 2022

Consegui criar um script para Youtube, VTurb, Wistia, Vimeo e PandaVideo. Alguns deles tem uns detalhes que precisam ser esclarecidos, então criarei um vídeo para cada um deles e enviarei aqui mais tarde.

@imarcosviana · Junho 30, 2022

Pessoal, como este post é somente dedicado ao Vturb, então criei um novo mostrando o vídeo e script de como configurar para Vturb, Vimeo, PandaVideo, Wistia e Youtube.

É só clicar abaixo:

matheusterra · Janeiro 5, 2023

Falaaa irmão, tudo na paz? Brother, segui tudo igualzinho ensinou, porém não está funcionando para mim. Independente de dar play no video, o contador roda e já libera o botão. Sabe se o código parou de funcionar?

Valeu demaiss

abv8s.afaopocaos · Fevereiro 29, 2024

Cara, segui o rolê direitinho aqui mas o conteúdo não apareceu na hora que devia. Coloquei as variáveis, ajustei o tempo em segundos, mas parece que faltou alguma coisa. Tem como dar uma luz? Preciso dessa função rodando liso pra aumentar minhas conversões!

[EXCLUSIVO] Script mostra conteúdo no momento da oferta p/ VTurb

Posts Recomendados

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário

Link para o comentário