I am currently trying to install the facebook pixel and let it trigger events via an if-request. I include my head.php in every page and what I basically want to do is: set up a variable on the page, that I want to keep track of, and ask via if-request for these variable in the facebook pixel code so that the corresponding event can be triggered.
Problem is, my events aren't displayed when I look them up on my facebook ad page. Neither can I select the events under "Define Columns" nor can I see them when I click on "Ad Manager" -> Pixel.
Would be very glad if someone had similar problems and solved it or just knows what to do. Thanks in advance!
Here is how my $pixel variable is given before head.php is included (in PHP):
if (($_POST['vorname']!="" AND
$_POST['nachname']!="" AND
$_POST['email']!="" AND
$_POST['telefon']!="" AND
$_POST['agb']!=""))
{
$pixel = "teachersent";
}
else{
$pixel = "teacherrequest";
}
include ("../head.php");
Same for the other variables on the other page.
Here is my facebook pixel code with the if requests:
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue= [];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1425975630785657'); // Insert your pixel ID here.
fbq('track', 'PageView');
var pixeldata = <?php echo json_encode($pixel, JSON_HEX_TAG); ?>;
if (pixeldata == "teacherrequest") {
fbq('track', 'teacherrequest', {
value: 20,
});
}
else if (pixeldata == "teachersent") {
fbq('track', 'teachersent', {
value: 1,
});
}
else if (pixeldata == "teamrequest") {
fbq('track', 'teamrequest', {
value: 40,
});
}
else if (pixeldata == "teamsent") {
fbq('track', 'teamsent', {
value: 2,
});
}
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1425975630785657&ev=PageView&noscript=1"
/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
EDIT: Thanks to #Cbroe: Installed Pixel helper and spotted that the pixel is found but none of the events are triggered. In the console I could see that the variable of pixeldata is null, meaning that the php variable $pixel is not correctly passed on. So somehow it gets lost on the way from the part of the page before including head.php to head.php where it should be used.
I wrote the <script> var pixeldata = <?php echo json_encode($pixel, JSON_HEX_TAG); ?>;
</script> outside of the facebook pixel code and somehow it works now.
Related
I have the new invisible recaptcha working fine, but it puts the badge in bottom left or right corner. You can override this with "data-badge='inline'" and that pulls it into the form. Google is extremely vague on how to actually move it. You cannot hide it as google will not validate your form anymore. Soo...
THE ISSUE is I cannot seem to move it anywhere else on the page. I want to move it to the bottom of the page inside a div I created. Has anyone successfully done this? I tried appendTo but that does not work.
$('.grecaptcha-badge').appendTo("#g-badge-newlocation");
Any help would be great!!!
Thank you.
If you want to comply with Google Terms, then you can use a timer to detect the badge and then move it down at the bottom. You have to set the badge property to inline. jQuery appendTo worked for me:
Recaptcha code
var onSubmit = function(token) {
console.log('success!');
};
var onloadCallback = function() {
grecaptcha.render('submit', {
'sitekey' : '<your_site_key>',
'callback' : onSubmit,
'badge': 'inline'
});
};
The code to setup a timer to check and move grecaptcha-badge element
jQuery(function($) {
var checkTimer = setInterval(function() {
if($('.grecaptcha-badge').length > 0) {
$('.grecaptcha-badge').appendTo("#g-badge-newlocation");
clearInterval(checkTimer);
}
}, 50);
});
Please check my live example here (http://zikro.gr/dbg/google/recaptcha/). You can see that the badge goes at the bottom inside #g-badge-newlocation element and that it works because when you hit submit, recaptcha triggers the callback function which logs the word "success~".
I'm running into an issue where if a focus even is fired of by javascript on the current window's page it steals focus from my addons input. Is there a way to force an input in a panel to stay focused.
$(inputSelector).focusout(function(){
$(inputSelector).focus();
});
$(inputSelector).blur(function(){
$(inputSelector).focus();
});
I have tried the above which seems to work on my test page but not in my panel :(.
According to the docs -> https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel
Setting focus to false should
Set to false to prevent taking the focus away when the panel is shown.
Only turn this off if necessary, to prevent accessibility issue.
Optional, default to true.
I have set my panel up as such.
var text_entry = require("sdk/panel").Panel({
width: text_entry_width,
height: text_entry_h,
focus: false, // doesnt seem to work....
contentURL: data.url("entry.html"),
contentScriptFile: [
data.url("jquery-2.1.1.min.js"),
data.url("text.js")
],
contentStyleFile: [
data.url("styles.css")
]
});
It doesn't append that setting it to false works :(.
Any help, guidance or comments would be awesome :) Cheers.
_____________ UPDATE ____________________________________________
There seemed to be some confusion of my bad explaining :( so i have uploaded a video to youtube that will hopefully explain the issue a bit better.
https://www.youtube.com/watch?v=5fhJzpa515Y&feature=youtu.be
Also below find some more code.
Panel Html
<html>
<head></head>
<body>
<div id="resultTableTop" class="resultTable"></div>
<input type="text" id="edit-box"></input>
<div id="resultTableBottom" class="resultTable"></div>
</body>
</html>
Hot Key Code
var showHotKey = Hotkey({
combo: "accel-t",
onPress: function() {
text_entry.show();
}
});
Panel js show listenter
self.port.on("show", function onShow() {
$('input').focus();
console.log('hi');
});
Hopefully this is a bit clearer now :) thanks for the help so far :).
This code focuses panel's input field when it opens:
main.js file:
//main.js file
var text_entry = require("sdk/panel").Panel({
focus: true, //THIS SHOULD BE TRUE
contentURL: data.url("panel.html"),
contentScriptFile: [
data.url("js/libs/jquery-1.11.1.js"),
data.url("get-text.js")
]
});
text_entry.on("show", function() {
text_entry.port.emit("show");
});
get-text.js file which is injected into panel:
//data/get-text.js file
self.port.on("show", function onShow() {
$('input').focus();
});
Here is a hacky, untested, solution:
var { viewFor } = require("sdk/view/core");
var { Panel } = require("sdk/panel");
var panel = Panel({
..
onShow: function() {
var view = viewFor(panel);
view.setAttribute("noautohide", "true");
}
})
For more information of the panel noautohide attribute click here.
How are you guys? I'm new to the framework Knockoutjs, I wonder if I'm doing it right. (Need a little help.) :)
I have a tag and would contain the same data-bind = text: anything and click: any function. The question is: Is it possible to do this? This is the correct way? Follow what I'm talking about: (I am using an example from the website itself) where when the user clicks the "Click Me" he adds +1 on the counter. I want that when the user clicks the tag call the same function. :)
HTML:
<div>You've clicked <span data-bind='text: numberOfClicks, click: registerClick'> </span> times</div>
JS:
var ClickCounterViewModel = function() {
this.numberOfClicks = ko.observable(0);
this.registerClick = function() {
this.numberOfClicks(this.numberOfClicks() + 1);
};
this.resetClicks = function() {
this.numberOfClicks(0);
};
this.hasClickedTooManyTimes = ko.computed(function() {
return this.numberOfClicks() >= 3;
}, this);
};
ko.applyBindings(new ClickCounterViewModel());
Follows the file jsFiddle: Here
Many thanks in advance.
Yes it is possible to have several binding pairs in one data-bind attribute.
You just have separated them with a comma ,
You asked : I want that when the user clicks the tag call the same function.
But you already code it.
You can click on the counter or on the button it increments the counter.
I am developing a website and I want to load the data dynamically on scrolling the page,When the scroll bar reaches the bottom of the page I want to load more data from the database using AJAX.
In my web page there is a iframe in which i want to append the new data.Like flipkart.com website. Where on scrolling the page new products are loaded.
Could anyone help me in this regard?
Thanks in advance.
I have tried many times but no luck what i'm getting is only once the GetActivity() is being called,that too when i scroll down its not calling GetActivity(),but when i scroll up from that point it calls javascript function GetActivity()And on repeating this it is not working
here is the code which i used as given by Greg :please look into this and help.
<html>
<head>
<script type="text/javascript" src="jQuery-1.4.1-min.js"></script>
<script type="text/javascript">
$(window).scroll(function() {
var bottom = getBottom(window),
$reset = $("#activity_reset");
if (bottom == $(this).scrollTop() && $reset.val() == 0) {
$reset.val(1);
$("#activity_loading").show();
if ($("#activity_full").val() == 0) {
setTimeout("GetActivity();", 100);
}
}
});
function getBottom(e) {
height = $(document).height();
windowheight = $(e).height();
return height - windowheight;
}
function GetActivity()
{
alert("got it!");
$('div.tt').html('1');
$('div.ttt').html('1');
}
function setting()
{
$('div.tt').html('0');
$('div.ttt').html('0');
}
</script>
</head>
<body onload="return setting()" >
<pre>
<!--here i have used some junk texts so that a scroll bar appears in the browser-->
</pre>
<div style="display:none" id="activity_full" class="ttt"></div>
<div style="display:none" id="activity_reset" class="tt"></div>
</body>
</html>
This will monitor the page and load the function GetActivity() when you scroll down to the bottom of the page; you can put your ajax call in there and edit this accordingly to display the data you wish to have appear on the page.
$(window).scroll(function() {
var bottom = getBottom(window),
$reset = $("#activity_reset");
if (bottom == $(this).scrollTop() && $reset.val() == 0) {
$reset.val(1);
$("#activity_loading").show();
if ($("#activity_full").val() == 0) {
setTimeout("GetActivity();", 1000);
}
}
});
function getBottom(e) {
height = $(document).height();
windowheight = $(e).height();
return height - windowheight;
}
function GetActivity() {
/* ajax call in here */
}
When the window is scrolled the .scroll(function()) is triggered; the getBottom(window) function then calculates the document height and the screen height and subtracts them to see if the user's window has reached the bottom of the screen. $("#activity_reset") is then stored to an identifier for later use.
Once the action is fired your reset value is set to one so that the ajax isn't fired more than once at a time. The loading bar is displayed and a timeout is then set for the GetActivity() function.
$("#activity_reset") -> Should be a hidden div on the page that holds a value of either 1 or 0; it should be initialized as 0 and when the users browser hits the bottom of the page your ajax call is fired and once it is done being loaded you should then set the value back to 0 to allow loading again.
$("#activity_show") -> Should be a hidden div on the page that contains a loading image, or simply text saying that something is loading (not necessary but certainly helps for user experience).
$("#activity_full") -> Is another hidden div that is used to identify when your div is full and should not load anymore content. It should be initialized to 0 and when you have loaded as many items as can fit on the page you can set it to 1 (likely in your GetActivity() function) to prevent any further loading.
Further Explaining:
Inside of your GetActivity() function change the following:
$('div.tt').html('1');
//returns <div class="tt">1</div>
to
$('div.tt').val(1);
//returns <div class="tt" value="1"></div>
Your code is setting the html of the div to be 1, when what you actually want is for the value attribute to be equal to 1 since that is what the script is checking for in the comparison. I also noticed that you are also setting $('div.ttt') to be 1 as well, but this will stop the script from loading any further. This one should only be set to one once a condition has been met and you would no longer like any items to load.
$num = 6; //number of items per page
if($num == 6)
$('div.ttt').val(1);
Hope that clears things up; let me know.
Recently I successfully integrate vertical iScroll to my mobile web. It has pull to refresh feature. However, Im currently stack at the part which I need to implement the same feature into a horizontal iScroll. Does anyone knows where can I see any sample that uses the same feature? I really need the help. All I need is to know how to do it because as of now, i have no idea with it.
Regards,
Askhole :)
iScroll by default does not support Pull to Refresh from a horizontal standpoint. I'm sure it could be done with some CSS and code tweaks, but you might be better off asking in the iScroll forums: https://groups.google.com/forum/#!forum/iscroll
i guess you implement vertical refresh by using a non-official iscroll.js (i.e., a modified-for-refresh iscroll). If this is your situation, this answer may helps:
i implemented vertical refresh with the official iscroll.js, by adding a little trick:
1. keep sth very very tiny at the next-bottom, use its position().top to detect the actual height of ur page
keep you "onloading" ath the bottom, set it invisible
Math.abs(myScroll.y) + wrapper.height === $(yourTiny).position().top
when scroll starts, if scroll upwards, check the condition in 3.
for tolerance in 4, you may use, for example: if(Math.abs(myScroll.y - wrapper.height + $(yourTiny).position().top) < 11){ //your code to refresh}
Here are the sample codes:
1.html
<sapn id="theTinyThing"> </span>
<table id="bottomRefreshImg" style="display:none">
<tr><td><img src="refreshGreen.gif" /></td></tr>
<tr><td>loading...</td></tr>
</table>
</div> //close scroller
</div> //close wrapper
<div id="footer"></div>
<script src="./jquery-2.2.3.min.js"></script>
<script src="./iscroll.js"></script>
<script src="./mrPage.js"></script>
</body>
2.css
#theTinyThing{
height:1px; //it's ivisible
font-size:1px;
}
3.js
var myScroll;
var myScroolHasCausedAddNew=0;
function loaded () {
myScroll = new IScroll('#wrapper', {
scrollbars: true,
scrollbars: 'custom',
mouseWheel: true,
click:true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true,
snap:true,
snap:'table',
});
myScroll.on('scrollStart',function(){
if($("#theTinyThing").position().top + myScroll.y-myScroll.wrapperHeight<11){
if(myScroll.directionY==1){
$("#bottomRefreshImg").show();
myScroolHasCausedAddNew=1;
}
}
return false;
});
myScroll.on('scrollEnd',function(){
if(myScroolHasCausedAddNew==1){
myScroolHasCausedAddNew=0;
$("#bottomRefreshImg").hide();
loadMore();
}
return false;
});
}