It shows same comments on different pages in disqus - javascript

I am making a forums section for my website where disqus comments are loaded according to the question asked by user. I have tried setting page tile, page url, page identifier. But even then it shows same comments on all pages. Don't know where I am going wrong?
Here is my code
<script>
var disqus_config = function () {
this.page.url = "http://localhost:3000/forums_details.php?que=<?php echo $_GET['que']; ?>";
this.page.identifier = "<?php echo $_GET['que']; ?>";
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//onlinestudymaterial.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>

Related

tinyMCE.editors[] wordpress 4.8 undefined

I have a custom posttype with a metabox that can add posts with editors to the post. whenever I add a new post with an editor I want to save the content of that editor. It has worked fine previously but has now stopped working. I can see that there are some changes in the wordpress update 4.8 to the editor api, but I can't see how the changes affect my code.
Making the editor:
<?php
public function wldk_elearn_add_elements_to_metabox($subpage_id){
$parent_id = $subpage_id;
echo '<div id="element_data_input_text">';
<?php
$settings = array( 'textarea_name' => 'mycustomeditor_'.$parent_id );
$editor_id = 'mycustomeditor_'.$parent_id;
wp_editor( "", $editor_id, $settings );
echo '</div>';
}
Javascript
function handleAddElementAction() {
$('.wldk-elearn-add-element').click(function (event) {
event.preventDefault();
var $wrapper = $(this).parents('#wldk-elearn-new-element');
var $subpage = $wrapper.find('input[name=subpage_id]');
var $type = $wrapper.find('input:radio[name=element_type]:checked');
var subpage = $subpage.val();
var content = '';
var whichmceditor = 'mycustomeditor_'+subpage;
console.log(whichmceditor);
if($type.val()=='tx'){
content = tinyMCE.editors[whichmceditor].getContent();
}
});
}
Uncaught TypeError: Cannot read property 'getContent' of undefined
i have also tried
content = tinyMCE.get(whichmceditor).getContent();
Which just gives me
Uncaught TypeError: Cannot read property 'getContent' of null
Its like tinyMCE methods don't exist anymore or something. I am not very good at this so any help or clue would be apreciated greatly.
So i figured it out! It was simply that the editor must be in visual mode in order to get the editor. A simple conditional fixes the issue:
function handleAddElementAction() {
$('.wldk-elearn-add-element').click(function (event) {
event.preventDefault();
var $wrapper = $(this).parents('#wldk-elearn-new-element');
var $subpage = $wrapper.find('input[name=subpage_id]');
var $type = $wrapper.find('input:radio[name=element_type]:checked');
var subpage = $subpage.val();
var content = '';
var whichmceditor = 'mycustomeditor_'+subpage;
console.log(whichmceditor);
if($type.val()=='tx'){
if($wrapper.find('#'+whichmceditor).is(':visible')){
content = $wrapper.find('#'+whichmceditor).val();
}else{
content = tinyMCE.editors[whichmceditor].getContent();
}
}
});
}
That's 3 hours of my life wasted, Maybe the documentation could be clearer, maybe it's me, maybe it's maybeline.

Disqus Loading the same comments for dynamic pages

I have a dynamic page that loads different ideas. I am using disqus for the comments, but disqus keeps loading the same comments for each idea.
Here is the website. http://tech-in.org/submitted_ideas/index.php.
Here is my code
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
if( typeof DISQUS != 'undefined' ) {
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = '<?php echo $title; ?>';
this.page.url = 'http://tech-in.org/submitted_ideas/idea.php?id=<?php echo $idea_id; ?>';
}
});
}
var disqus_shortname = 'techinorg'; // required: replace example with your forum shortname
var disqus_identifier = '<?php echo $title; ?>';
var disqus_url = 'http://tech-in.org/submitted_ideas/idea.php?id=<?php echo $idea_id; ?>';
var disqus_title = document.getElementById('disqus_post_title').innerHTML;
var disqus_message = document.getElementById('disqus_post_message').innerHTML;
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
Please kindly help with what is causing the error and what can i do to resolve it
Disqus decides which comments to load based on the disqus_identifier you specify. When a different "idea" is loaded, ensure that you provide a unique disqus_identifier that corresponds to that idea. (It's not clear what $title represents in your PHP script, which is what is currently being assigned to disqus_identifier.)
Looks like your identifier is not unique enough, see reference documentation here: http://docs.disqus.com/help/14/
It states:
When Disqus-enabled pages are visited, Disqus uses this identifier to
determine the appropriate comment thread to load. If the appropriate
thread could not be found, a new thread is created. Disqus identifiers
keep threads and pages associated.
I came across this same problem on a page that uses AJAX to load new content with a new disqus thread. The solution for me was setting both the identifier and the url equal to the same thing.
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = 'http://example.com/#!' + myPageID;
this.page.url = 'http://example.com/#!' + myPageID;
}});
where myPageID is an integer that I dynamically update using AJAX
I finally got this working as follows.
The Disqus doco for Ajax sites [1], states the requirements are to set both variables this.page.identifier and this.page.URL using a full hashbang #!
var disqus_config = function () {
this.page.identifier = window.location.origin + '/#!' + identifier
this.page.url = window.location.origin + '/#!' + identifier
}
Confusingly, the example recipe [2] linked in the above mentioned doco, does not do this.
References:
[1] https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
[2] https://github.com/disqus/DISQUS-API-Recipes/blob/master/snippets/js/disqus-reset/disqus_reset.html

