Я создал ползунок с атрибутом data-banner
для отправки данных в Google Analytics.
Я хочу, чтобы данные, отправленные в Google Analytics, были данными с текущего слайда. Я сделал скрипт, как показано ниже, но данные Баннер 1 не отображаются в консоли, когда они находятся в исходном состоянии. Я хочу, чтобы появился первый баннер данных. В настоящее время происходит следующее: когда ползунок меняется, появляются данные баннера (первоначальный не появляется).
Может кто-нибудь мне помочь?
$(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.info(arrayPromotions)
console.info(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>
Вот этот фрагмент кода может решить вашу проблему.
var arrayPromotions = [];
var firstSlide = $('#carouselExampleSlidesOnly').find(".carousel- item.active .main-banner-item").data("banner");
arrayPromotions.push({
"id": firstSlide.id,
"name": firstSlide.name
});
Пожалуйста, проверьте, полезно ли это для вас или нет.
$(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.info(arrayPromotions);
console.info(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.info(arrayPromotions)
console.info(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>
да, это помогает мне. Спасибо!