@push('styles')
<style>
.preview-wrap {
width: 100%;
height: 75vh;
padding: 0;
overflow: hidden;
}
#preview {
margin: auto;
display: block;
width: 100%;
height: 100%;
border: 0;
pointer-events: none;
}
</style>
@endpush
<div class="row">
<div class="col-md-4" >
<div class="row" >
<div class="col-md-12">
<div class="card">
<div class="header" style="padding-bottom: 0px;">
Meta Pixel
<div class="form-group">
<label for="main_meta_pixel_id" class="form-label">Pixel ID</label>
<div class="form-line">
<input type="text" id="main_meta_pixel_id" name="main_meta_pixel_id"
class="form-control" placeholder="Meta Pixel ID" value="{{ old('main_meta_pixel_id',@$metaEvents->where('source','meta')->first()->pixel_id) }}">
</div>
</div>
</div>
<div class="body ">
<div class="panel-group" id="accordion_meta" role="tablist" aria-multiselectable="true">
@foreach ($pages as $indexPg => $page)
<div class="panel panel-primary">
<div class="panel-heading target-page" data-page="{{ route($page['route']) }}?trackingView=true" role="tab" id="heading-page-{{ Str::slug($page['route']) }}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion_meta" href="#meta-collapse-page-{{ Str::slug($page['route']) }}"
aria-expanded="false" aria-controls="meta-collapse-page-{{ Str::slug($page['route']) }}">
{{ $page['name'] }}
</a>
</h4>
</div>
<div id="meta-collapse-page-{{ Str::slug($page['route']) }}" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="heading-page-{{ Str::slug($page['route']) }}">
<div class="panel-body">
<input type="hidden" name="meta_page[{{ $indexPg }}]" value="{{ $page['route'] }}">
<ul class="list-group">
@foreach ($page['elements'] as $indexEl => $element)
<input type="hidden" name="meta_element[{{ $indexPg }}][{{ $indexEl }}]" value="{{ $element['element'] }}">
<li class="list-group-item target-element" data-page="{{ route($page['route']) }}?trackingView=true" data-element="{{ $element['element'] }}">
<p>{{ $element['name'] }}</p>
@php
$cek = $metaEvents->where('target_page', $page['route'])->where('target_element', $element['element'])->where('source', 'meta')->first();
@endphp
{{-- <div class="form-group">
<label for="pixel_id{{ $indexPg }}_{{ $indexEl }}" class="form-label">Pixel ID</label>
<div class="form-line">
<input type="text" id="pixel_id_{{ $indexPg }}_{{ $indexEl }}" name="meta_pixel_id[{{ $indexPg }}][{{ $indexEl }}]"
class="form-control" placeholder="Pixel ID"
value="{{ @$cek->pixel_id ?? '' }}">
</div>
</div> --}}
<div class="form-group">
<label for="pixel_event{{ $indexPg }}_{{ $indexEl }}" class="form-label">Event</label>
<div class="form-line">
<select name="meta_pixel_event[{{ $indexPg }}][{{ $indexEl }}]" nonce="pixel_event[{{ $indexPg }}][{{ $indexEl }}]"
class="form-control show-tick" id="autotext">
<option value="">Tidak Ada</option>
@foreach ($events as $event)
<option value="{{ $event }}" @if(($cek && $cek->pixel_event == $event) || (!$cek && $element['default'] == $event))
selected @endif>{{$event}}</option>
@endforeach
</select>
</div>
</div>
</li>
@endforeach
</ul>
</div>
</div>
</div>
@endforeach
</div>
<button type="submit" class="btn btn-success">Simpan</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header" style="padding-bottom: 0px;">
TikTok Pixel
<div class="form-group">
<label for="main_tiktok_pixel_id" class="form-label">Pixel ID</label>
<div class="form-line">
<input type="text" id="main_tiktok_pixel_id" name="main_tiktok_pixel_id"
class="form-control" placeholder="Tiktok Pixel ID" value="{{ old('main_tiktok_pixel_id',@$metaEvents->where('source','tiktok')->first()->pixel_id) }}">
</div>
</div>
</div>
<div class="body ">
<div class="panel-group" id="accordion_tiktok" role="tablist" aria-multiselectable="true">
@foreach ($pages as $indexPg => $page)
<div class="panel panel-primary">
<div class="panel-heading target-page" data-page="{{ route($page['route']) }}?trackingView=true" role="tab" id="heading-page-{{ Str::slug($page['route']) }}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion_tiktok" href="#tiktok-collapse-page-{{ Str::slug($page['route']) }}"
aria-expanded="false" aria-controls="tiktok-collapse-page-{{ Str::slug($page['route']) }}">
{{ $page['name'] }}
</a>
</h4>
</div>
<div id="tiktok-collapse-page-{{ Str::slug($page['route']) }}" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="heading-page-{{ Str::slug($page['route']) }}">
<div class="panel-body">
<input type="hidden" name="tiktok_page[{{ $indexPg }}]" value="{{ $page['route'] }}">
<ul class="list-group">
@foreach ($page['elements'] as $indexEl => $element)
<input type="hidden" name="tiktok_element[{{ $indexPg }}][{{ $indexEl }}]" value="{{ $element['element'] }}">
<li class="list-group-item target-element" data-page="{{ route($page['route']) }}?trackingView=true" data-element="{{ $element['element'] }}">
<p>{{ $element['name'] }}</p>
@php
$cek = $metaEvents->where('target_page', $page['route'])->where('target_element', $element['element'])->where('source', 'tiktok')->first();
@endphp
{{-- <div class="form-group">
<label for="pixel_id{{ $indexPg }}_{{ $indexEl }}" class="form-label">Pixel ID</label>
<div class="form-line">
<input type="text" id="pixel_id_{{ $indexPg }}_{{ $indexEl }}" name="tiktok_pixel_id[{{ $indexPg }}][{{ $indexEl }}]"
class="form-control" placeholder="Pixel ID"
value="{{ @$cek->pixel_id ?? '' }}">
</div>
</div> --}}
<div class="form-group">
<label for="pixel_event{{ $indexPg }}_{{ $indexEl }}" class="form-label">Event</label>
<div class="form-line">
<select name="tiktok_pixel_event[{{ $indexPg }}][{{ $indexEl }}]" nonce="pixel_event[{{ $indexPg }}][{{ $indexEl }}]"
class="form-control show-tick" id="autotext">
<option value="">Tidak Ada</option>
@foreach ($events as $event)
<option value="{{ $event }}" @if(($cek && $cek->pixel_event == $event) || (!$cek && $element['default'] == $event))
selected @endif>{{$event}}</option>
@endforeach
</select>
</div>
</div>
</li>
@endforeach
</ul>
</div>
</div>
</div>
@endforeach
</div>
<button type="submit" class="btn btn-success">Simpan</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header" style="padding-bottom: 0px;">
Google Tag Manager
<div class="form-group">
<label for="main_gtm_pixel_id" class="form-label">GTM ID</label>
<div class="form-line">
<input type="text" id="main_gtm_pixel_id" name="main_gtm_pixel_id"
class="form-control" placeholder="GTM ID" value="{{ old('main_gtm_pixel_id',@$metaEvents->where('source','gtm')->first()->pixel_id) }}">
</div>
</div>
</div>
<div class="body ">
<div class="panel-group" id="accordion_gtm" role="tablist" aria-multiselectable="true">
@foreach ($pages as $indexPg => $page)
<div class="panel panel-primary">
<div class="panel-heading target-page" data-page="{{ route($page['route']) }}?trackingView=true" role="tab" id="heading-page-{{ Str::slug($page['route']) }}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion_gtm" href="#gtm-collapse-page-{{ Str::slug($page['route']) }}"
aria-expanded="false" aria-controls="gtm-collapse-page-{{ Str::slug($page['route']) }}">
{{ $page['name'] }}
</a>
</h4>
</div>
<div id="gtm-collapse-page-{{ Str::slug($page['route']) }}" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="heading-page-{{ Str::slug($page['route']) }}">
<div class="panel-body">
<input type="hidden" name="gtm_page[{{ $indexPg }}]" value="{{ $page['route'] }}">
<ul class="list-group">
@foreach ($page['elements'] as $indexEl => $element)
<input type="hidden" name="gtm_element[{{ $indexPg }}][{{ $indexEl }}]" value="{{ $element['element'] }}">
<li class="list-group-item target-element" data-page="{{ route($page['route']) }}?trackingView=true" data-element="{{ $element['element'] }}">
<p>{{ $element['name'] }}</p>
@php
$cek = $metaEvents->where('target_page', $page['route'])->where('target_element', $element['element'])->where('source', 'gtm')->first();
@endphp
<div class="form-group">
<label for="pixel_event{{ $indexPg }}_{{ $indexEl }}" class="form-label">Event</label>
<div class="form-line">
<select name="gtm_pixel_event[{{ $indexPg }}][{{ $indexEl }}]" nonce="pixel_event[{{ $indexPg }}][{{ $indexEl }}]"
class="form-control show-tick" id="autotext">
<option value="">Tidak Ada</option>
@foreach ($events as $event)
<option value="{{ $event }}" @if(($cek && $cek->pixel_event == $event) || (!$cek && $element['default'] == $event))
selected @endif>{{$event}}</option>
@endforeach
</select>
</div>
</div>
</li>
@endforeach
</ul>
</div>
</div>
</div>
@endforeach
</div>
<button type="submit" class="btn btn-success">Simpan</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card preview-wrap">
<iframe id="preview" src="{{ route('home') }}?trackingView=true" ></iframe>
</div>
</div>
</div>
@push('scripts')
<script>
$(document).ready(function () {
var iframe = $("#preview");
$(document).on('click', '.target-page', function () {
const page = $(this).data('page');
if(iframe.attr('src') != page){
iframe.attr('src', page);
}
})
$(document).on('click', '.target-element', function () {
const page = $(this).data('page');
const element = $(this).data('element');
if(iframe.attr('src') == page){
var iframeContents = iframe.contents();
iframeContents.find('body *').removeClass('red-border');
var cekBtnGroup = iframeContents.find("table .btn-group.btn-block.open");
if((!cekBtnGroup || cekBtnGroup.length <= 0) && iframeContents.find("table .dropdown-toggle").length > 0){
iframeContents.find("table .dropdown-toggle").get(0).click();
}
var targetElement = iframeContents.find(element);
if (targetElement.length) {
targetElement.addClass('red-border');
setTimeout(() => {
targetElement.get(0).scrollIntoView({ behavior: 'smooth', block: 'center', })
}, 500);
}
} else {
iframe.attr('src', page);
console.log(iframe.src);
iframe.onload = function(){
var iframeContents = iframe.contents();
iframeContents.find('body *').removeClass('red-border');
var cekBtnGroup = iframeContents.find("table .btn-group.btn-block.open");
if((!cekBtnGroup || cekBtnGroup.length <= 0) && iframeContents.find("table .dropdown-toggle").length > 0){
iframeContents.find("table .dropdown-toggle").get(0).click();
}
var targetElement = iframeContents.find(element);
if (targetElement.length) {
// iframeContents.find("html, body").animate({
// scrollTop: targetElement.offset().top
// }, 500); // 500ms animation speed
targetElement.addClass('red-border');
setTimeout(() => {
targetElement.get(0).scrollIntoView({ behavior: 'smooth', block: 'center', })
}, 500);
}
}
}
})
});
</script>
@endpush
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell