I need to track every time a user clicks on a dynamic button. Also I need to know what product is he clicking. Now I have this button:
<div class="buy">
<a target="_blank" href="<?php echo $this->product['from']; ?>">
<img src="http://example.com/data/images/buy.jpg" alt="buy">
</a>
</div>
Href sends the user to another site to buy the product. How can i track this on PHP?
If the href is linking to another page that is not on your own server, you can go with an ajax-solution, like #coder1984 proposed, or you can create a proxy php script. That means:
the user clicks the link to the proxy, sending in the product URL
like: href="myproxy.php?url=<?php echo $this->product['from']; ?>"
the proxy gets the URL, checks it and updates a database, the session, a text file
afterwards it redirects the user to the actual URL
Client-side dynamic user actions can be determined using Javascript/Jquery. Here's how its done in Jquery,
$(document).ready(function() {
$('.buy').click(function(){
alert('This is clicked');
});
});
To track in PHP, you can pass the value(buttons clicked) to PHP using Jquery AJAX. Here's the manual.
Related
I have used a form to submit an image id to the another page. I have done this rather than r than via url because it makes the url cleaner. However, when the user now reloads, it asks if they want to submit the form again. The won't know they have submitted a form, as far as they are aware they have simply clicked an image and been brought to a page that displays that image bigger.
Is there any way around this, that saves the image id the hidden form field has sent via the form, yet refreshes the page for the user?
HTML
<a class="gallery-img span4 js-img-submit" href="#">
<img src="img.jpg"/>
<form action="/image" method="post">
<input type="hidden" value="<?=$img['id']; ?>" name="image_id"/>
</form>
</a>
JQUERY
$('.js-img-submit').click(function(){
$(this).find('form').submit();
})
PHP
$image_id = isset($_POST['image_id']) ? $_POST['image_id'] : false;
Somehow the parameter needs to be send to the image page.
GET: You dont want that.
POST: You use that, but causes the refresh problem.
SESSION: Will be hidden, but cause troubles, when he opens multiple images, and then refreshing the first page.
So, i would to the following:
Use the hashtag, and load the image via javascript then. finally remove the hashtag:
MainPage:
<a class="gallery-img span4 js-img-submit" href="/image#<?=$img['id']; ?>">
<img src="img.jpg"/>
</a>
ImagePage:
<script language="javascript">
$(document).ready(function(){
var imgid = document.location.hash.slice(1);
document.location.hash = ""; //Remove
loadImage(imgid);
})
</script>
loadImage then needs to be the required javascript function.
The user might notice it for a split second. IF the user is not allowed to see, then your only way would be to use the PHP Session with seperate variables for every opened image-window.
You can do something like this:
$('.js-img-submit').click(function()
{
$.post("image.php", {id: $(this).find('input').val()});
})
I need to track purchases on my site via a dynamic button that redirects to another sites.
The code:
<div class="buyproduct">
<a onclick="target='_blank'" href="<?php echo $this->product['from'];?>">
<img src="http://xxx.com/data/images/buy.jpg" alt="Buy!"/>
</a>
</div>
Everytime a user clicks on the button it redirects to another site outside mine.
For example if I click on a jeans and then in the buy button, it redirects to wrangler site.
I need to track everytime this happens and know exactly to what url the user is beeing redirected.
The site is in PHP and Javascript.
You could create an intermediate page on your server, maybe something like (out.php). You could then redirect all traffic to the out.php page, do the processing there, and then redirect.
<a target="_blank" href="/out.php?url=<?php echo urlencode($this->product['from'])?>">
<img src="http://xxx.com/data/images/buy.jpg" alt="Buy!"/>
</a>
out.php
<?php
$url = urldecode($_GET['url']);
/*
MySQL CODE TO PROCESS TRACKING
*/
header("Location: ".$url);
exit;?>
i have one page on that page having multiple images.On each image have their own share and like button.when i click on share button i want to share that perticular image but that is not happening please help me.
here is my code..
<script type="text/javascript">
var str;
function fbs_click(u,val)
{
var i;
var imgobj=document.getElementById(val).getElementsByTagName('img');
for(i=0;i<imgobj.length;i++){
str=imgobj[i].src;
//document.write("<br>");
}
alert(str);
//This is to show fb popup for sharing passed pageurl
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<!--This is for setting img for fb like -->
<script type="text/javascript">document.write('<link rel="image_src" type="image/jpeg" href="'+str+'">');</script>
$url="http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
<div class='sharebutton'>
<a href='#' onclick='return fbs_click(\"$url\",\"$src_value\");' class='fb_share_link'>Share on Facebook</a>
</div>
i have paste the code is short just understand you my problem
The problem is, you're only sending the page url. Facebook indexes its like counts based on the url.
Since Facebook has no idea which image on the page the user is intending to share, it grabs your default meta tags for the page and that's what shows up on the user's timeline. Since the urls for each photo are the same, sharing any one photo will result in the counter being incremented for all photos.
One way to make this work would be to create a separate page for each image on your site and pass that in your onclick function. That page has specific metadata for that image the Facebook parser can use. When a user follows that link, have a script on that page to redirect them back to your main page (preferably to an anchor at the right photo). You'll need to have some way to fail gracefully for people who don't have javascript enabled.
I have a page which shows some data from a database.
Each of these data rows has a link with an ID.
<a href="javascript:void(0);" onClick="changeUrl(\'?side=annoncer&sletid='.$row['annonce_id'].'\');">
This is the changeUrl function:
function changeUrl(url) {
window.history.replaceState(null, "Title", url);
}
The link points to the same page, with &sletid added.
When &sletid is set, the page should do a popup with the ID of the selected row.
if (isset($_GET['sletid'])) {
$sletid = $_GET['sletid'];
echo "<script language='JavaScript'>alert ('ID:".$sletid."');</script>";
}
The URL changes, and the popup script code is added to the source, but the popup doesn't show unless I manually update the page again. Why this behavior?
replaceState doesn't actually load the page, it just edits the history (and the location bar) in the browser. You need to load the page yourself using AJAX.
Your phpcode doesnt get executed because the change of the history state just affects the client side.
You need to listen to the change of the history on the client side.
I have 3 links on page index.php:
<div id="languages">
<a href="index.php?page=test&lang=en" id="flag">
<img src="./images/flags/en.png" class="flag_off" alt="en" title="en">
</a>
<a href="index.php?page=test&lang=sk" id="flag">
<img src="./images/flags/sk.png" class="flag_off" alt="sk" title="sk">
</a>
<a href="index.php?page=test&lang=cz" id="flag">
<img src="./images/flags/cz.png" class="flag_on" alt="cz" title="cz">
</a>
</div>
each of them is passing lang parameter and on same page (index.php). Then I have variable
$_GET['lang']
which will call function for changing language:
$obj->change_language($_GET['lang']);
Q: How can I do this by using jquery get() function without showing parameter in url of index.php page?
(Pass variable $lang through jquery)
I don't like URL with parameters after calling function for example:
index.php?page=test&lang=sk
I suppose using .click() function as handler.
EDIT:
I have something like this:
$(document).ready(function(){
$("#flag").click(function(){
$.get('index.php',
{ lang: "VARIABLE LANG FROM HREF" }
);
});
});
How to parse sk from href index.php?page=test&lang=sk part ?
If your problem is the parameter in the URL, you could try setting it with Ajax (http://api.jquery.com/jQuery.ajax/) and than reloading the page. I don't think you could get around refreshing since your content should be changed to the selected language as well?
$(".flag").click(function(event) {
event.preventDefault();
$.get(this.href, function(data) {
location.reload();
});
});
You don't need jQuery at all do to this. You can do something like
<div id="languages">
<a href="changeLanguage.php?lang=en">
<img src="/flags/en.png" alt="en" title="en">
</a>
<a href="changeLanguage.php?lang=sk">
<img src="/flags/sk.png" alt="sk" title="sk">
</a>
<a href="changeLanguage.php?lang=cz">
<img src="/flags/cz.png" alt="cz" title="cz">
</a>
</div>
Then, in this changeLanguage.php, you do your $obj->change_language($_GET['lang']); (where you should check/cast the value of the lang parameter), then, you can redirect the user to the referer page with something like
$url = (string) $_SERVER['HTTP_REFERER'];
if (0 === strlen($url)) {
// redirect to the home page if there is no referer
$url = '/';
}
header('Location: '.$url);
This way, you don't need any Javascript code to this. I think this is important in some ways:
you only do one HTTP request instead of two with the AJAX solution,
when the user click, the browser reacts immediately: the request is sent right after the click so the "loading icon" of the browser is showing that something is happening
this effect of action->reaction is something important in the User Experience, with the AJAX solution you have to wait for the first request to finish to trigger the "loading icon",
the location.reload() used with the AJAX solution can show up a dialog like Would you like to submit the form again ? if the user has arrived to this page with a POST request, and he might not understand what's the relation between its action (change the language) and this "error" message, which leads to a degraded User Experience too,
if your Javascript is broken is some way, those link might not work at all if your page to change the language only change the language. Let's say the page index.php?page=test&lang=en is doing something like $obj->change_language($_GET['lang']); exit;, because this page's purpose is only to change the language. Then if the Javascript code is not triggered for any reason (the code is broken, handlers are not bound, the user open up the page in a new tab), then the page loaded will be a blank page. And if you handle this case, then the "change language page" would look like a normal page, that's ok but it means that you'll do two HTTP requests with a "complete" response (one for changing the language, one other after the location.reload), and this leads to the first point,
use Javascript only where it's needed :)
What do you think ?