I created new page for testing of ecommerce tracking. It shows page view but not show any transaction and Item added on dashboard.
Here is my script which is added in <body> tag of page.
attribute to load the script asynchronously. -->
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'trackingcode', 'auto');
ga('require', 'ecommerce');
ga('ecommerce:addTransaction', {
'id': '1234',
'affiliation': 'Acme Clothing',
'revenue': '11.99',
'shipping': '5',
'tax': '1.29',
});
ga('ecommerce:send');
</script>
<script>
ga('require', 'ecommerce')
ga('ecommerce:addItem', {
'id': '1234',
'name': 'Fluffy Pink Bunnies',
'sku': 'DD23444',
'category': 'Party Toys',
'price': '11.99',
'quantity': '1',
});
ga('ecommerce:send');
ga('send', 'pageview');
</script>
And in <head> tag I added below code:
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-116940006-1');
</script>
you must add a #yield with google-ecommerce name in your header:
#yield('google-ecommerce')
then in your Thank you page (last page after the transaction) add this code :
#extends('front.layouts.master')
#section('google-ecommerce')
<script>
gtag('event', 'purchase', {
"affiliation": "Google online store",
"value": 23.07,
"currency": "USD",
"tax": 1.24,
"transaction_id": '{{ $pay->invoice_num }}',
"shipping" : '{{ $pay->price }}',
"items" : [
{
"id" : '{{ $pay->id }}',
"name" : '{{ $pay->title }}',
"category": '{{ $pay->category }}',
"quantity": 1,
"price" : '{{ $pay->price }}'
}
]
});
</script>
#endsection
#section('content')
//-------
//-------
#endsection
see this link :
Enhanced ecommerce with gtag.js
Related
I want to create a carousel that contain my instagram photo on my website. It's already working with simple grid style. This is the section where I put the feed:
<div id="instagram-feed-demo" class="instagram_feed"></div>
and this is the script:
<script type="text/javascript">
(function($) {
$(window).on('load', function() {
$.instagramFeed({
'username': 'iipex_id',
'container': "#instagram-feed-demo",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'get_raw_json': false,
'callback': null,
'styling': true,
'items': 9,
'items_per_row': 3,
'margin': 1
});
});
})(jQuery);
</script>
since I want to display it as carousel, I try to put the ID and Class into carousel :
<div id="instagram-feed-demo" class="carousel instagram_feed" data-items="3" data-dots="false" data-loop="true" data-autoplay="true" data-lightbox="gallery"></div>
but it's not working. maybe I have to create another script? or I made a mistake on my carousel ?
I load up my app.js bundle in my layout.blade.php and I am also running this in my layout.blade.php under the section:
window.fbAsyncInit = function() {
FB.init({
appId : '{{ fb_app_id() }}',
xfbml : true,
version : '{{ fb_api_version() }}'
});
};
but it seems my Vue components don't have access to it so I have to run it when the component mounts as well. Do
you need to call your script before app.js file like this
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{{ fb_app_id() }}',
xfbml : true,
version : '{{ fb_api_version() }}'
});
};
</script>
<script src="your path to app.js file"></script>
I have a DataTable that has server-side processing using Ajax. I am trying to add export buttons to it, but I haven't been successful. I am extending a Laravel view that has all the files in it already, but I am unable to get the buttons to show.
Master page with necessary files:
<!-- Datatable -->
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"> </script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"> </script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
Page with DataTable:
<script type="text/javascript">
$(document).ready(function(){
$('#payments-table').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
processing: true,
serverSide: true,
ajax: '{{ route('get.payments') }}',
order:[ [5,'desc'] ],
columns: [
{ data: 'id', name: 'id' },
{ data: 'sub_id', name: 'sub_id' },
{ data: 'company_name', name: 'company_name'},
{ data: 'amount', name: 'amount'},
{ data: 'status', name: 'status'},
{ data: 'job_date', name: 'job_date'},
{ data: 'amount_payed', name: 'amount_payed'},
{ data: 'date_payed', name: 'date_payed'},
{ data: 'trn_ss', name: 'trn_ss'},
{ data: 'account_number', name: 'account_number'},
{ data: 'bank_name', name: 'bank_name'},
{ data: 'bank_branch', name: 'bank_branch'},
]
});
});
The DataTable displays correctly, but the buttons don't display, and I don't know what it could be.
Have you tried to manually put the buttons in?
var table = $('#payments-table').DataTable({...
$('#div_to_place_buttons_in').html(table.buttons().container());
From my experience with DataTables you won't need the dom: 'Bfrtip' if you manually move the buttons container to a different place.
For your comment just change your DataTables instantiation to be held in a variable called table and remove the dom part, and then you will have access to the instance of DataTables in the table variable. See below:
var table = $('#payments-table').DataTable({
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
processing: true,
serverSide: true,
ajax: '{{ route('get.payments') }}',
order:[ [5,'desc'] ],
columns: [
{ data: 'id', name: 'id' },
{ data: 'sub_id', name: 'sub_id' },
{ data: 'company_name', name: 'company_name'},
{ data: 'amount', name: 'amount'},
{ data: 'status', name: 'status'},
{ data: 'job_date', name: 'job_date'},
{ data: 'amount_payed', name: 'amount_payed'},
{ data: 'date_payed', name: 'date_payed'},
{ data: 'trn_ss', name: 'trn_ss'},
{ data: 'account_number', name: 'account_number'},
{ data: 'bank_name', name: 'bank_name'},
{ data: 'bank_branch', name: 'bank_branch'},
]
});
$('#div_to_place_buttons_in').html(table.buttons().container());
I'm not sure what your HTML looks like, but you just need a div/similar container to place the buttons in and reference it instead of div_to_place_buttons_in.
Have tried with and without a checkbox(checkbox will be shown but not selectable), also using editor. Project is local dev in laravel. Code snippets is best i got. I am at about 5 hours searching the web. Everything else is working except select, and the edit and remove buttons because i can't select. No console errors. Inline editing works great.
I tried both dataTables.select.js and dataTables.select.min.js. Tried many different versions of select.
JS and CSS
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.0/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="{{asset('plugins/editor/js/dataTables.editor.js')}}"></script>
<script src="{{asset('plugins/editor/js/editor.bootstrap4.min.js')}}"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.0/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.4/css/select.bootstrap4.min.css">
<link rel="stylesheet" href="/plugins/editor/css/dataTables.editor.css">
<link rel="stylesheet" href="/plugins/editor/css/editor.bootstrap4.min.css">
Table
<table class="table" id="example">
<thead>
<tr>
<th></th> <!--Checkbox Column --!>
<th></th> <!-- Avatar Column --!>
<th>Name</th>
<th>Priority</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
</table>
JS
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{csrf_token()}}'
}
});
var editor = new $.fn.dataTable.Editor({
ajax: "manage",
table: "#example",
idSrc: 'id',
fields: [
{label:"Title", name: "title", type:"textarea"},
{label:"Priority", name: "priority_id", type: "select",
options: [
#foreach ($priorities as $priority)
{ label: "{{$priority['name'] }}", value: "{{$priority['id']}}" },
#endforeach
]
},
{label:"user_id", name: "user_id", type: "select", def: "Unassigned",
options: [
#foreach ($users as $user)
{ label: "{{$user['first_name'] }} {{$user['last_name']}}", value: "{{$user['id']}}" },
#endforeach
]
},
{label:"Body", name: "body", type:"textarea"}
]
});
$('#example').on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this, {
buttons: {label: '>', fn:function(){ this.submit()}},
onBlur: 'submit',
submit: 'allIfChanged'
});
});
$(function() {
var table = $('#example').DataTable({
ajax: '/manage/data',
dom: 'Bfrtip',
order: [3, 'asc'],
processing: true,
serverSide: true,
deferRender: true,
select:[
{style: 'multi'},
{selector: 'td:first-child'}
],
columns: [
{
data : null,
defaultContent : '',
className : 'select-checkbox',
title : '',
orderable : false,
searchable : false
},
{data: 'user_avatar', name:"user_avatar", render: function(data,type,row){ // column
if (row.user == null) {
var avatar = "<img style='width:75px' src='/storage/users/default.png'>";
} else {
var avatar = "<img style='width:75px' src='/storage/"+ row.user.avatar +"'>";
}
return avatar;
}},
{ data: null, name: 'user.name', editField: "user_id", defaultContent: '', render: function(data,type,row){ //column
if(row.user === null){
var name = 'Unassigned';
} else {
var name = row.user.first_name +" "+ row.user.last_name;
}
return name;
} },
{
data: 'priority.name',
name: 'priority.name',
editField:"priority_id"
},
{
data: 'title',
name: 'title'
},
{
data: 'body',
name: 'body'
}
],
buttons: [
{extend: 'create', editor: editor},
{extend: 'edit', editor: editor},
{extend: 'remove', editor: editor},
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
}
]
});
});
})
I have also tried using
$('#example tbody').on( 'click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
If i go through this code step by step in firebug it works, but it wont work on button press. Using a button outside form to call it works ok.....It seems that complete: line does not get executed at all.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#salji').click(function() {
var testing = false;
$.ajax({
type: "POST",
url: "https://mandrillapp.com/api/1.0/messages/send.json",
data: {
'key': 'Vv_8cJDX9*****',
'message': {
'from_email': 's****#gmail.com',
'to': [
{
'email': 'd*****#gmail.com',
'name': 'Test',
'type': 'to'
}
],
'autotext': 'true',
'subject': 'New subject',
'html': 'YOUR EMAIL CONTENT HERE! YOU CAN USE HTML!'
}
},
complete: function() {
testing = true;
$('#forma').attr('action', 'http://%SERVERIP%/signup1?%PARAMS%');
$('#forma').submit();
}
}
)
})
})
</script>
<div class="form1" align="center"><input class="button" value="#CONTINUE#" name="signup" type="submit" id="salji">
You don't have a form on the page, therefore .submit won't do anything.
Change your DIV to a form and give it the correct ID, "form1" is a class atm.