Post dynamic twitter updates

I currently have some script on my page that parses title/artist information from my online radio station. I am displaying it as plain text in html by using
<span id="song_title"></span>
How can I take this dynamic information that is going into the span id and use it for a "post to twitter" link so listeners can share the current song title on Twitter?
I did some research and found a few variations on posting to twitter, but I had no luck with posting this dynamic text.
Here's the script code:
<!-- Begin Now Playing Script -->
<script>
(function () {
// we need a JSON parser, if it does not exist, load it
if (typeof JSON == "undefined") {
var s = document.createElement("script");
// json2.js retrieved from https://github.com/douglascrockford/JSON-js
s.src = "json2.js";
document.getElementsByTagName("head").appendChild(s);
}
})();
var song_ends = 0;
function update_song () {
if ((new Date).getTime() < song_ends) {
// use cached result as the song has not ended yet
return;
}
var req = new XMLHttpRequest();
// IE compatbility:
var textContent = 'textContent' in document ? 'textContent' : 'innerText';
req.onreadystatechange = function () {
if (req.readyState == 4) {
var song = JSON.parse(req.responseText);
if (song.title) {
var img = document.getElementById("song_image");
if(song.image.src){
img.alt = song.image.alt;
img.src = song.image.src;
img.width = 100;
img.height = 100;
}else{
img.src="images/default_art.png";
img.width = 100;
img.height = 100;
}
document.getElementById("song_title")[textContent] = song.title ;
document.getElementById("song_artist")[textContent] = song.artist;
document.getElementById("song_next")[textContent] = song.next ;
// store the end date in javascript date format
song_ends = (new Date).getTime() + song.wait_ms;
}
}
};
req.open('get', 'php/PlayingNow.php', true);
req.send(null);
}
// poll for changes every 20 seconds
setInterval(update_song, 20000);
// and update the song information
update_song();
</script>
<!-- End Now Playing Script -->
I want to be able to post it to Twitter like this: Currently listening to (song_title) by (song_artist)
Here is the code for the PHP file referenced in the script above:
<?php // filename: PlayingNow.php
$json = null;
$cache = 'song.json';
// if there is no usuable cache
if (!$json) {
// retrieve the contents of the URL
$ch = curl_init('http://bigcountry.streamon.fm/card');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$res = curl_exec($ch);
curl_close($ch);
$json = json_decode($res);
// if the title exists, assume the result to be valid
if ($json && $json->title) {
// cache it
$fp = fopen('song.json', 'w');
fwrite($fp, $res);
fclose($fp);
} else {
$json = null;
}
}
if ($json) {
$info = array();
// contains the time in milliseconds
$info['wait_ms'] = $json->interval->ends_at - 1000 * microtime(true);
$info['title'] = $json->title ;
$info['artist'] = $json->artist;
$info['album'] = $json->album ;
$info['next'] = $json->next_song;
$info['image'] = $json->album_art;
// display a JSON response for the HTML page
echo json_encode($info);
}
?>
The "right" way to do this is to use Twitter's Web Intents, which is designed specifically for this scenario. Take a look at the "Tweet or Reply to a Tweet" section. In practice you'll just include the Web Intents script (http://platform.twitter.com/widgets.js) on your page, create a link, and set its href, e.g.:
var link = document.createElement('a');
link.innerHTML = "Link Text";
link.href = 'http://twitter.com/intent/tweet?text=Currently listening to "' + songTitle + '" by ' + songArtist;
var parentElement = document.getElementById('SOME_ELEMENTS_ID');
parentElement.appendChild(link);
You can add the url parameter if you also want the tweet to include your site's URL.

Inserting Google Adwords Conversion Tracking with Javascript or jQuery

I'm pretty new to javascript, and therein probably lies my problem. I'm trying to track AdWords conversions that occur within a widget on our site. The user fills in a form and the result from the widget is published in the same div without a page refresh. The issue I'm having is when I try to appendChild (or append in jQuery) both script elements in Google's code (shown below) the page gets 302 redirected to a blank Google page (or at least that's what it looks like through FireBug).
I'm able to provide a callback method for the results of the form, and that's where I'm trying to insert the AdWords tracking code. For reference, this is the code provided by Google:
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 993834405;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "bSpUCOP9iAIQpevy2QM";
/* ]]> */
</script>
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/pagead/conversion/993834405/?label=bSpUCOP9iAIQpevy2QM&guid=ON&script=0"/>
</div>
</noscript>
Pretty standard stuff. So, what I'm trying to do is insert this into the results page using the callback method (which is provided). Frankly, I'm redirected no matter when I try to insert this code using js or jQuery (either on original page load or in the callback) so maybe the callback bit is irrelevant, but it's why I'm not just pasting it into the page's code.
I've tried a number of different ways to do this, but here's what I currently have (excuse the sloppiness. Just trying to hack my way through this at the moment!):
function matchResultsCallback(data){
var scriptTag = document.createElement('script');
scriptTag.type = "text/javascript";
scriptTag.text = scriptTag.text + "/* <![CDATA[ */\n";
scriptTag.text = scriptTag.text + "var google_conversion_id \= 993834405\;\n";
scriptTag.text = scriptTag.text + "var google_conversion_language \= \"en\"\;\n";
scriptTag.text = scriptTag.text + "var google_conversion_format \= \"3\"\;\n";
scriptTag.text = scriptTag.text + "var google_conversion_color \= \"ffffff\"\;\n";
scriptTag.text = scriptTag.text + "var google_conversion_label \= \"bSpUCOP9iAIQpevy2QM\"\;\n";
scriptTag.text = scriptTag.text + "/* ]]> */\n";
$('body').append(scriptTag);
$('body').append("<script type\=\"text\/javascript\" src\=\"http://www.googleadservices.com/pagead/conversion.js\" />");
//I have also tried this bit above using the same method as 'scriptTag' with no luck, this is just the most recent iteration.
var scriptTag2 = document.createElement('noscript');
var imgTag = document.createElement('img');
imgTag.height = 1;
imgTag.width = 1;
imgTag.border = 0;
imgTag.src = "http://www.googleadservices.com/pagead/conversion/993834405/?label=bSpUCOP9iAIQpevy2QM&guid=ON&script=0";
$('body').append(scriptTag2);
$('noscript').append(imgTag);
}
The really odd thing is that when I only insert one of the script tags (it doesn't matter which one), it doesn't redirect. It only redirects when I try to insert both of them.
I've also tried putting the first script tag into the original page code (as it's not making any calls anywhere, it's just setting variables) and just inserting the conversions.js file and it still does the redirect.
If it's relevant I'm using Firefox 3.6.13, and have tried the included code with both jQuery 1.3 and 1.5 (after realizing we were using v1.3).
I know I'm missing something! Any suggestions?
Nowadays it is convenient to use the Asynchronous Tag at http://www.googleadservices.com/pagead/conversion_async.js that exposes the window.google_trackConversion function.
This function can be used at any time. For example after submitting a form, like in your case.
See https://developers.google.com/adwords-remarketing-tag/asynchronous/
Update 2018
Situation changed and it seems that you have more options now with the gtag.js: https://developers.google.com/adwords-remarketing-tag/
If you're using jQuery in your pages, why don't you use the getScript method of the same to poll the conversion tracking script after setting the required variables?
This is what I usually do, once I've received a success response from my AJAX calls.
var google_conversion_id = <Your ID Here>;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "<Your Label here>";
var google_conversion_value = 0;
if (100) {
google_conversion_value = <Your value here if any>;
}
$jQ.getScript( "http://www.googleadservices.com/pagead/conversion.js" );
This works just fine for me. If you want a more detailed example:
$.ajax({
async: true,
type: "POST",
dataType: "json",
url: <Your URL>,
data: _data,
success: function( json ) {
// Do something
// ...
// Track conversion
var google_conversion_id = <Your ID Here>;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "<Your Label here>";
var google_conversion_value = 0;
if (100) {
google_conversion_value = <Your value here if any>;
}
$.getScript( "http://www.googleadservices.com/pagead/conversion.js" );
} // success
});
If you use other libraries such as Mootools or Prototype, I'm sure they have similar in-built methods. This AFAIK is one of the cleanest approaches.
this simple code worked for me (the $.getScript version didn't).
var image = new Image(1,1);
image.src = 'http://www.googleadservices.com/pagead/conversion/' + id + '/?label=' + label + ' &guid=ON&script=0';
// This takes care of it for jQuery. Code can be easily adapted for other javascript libraries:
function googleTrackingPixel() {
// set google variables as globals
window.google_conversion_id = 1117861175
window.google_conversion_language = "en"
window.google_conversion_format = "3"
window.google_conversion_color = "ffffff"
window.google_conversion_label = "Ll49CJnRpgUQ9-at5QM"
window.google_conversion_value = 0
var oldDocWrite = document.write // save old doc write
document.write = function(node){ // change doc write to be friendlier, temporary
$("body").append(node)
}
$.getScript("http://www.googleadservices.com/pagead/conversion.js", function() {
setTimeout(function() { // let the above script run, then replace doc.write
document.write = oldDocWrite
}, 100)
})
}
// and you would call it in your script on the event like so:
$("button").click( function() {
googleTrackingPixel()
})
In your Adwords account - if you change the conversion tracking event to "Click" instead of "Page Load" it will provide you with code that creates a function. It creates a snippet like this:
<!-- Google Code for Developer Contact Form Conversion Page
In your html page, add the snippet and call
goog_report_conversion when someone clicks on the
chosen link or button. -->
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = <Your ID Here>;
w.google_conversion_label = "<Your value here if any>";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
window.google_is_call = true;
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
<script type="text/javascript"
src="//www.googleadservices.com/pagead/conversion_async.js">
</script>
Then in your code you just call:
goog_report_conversion();
Or for a link or image click:
click here
After trying everything the link Funka provided (http://articles.adamwrobel.com/2010/12/23/trigger-adwords-conversion-on-javascript-event) was what worked for me. Like he said it's scary to overwrite document.write, but
It seems like this is what you have to do unless you can load the script before the page load.
Since the script uses document.write so it needs to be re-written
document.write = function(node){ // exactly what document.write should of been doing..
$("body").append(node);
}
window.google_tag_params = {
prodid: pageId,
pagetype: pageTypes[pageType] || "",
value: "234324342"
};
window.google_conversion_id = 2324849237;
window.google_conversion_label = "u38234j32423j432kj4";
window.google_custom_params = window.google_tag_params;
window.google_remarketing_only = true;
$.getScript("http://www.googleadservices.com/pagead/conversion.js")
.done(function() {
// script is loaded.
});
See https://gist.github.com/c7a316972128250d278c
As you have seen, the google conversion tag only calls on a redraw. I had to make sure it was called when a part of a page was redrawn. (Due to some bad website design that I could not fix at the moment.) So I wrote a function to call from an onClick event.
Essentially, all you have to do is to call doConversion();
Here is what we ended up with:
// gothelp from from http://www.ewanheming.com/2012/01/web-analytics/website-tracking/adwords-page-event-conversion-tracking
var Goal = function(id, label, value, url) {
this.id = id;
this.label = label;
this.value = value;
this.url = url;
};
function trackAdWordsConversion(goal, callback) {
// Create an image
var img = document.createElement("img");
// An optional callback function to run follow up processed after the conversion has been tracked
if(callback && typeof callback === "function") {
img.onload = callback;
}
// Construct the tracking beacon using the goal parameters
var trackingUrl = "http://www.googleadservices.com/pagead/conversion/"+goal.id;
trackingUrl += "/?random="+new Date().getMilliseconds();
trackingUrl += "&value="+goal.value;
trackingUrl += "&label="+goal.label;
trackingUrl += "&guid=ON&script=0&url="+encodeURI(goal.url);
img.src = trackingUrl;
// Add the image to the page
document.body.appendChild(img);
// Don't display the image
img.style = "display: none;";
}
function linkClick(link, goal) {
try {
// A function to redirect the user after the conversion event has been sent
var linkClickCallback = function() {
window.location = link.href;
};
// Track the conversion
trackAdWordsConversion(goal, linkClickCallback);
// Don't keep the user waiting too long in case there are problems
setTimeout(linkClickCallback, 1000);
// Stop the default link click
return false;
} catch(err) {
// Ensure the user is still redirected if there's an unexpected error in the code
return true;
}
}
function doConversion() {
var g = new Goal(YOUR CODE,YOUR_COOKIE,0.0,location.href);
return linkClick(this,g);
}
I tried all the ways to manually include conversion.js, it all loaded the script, but didn't further execute what we needed inside the script, there's a simple solution.
Just put your conversion code in a separate HTML, and load it in an iframe.
I found code to do that at http://www.benjaminkim.com/ that seemed to work well.
function ppcconversion() {
var iframe = document.createElement('iframe');
iframe.style.width = '0px';
iframe.style.height = '0px';
document.body.appendChild(iframe);
iframe.src = '/track.html'; // put URL to tracking code here.
};
then just call ppcconversion() wherever in the JS you like to record it.
All I do is return the code (or in our case, an image) along with the "success" message in the callback.
When a contact form is submitted, or a registration form filled out and submitted, we post to a php script using jQuery, then output a "thank-you" message to a div:
"$first_name, Thanks for requesting more information. A representative will contact you shortly."
... followed by the 1x1 gif Google provides.
Here's the jQuery:
$.post('script.php',{'first_name':first_name,'last_name':last_name,'email':email,'phone1':phone1,'password':password,},function(data){
var result=data.split("|");
if(result[0] ==='success'){
$('#return').html(result[1] + $result[2]);
And the php...
echo 'success|'.$first_name.', Thanks for requesting more information.
A representative will contact you shortly.|<img height="1" width="1" alt="" src="http://www.googleadservices.com/pagead/conversion/xxxxxxxx/imp.gif?value=0&label=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&script=0"/>';
You might need to throw in a "document.location.reload();" if it isn't being picked up by google
For anyone still looking for a good solution to this, Google supports AJAX Conversions natively now through their Google Analytics API.
You can do it by making a event API call in Google Analytics. What you do is setup an Analytics event, tie it to a goal, then import that goal into AdWords as a conversion. It's a bit of a lengthy process but it's a clean solution.
Check out This Page for a tutorial
This works for me:
window.google_trackConversion({
google_conversion_id: 000000000,
conversion_label : "xxxxxxxxxxxx",
google_remarketing_only: false,
onload_callback : function(){
//do something :)
}
});

How to track a Google Adwords conversion onclick?

Google Adwords offers no code to add to your page to count a conversion if somebody clicks on a link. But as it's Javascript, I am sure there is a way to do this.
Here's the code (unaltered) Google gives you to include in the page, that should count as a conversion (most of the time a thank you page):
<!-- Google Code for Klick Conversion Page -->
<script type="text/javascript">
<!--
var google_conversion_id = 1062751462;
var google_conversion_language = "de";
var google_conversion_format = "1";
var google_conversion_color = "ffffff";
var google_conversion_label = "dKXuCODvugEQ5pnh-gM";
var google_conversion_value = 0;
//-->
</script>
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/pagead/conversion/1062751462/?label=dKXuCODvugEQ5pnh-gM&guid=ON&script=0"/>
</div>
</noscript>
With other conversion tracking scripts some function has to be executed to count the conversion. Here, just adding the JS-File to your page can be enough to trigger the conversion-tracking, as conversion.js calls a function on load (download it and look at it after running it through a code beatuifier, it's really quite nice work!).
Any idea how to tackle this?
Don't know if you've already found it... I mention it anyway for future surfers...
I was looking for the same, and found this piece of code :
<script type="text/javascript">
function trackConv(google_conversion_id, google_conversion_label) {
var image = new Image(1, 1);
image.src = "//www.googleadservices.com/pagead/conversion/" + google_conversion_id + "/?label=" + google_conversion_label + "&script=0";
}
</script>
Then for links which you want to track just do this :
<a onclick="trackConv(1234567890, 'LQV8CNq6RxCKlPbvAw');" href="http://www.example.com">Link</a>
It appears that Google now offers an onclick option that you can copy and paste from the Conversions page in AdWords. From the AdWords Conversions page:
Add the tag to a button on your website, such as a "Buy now" button.
Here's a snippet from the page of documentation entitled Track clicks on your website as conversions. Replace XXXXX with conversion ID and label:
<!-- Google Code for Conversion Page
In your html page, add the snippet and call
goog_report_conversion when someone clicks on the
chosen link or button. -->
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = XXXXXXX;
w.google_conversion_label = "XXXXXXX";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
<script type="text/javascript"
src="//www.googleadservices.com/pagead/conversion_async.js">
</script>
And somewhere else in your code
button.addEventListener('click', function() {
console.log('Button clicked!');
goog_report_conversion();
});
I've a similar problem.
The Problem:
My client have a contact page that have a form. After the user fill all the form fields, there is a validation(to check if the user filled correctly all the fields). After the validation, the user is redirected to the webmail server page. There isn't an "Success" or "Thank You" page. So i needed to put the Adwords tag, after the form validation.
The Solution:
The validation was done this way:
var missinginfo = "";
var f = document.forms["CONTACT"];
if (f.name.value == ""){
missinginfo += "\n - name";}
.
.
.
if (missinginfo != "")
{
missinginfo ="_____________________________\n" +
"Empty Field" + "incorrectly filled" +
missinginfo + "\n_____________________________"
alert(missinginfo);
return false;
}
//End of Validation
So i added this snippet code:
else if(missinginfo == ""){ //Check if the form was filled correctly
adw_conv(); //Function Name
return false;
}
function adw_conv(){
var img = new Image() //Creates an image using JS to make the request
img.src = "http://www.googleadservices.com/pagead/conversion/123456789/?label=-8bcaCNHv6AIQl_v8_QM&guid=ON&script=0";
img.onload = function(){
var form = document.getElementsByName('CONTACT')[0];
form.submit();
}}
This way, after the form validation and before the website redirect the user to the webmail page, is triggered the Adwords Conversion!
Google Conversion Tracking concept using Ajax on a submit button :
$.ajax({
type: "POST",
url: "enquiry-submit.php",
data: data,
success: function (result) {
$("#msg").fadeIn(400).html(result);
/* Conversion Tracking Start */
var google_conversion_id = YOUR_CONVERSION_ID_HERE;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "YOUR_CONVERSION_LABEL_HERE";
var google_remarketing_only = false;
$.getScript('//www.googleadservices.com/pagead/conversion.js');
var image = new Image(1, 1);
image.src = "//www.googleadservices.com/pagead/conversion/YOUR_CONVERSION_ID_HERE/?label=YOUR_CONVERSION_LABEL_HERE&guid=ON&script=0";
/* Conversion Tracking End */
}
});
It is 100% working on my Google Ads Campaign.
Note: You must Test this by clicking on your ad. The effect of conversion will be visible after 12 minute on your AdWords Console
Add the code below to the section of the page you want to track conversions on.
<script>
function adwTrack() {
var img = new Image(1,1);
img.src = "https://www.googleadservices.com/pagead/conversion/XXXXXXXXXX/?value=1.00&currency_code=EUR&label=XXXXXXXXXX&guid=ON&script=0";
}
Just replace the XXX… with your actual conversion id and label.
Then call the adwTrack() function we created above in your link’s onclick event:
Track This
You can also do this using GTM: https://www.redflymarketing.com/blog/track-conversions-without-a-thank-you-page/

Categories

Resources