Is there a way to track instant articles to Google Analytics from Facebook application?
Just to be clear, I added a code according to the official guidelines:
<figure class="op-tracker"> <iframe> <!-- <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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-173809-XX', 'auto');
ga('require', 'displayfeatures');
ga('set', 'campaignSource', 'Facebook');
ga('set', 'campaignMedium', 'Social Instant Article');
ga('send', 'pageview', {title: 'POST TITLE'});
</script> --> </iframe> </figure>
Nothing happened?
Thanks for any advise
You have the <script> tag commented out. Removing the html comments (<!-- -->) should work:
<figure class="op-tracker"> <iframe> <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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-173809-XX', 'auto');
ga('require', 'displayfeatures');
ga('set', 'campaignSource', 'Facebook');
ga('set', 'campaignMedium', 'Social Instant Article');
ga('send', 'pageview', {title: 'POST TITLE'});
Related
i am creating a laravel project with chart. i went though the documentation but this is site when i did https://charts.erik.cat/. but i ran into the error with when i load the into the dashboard Undefined variable $chart
what i tried so far i attached below please check.please give me the solution for correct this
SummaryChat.php
<?php
namespace App\Charts;
use ConsoleTVs\Charts\Classes\Chartjs\Chart;
class SummaryChart extends Chart
{
public function __construct()
{
parent::__construct();
}
}
ChartController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Charts\SummaryChart;
class ChartController extends Controller
{
public function chartLine()
{
$chart = new SummaryChart;
$chart->labels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])->load($api);
return view('admin.dashboard', compact('chart'));
}
}
app.blade.php
this page under the app.js i yield the chart js look like this.because i need to load js only one page which is dashboard only.
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
#yield('js')
Dashboard.blade.php
<div class="row">
<div class="col-md-9">
<div id="app" style="height: 400px;">
{!! $chart->container() !!}
</div>
</div>
</div>
this under the #endsection i attached the js files based on the chat loading.
#endsection
#section('js')
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
});
</script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.2/echarts-en.min.js charset=utf-8></script>
#endsection
As far as I am understanding from your code, you are initializing
new SampleChart
But you have not imported it yet. Make sure you are importing that by
use App\Charts\SampleChart;
Here is the official link to the laravel chart that I have found:
https://charts.erik.cat/create_charts.html#initiate-a-chart?
And also in the JS section you can not use $ sign in script. It is php variable sign which you are trying to use in the javascript.
Google Analytics does not track ajax calls in a JSF web application. so I'm using autotrack here is the code:
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-********2-1', 'auto');
ga('require', 'cleanUrlTracker');
ga('require', 'eventTracker');
ga('require', 'impressionTracker');
ga('require', 'maxScrollTracker');
ga('require', 'mediaQueryTracker');
ga('require', 'outboundFormTracker');
ga('require', 'outboundLinkTracker');
ga('require', 'pageVisibilityTracker');
ga('require', 'urlChangeTracker');
ga('send', 'pageview');
</script>
<h:outputScript library="custom" name="autotrack/autotrack.js" p:async="async"/>
<script async="async" src="https://www.google-analytics.com/analytics.js"></script>
So When I click:
<h:commandButton id="nextBtn" value="Next" action="#{testBean.nextQuestion}" >
<f:ajax execute="#form" render="pass-section title-section" onevent="go_top_and_apply_code_mirror" />
</h:commandButton>
and go_top_and_apply_code_mirrorcalls ga('send', 'pageview'). Except while I'm using the website clicking around, Google Analytics does not register me using the web page.
Chrome Console: shows this error
Failed to load resource: net::ERR_CONNECTION_CLOSED www.google-analytics.com/collect:1
So what Am I doing wrong?
Notes : I tired all questions and answers related this topic.
I use form tag then work completely fine. See Code Here .
I want to "place" a drop zone in my div tag, but somehow it doesn't work. See the code here.
Snippet Example Below.
Dropzone.autoDiscover = false;
$("#mydropzone").dropzone({
//url: "/file/post",
addRemoveLinks: true,
maxFilesize: 0.5,
dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>  <h4 class="display-inline"> (Or Click)</h4></span>',
dictResponseError: 'Error uploading file!'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/basic.css" rel="stylesheet"/>
<div class="clsbox-1" runat="server">
<div class="dropzone clsbox" id="mydropzone">
</div>
</div>
After a long research I have finally got the best solution.
HTML
<div class="clsbox-1" runat="server" >
div class="dropzone clsbox" id="mydropzone">
</div>
</div>
JavaScript
Dropzone.autoDiscover = false;
// Dropzone class:
var myDropzone = new Dropzone("div#mydropzone", { url: "/file/post"});
// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });
JSFiddle Demo Here
I want to replace the gif file by javascript. I find the method below. Is there any way i can place the javascript tag before the img tag?
<img class="myImg" src="compman.gif" width="107" height="98">
<script>
document.getElementsByClassName("myImg")[0].src = "hackanm.gif";
</script>
A page can't be manipulated safely until the document is "ready." Using jquery's $(document).ready(), it Will wait until the page is loaded and ready to be manipulated before executing (no matter where it is on the page). Example:
<script>
$(document).ready(function() {
document.getElementsByClassName("myImg")[0].src = "hackanm.gif";
});
</script>
<img class="myImg" src="compman.gif" width="107" height="98">
You could also then leverage selectors inside jquery (e.g. $(".class") where class is your class, or $("#id") where id is the id) and change the code to:
<script>
$(document).ready(function() {
$(".myImg").attr('src',"hackanm.gif");
});
</script>
<img class="myImg" src="compman.gif" width="107" height="98">
And further you could even store it in a variable if you wanted to change it later on in javascript as well!
<script>
$(document).ready(function() {
var myImg = $(".myImg");
var newImg = "hackanm.gif";
myImg.attr('src', newImg);
});
</script>
<img class="myImg" src="compman.gif" width="107" height="98">
Hope this helps you learn a few new tricks inside javascript! Happy coding!
More Info
I believe OP's main concern was flash of the old image before it is replaced by JavaScript. I suggest you add a line of CSS to make your image element visibly hidden then do the swap + unhide with JavaScript.
<style>
.myImg {visibility: hidden;}
</style>
<img class="myImg" src="compman.gif" width="107" height="98">
<script>
var imgReplace = document.getElementsByClassName("myImg")[0];
imgReplace.src = "hackanm.gif";
imgReplace.style.visibility = "visible";
</script>
<div class="album_pic">
<img src="/Images/logo.jpg" id="track_art" alt="cover image" /> </div>
let DIV = document.createElement('div');
DIV.classList.add('album_pic');
DIV.innerHTML = `<img src="${PlayList[songIndex].album_pic}" class="track_art" alt="cover image">`;
let Cover_image = document.querySelector('.album_pic');
Cover_image.replaceWith(DIV);
In place of "PlayList[songIndex].album_pic" , add your own path.
This is my research and I don't copied from anyone. Also this is all based on what I learned in javascript
I am trying to get my AJAX .load function to have back/reload/bookmark capability.
I am using the jquery plugin history.js.
My content is being loaded in my content div from another html file using anchor points within that to specify which div to select the information from (depending on link clicked).
Currently, i have managed to get the plugin to change the address but the back/reload functionality is not working.
This is the plugin code i am using: https://github.com/balupton/jquery-history/blob/master/scripts/jquery.history.js
Head:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="path.js"></script>
<script type="text/javascript" src="back.js"></script>
Navigation:
<div id="leftnav">
<p class="leftnavtext">
<a class="navlinks" id="about2" href="#/about">ABOUT</a> <br>
<a class="navlinks" id="process2" href="#/process">PROCESS</a> <br>
<a class="navlinks" id="materials2" href="#/materials">MATERIALS</a> <br>
<a class="navlinks" id="pricing2" href="#/pricing">PRICING</a>
</p>
AJAX Javascript code:
$(document).ready(function(){
$("#about2").click(function(){
$("#content").load("content.html #about");
});
$("#process2").click(function(){
$("#content").load("content.html #process");
});
$("#materials2").click(function(){
$("#content").load("content.html #materials");
});
$("#pricing2").click(function(){
$("#content").load("content.html #pricing");
});
$("#pricing3").click(function(){
$("#content").load("content.html #pricing");
});
$("#infinite1").click(function(){
$("#content").load("content.html #infinite");
});
});
back.js Code (path.js is the plugin.):
function nav_event(hash) {
// Some sort of navigation happened, update page
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/about');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/process');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/materials');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/pricing');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/infinite');
}
Can anyone see where im going wrong with this? Or can they suggest a better plugin to use?
Thanks
if (navigator.userAgent.match('MSIE')!=null) {return false;} /*prevent IE crash*/
window.addEventListener("popstate", function(e) {window.location = lastURL; });
window.history.pushState({"html": newURL,"pageTitle": newURL},"", newURL);
I stole this from another answer.
Unfortunately it does not work in IE.
further reading:
http://html5doctor.com/history-api/
http://diveintohtml5.info/history.html