Creé un control deslizante que tiene un atributo data-banner para enviar sus datos a Google Analytics.
Quiero que los datos enviados a Google Analytics sean los datos de la diapositiva actual. Hice el script como se muestra a continuación, pero los datos del Banner 1 no aparecen en la consola cuando está en el estado inicial. Lo que quiero es que aparezca también el primer banner de datos. Lo que está sucediendo actualmente es que cuando cambia el control deslizante, aparecen los datos del banner (no aparece la inicial).
¿Alguien puede ayudarme?
$(document).ready(function(){ $('#carouselExampleSlidesOnly').on('slid.bs.carousel', function () { let currentActiveSlide = $('.carousel-item.active'); if(currentActiveSlide){ let dataBanner = $(currentActiveSlide).children('.main-banner-item').data('banner') let arrayPromotions = []; arrayPromotions.push({ "id": dataBanner.id, "name": dataBanner.name }) //gtag('event', 'view_promotion', { // "promotions" : arrayPromotions //}); console.log(arrayPromotions) console.log(dataBanner) } }) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="main-banner-item" data-banner='{"id": "1", "name": "Banner 1"}'> Banner 1 </div> </div> <div class="carousel-item"> <div class="main-banner-item" data-banner='{"id": "2", "name": "Banner 2"}'> Banner 2 </div> </div> <div class="carousel-item"> <div class="main-banner-item" data-banner='{"id": "3", "name": "Banner 3"}'> Banner 3 </div> </div> </div> </div>Aquí puede que este fragmento de código resuelva su problema.
var arrayPromotions = []; var firstSlide = $('#carouselExampleSlidesOnly').find(".carousel- item.active .main-banner-item").data("banner"); arrayPromotions.push({ "id": firstSlide.id, "name": firstSlide.name });Por favor, compruebe si es útil para usted o no.
$(document).ready(function(){ var arrayPromotions = []; var firstSlide = $('#carouselExampleSlidesOnly').find(".carousel-item.active .main-banner-item").data("banner"); arrayPromotions.push({ "id": firstSlide.id, "name": firstSlide.name }); console.log(arrayPromotions); console.log(firstSlide); //gtag('event', 'view_promotion', { // "promotions" : arrayPromotions //}); $('#carouselExampleSlidesOnly').on('slid.bs.carousel', function () { let currentActiveSlide = $('.carousel-item.active'); if(currentActiveSlide){ let dataBanner = $(currentActiveSlide).children('.main-banner-item').data('banner') let arrayPromotions = []; arrayPromotions.push({ "id": dataBanner.id, "name": dataBanner.name }) //gtag('event', 'view_promotion', { // "promotions" : arrayPromotions //}); console.log(arrayPromotions) console.log(dataBanner) } }) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="main-banner-item" data-banner='{"id": "1", "name": "Banner 1"}'> Banner 1 </div> </div> <div class="carousel-item"> <div class="main-banner-item" data-banner='{"id": "2", "name": "Banner 2"}'> Banner 2 </div> </div> <div class="carousel-item"> <div class="main-banner-item" data-banner='{"id": "3", "name": "Banner 3"}'> Banner 3 </div> </div> </div> </div>