Inserting Javascript into admin footer wordpress - javascript

I need to add Livechat widget on all WordPress admin pages (backend).
The Livechat JavaScript code is this:
<!-- Start of LiveChat (www.livechatinc.com) code -->
<script type="text/javascript">
window.__lc = window.__lc || {};
window.__lc.license = 12345678;
(function() {
var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
})();
</script>
<noscript>
Chat with us,
powered by LiveChat
</noscript>
<!-- End of LiveChat code -->
Livechat has a plugin for the chat to work on the front-end pages. I actually wanted to add this code to every page of WordPress back-end.
I was thinking of putting it in the admin footer through the functions.php of my child theme, but I'm not sure how to put this code together.
The code I am inserting into the child theme is this:
function remove_footer_admin () {
echo 'My footer text. Thank you WordPress for giving me this filter.';
}
add_filter( 'admin_footer_text', 'remove_footer_admin' );
Where should I put this code to work?

You can add JavaScript code in admin footer using admin_footer hook.
If you also need to add same code on the front-end, then apply wp_footer hook too.
Here is a complete code goes in child theme's functions.php:
// Function to render LiveChat JS code
function lh_add_livechat_js_code() {
?>
<!-- Start of LiveChat (www.livechatinc.com) code -->
<script type="text/javascript">
window.__lc = window.__lc || {};
window.__lc.license = YOUR_KEY; // use your license key here
(function() {
var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
})();
</script>
<noscript>
Chat with us,
powered by LiveChat
</noscript>
<!-- End of LiveChat code -->
<?php
}
add_action( 'admin_footer', 'lh_add_livechat_js_code' ); // For back-end
add_action( 'wp_footer', 'lh_add_livechat_js_code' ); // For front-end

Related

Pass order data to AdForm tracking code in Woocommerce thankyou

I am looking to pass along the WooCommerce Variables "OrderID" and "Cart_total" into our Ad Tracking platform.
I was supplied with the tracking code which needed to be implemented and am having issues getting these variables into AdForm.
Here's the snippet, which works perfectly, I think that I am not including the variables correctly.
/**
* #snippet Add Conversion Tracking Code to Thank You Page
* #how-to Watch tutorial # https://businessbloomer.com/?p=19055
* #sourcecode https://businessbloomer.com/?p=19964
* #author Rodolfo Melogli
* #testedwith WooCommerce 3.3.4
*/
add_action( 'woocommerce_thankyou', 'bbloomer_conversion_tracking_thank_you_page' );
function bbloomer_conversion_tracking_thank_you_page() {
?>
<!-- Adform Tracking Code BEGIN -->
<script type="text/javascript">
window._adftrack = Array.isArray(window._adftrack) ? window._adftrack : (window._adftrack ? [window._adftrack] : []);
window._adftrack.push({
pm: XXXXXXXX,
divider: encodeURIComponent('|'),
pagename: encodeURIComponent('conversion'),
order : {
sales: '$woocommerce->cart->get_cart_total();',
orderid: '$order->get_id();'
}
});
(function () { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://track.adform.net/serving/scripts/trackpoint/async/'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })();
</script>
<noscript>
<p style="margin:0;padding:0;border:0;">
<img src="https://track.adform.net/Serving/TrackPoint/?pm=XXXXXXX&ADFPageName=conversion&ADFdivider=|" width="1" height="1" alt="" />
</p>
</noscript>
<!-- Adform Tracking Code END -->
<?php
}
Specifically, I was asked to provide the following variables:
sales: '$woocommerce->cart->get_cart_total();',
orderid: '$order->get_id();'
But these are not working. I am unfortunately not a programmer (the programmer is on holiday). I think I need to call the variables somewhere.
There is no more cart data in Order received (thankyou) page, so you surely mean $order->get_total(). Also there is some mistakes in your code.
So you need:
first to get the WC_Order object from the missing $order_id argument in your hoked function
To get order total
To include and display the values in the javascript code.
Try the following:
add_action( 'woocommerce_thankyou', 'bbloomer_conversion_tracking_thank_you_page', 12, 1 );
function bbloomer_conversion_tracking_thank_you_page( $order_id ) {
// Get an instance of the WC_Order object
$order = wc_get_order( $order_id );
?>
<!-- Adform Tracking Code BEGIN -->
<script type="text/javascript">
window._adftrack = Array.isArray(window._adftrack) ? window._adftrack : (window._adftrack ? [window._adftrack] : []);
window._adftrack.push({
pm: XXXXXXXX,
divider: encodeURIComponent('|'),
pagename: encodeURIComponent('conversion'),
order : {
sales: '<?php echo $order->get_total(); ?>',
orderid: '<?php echo $order->get_id(); ?>;'
}
});
(function () { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://track.adform.net/serving/scripts/trackpoint/async/'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })();
</script>
<noscript>
<p style="margin:0;padding:0;border:0;">
<img src="https://track.adform.net/Serving/TrackPoint/?pm=XXXXXXX&ADFPageName=conversion&ADFdivider=|" width="1" height="1" alt="" />
</p>
</noscript>
<!-- Adform Tracking Code END -->
<?php
}

Can I put this javascript on a url on my own site?

I have a tool I am using that has embedded javascript to do tracking for it's hosted landing page.
I'd like to host the landing page on my own domain, and was hoping I could take the javascript and somehow manipulate it so that it would still track but from my page and I could not worry about the hosted page management.
Here is the code...any advice on if this is possible would be great!
<script type="text/javascript">
johnie = '225032';
ehe = '2846';
(function() {
function async_load(){
var s = document.createElement('script'); s.type = 'text/javascript';
s.src = ('https:' == document.location.protocol ? 'https://steve' : 'http://cdn') + ‘.steveo.com/pd.js';
var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c);
}
if(window.attachEvent) { window.attachEvent('onload', async_load); }
else { window.addEventListener('load', async_load, false); }
})();
</script>

Getting Weird responseText

I've a very short php code written just for testing the ajax in a Cordova application.
Code for php is :
<?php
if (isset($_POST["TEST"])){
if ($_POST["TEST"] == "TEST"){
$resp["GOOD"] = "TEST WORKS!!";
echo (json_encode($resp));
}
}
?>
My request code is :
$.post('http://mobtest.bugs3.com/test.php',
{ TEST: 'TEST' },
function (result) {
console.log(result);
$('#txtlbl').text(result);
}
);
I am expecting the responseText to be "TEST WORKS!!" but what I get is :
{"GOOD":"TEST WORKS!!"}<!-- www.serversfree.com Analytics Code -->
<script src="http://www.serversfree.com"></script><noscript><a title="Free hosting servers" href="http://www.serversfree.com">Free servers</a><a title="Free websites hosting server" href="http://www.serversfree.com">Free websites hosting server</a><a title="Free hosting server features" href="http://www.serversfree.com/server-features/">Free server features</a><a title="Free hosting" href="http://www.bugs3.com">Free hosting</a><a title="Page rank" href="http://www.1pagerank.com">Page rank</a></noscript>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24425628-3']);
_gaq.push(['_setDomainName', window.location.host]);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="http://www.bugs3.com/ganalytics.js"></script>
<!-- End Of Analytics Code -->
I don't understand whats happening here.
The answer here might solve your problem:
https://stackoverflow.com/a/10768130/1696795
In short user cleong wrote:
The code is in a PHP auto-append file. It doesn't get executed if you exit explicitly instead of letting the script reach the end of the file.
so just append this to the end of your php code:
exit();
for some reason, you are trying to echo your whole array.
update: plus you use json_encode while trying to access the result directly in your javascript.
so just echo the variable in your php code:
echo $resp["GOOD"];

When using Overlay Layout of Google-Custom-Search, no search data is being collected by Google-Analytics

I have a Google Custom Search Element on my site configured to use the "Overlay Layout":
And I have a Google Analytics Profile conneced to this Google Custom Search account set under the relevant section like this:
I'm using the default Analytics code, and the Custom Search code Google vended.
Analytics "Site Search Tracking" is On at the "Reporting Views Settings" like this:
The problem:
No site search information is being collected by Analytics, even after several days.
This problem is only happening when I use the overlay Layout.
When I use a separate search results page, the query is being collected ok since the results page request is being recorded by Analytics.
With the overlay layout, the search results are being presented in an overlay Div and the query is going only through Google's Custom Search API.
The Question:
What can I do to make sure Analytics gets the keyword query?
Is there any callbak I'm missing?
Is there any thing else I'm missing?
The Solution:
After consulting with Google Support, here is the solution:
Set up the GCS account in admin console # https://www.google.com/cse
Set up in Analytics the Site Search settings as mentioned above
Use the Async Tracking Code of Analytics (Universal Analytics Code will not work as of May 2014). put it just before the closing tag. like this:
<head>
<!-- Your head tags, etc here -->
<script type="text/javascript">
var gaq;
var _gaq = gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-YY']);
_gaq.push(['_setDomainName', 'yourdoamin.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
Put Use the GCS Tracking code you got from the admin console inside the secion
Use Custom call back to render the search box to handle custom attributes like this:
<body>
<script>
var customUIBehaviours = function(){
//your jQuery Post UI changes to the GCS box may come here
};
var renderSearchElement = function() {
google.search.cse.element.render({
div: 'gsd',
tag: 'search',
attributes:{
linkTarget:'_self',
gaQueryParameter: 'q',
gaCategoryParameter:'',
noResultsString:'No results.',
enableAutoComplete: true
}
});
};
var myCallback = function() {
if (document.readyState == 'complete') {
renderSearchElement();
customUIBehaviours();
} else {
google.setOnLoadCallback(function() {
renderSearchElement();
customUIBehaviours();
});
}
};
//this will make the GCS render by myCallback
window.__gcse = {
parsetags: 'explicit',
callback: myCallback
};
(function() {
var cx = 'YOUR GCS CODE HERE';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div id="gsd" class="gsce-searchBox"></div>
</body>
More information on the GCS V2 is available # https://developers.google.com/custom-search/docs/element#cse-element

Javascript Append a new Jquery file with noconflict

I need to append a new version of jquery into head section as below.
<head>
<script type="text/javascript" async="" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">var $jq = jQuery.noConflict(true);</script>
<script>
$jq(document).ready(function() {
// works well
});
</script>
</head>
It works fine when I put it directly. But my case is, I need to append it dynamically, reslove noconflict and the implementation using external javascript file (my.js). (As below)
my.js file should be consisted with the all implementation.
// insert jquery file
var jqueryfile = document.createElement('script');
jqueryfile.type = 'text/javascript';
jqueryfile.async = true;
jqueryfile.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(jqueryfile, s);
How to do my implementation with jQuery.noConflict() and $jq(document).ready(function() {}).
Thank you!
You can try this to insert script in HEAD section
head1=document.getElementsByTagName("head")[0];
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
var s1 = document.createElement("script");
s1.type = "text/javascript";
s1.innerHTML="var $jq = jQuery.noConflict(true);
$jq(document).ready(function() {
// works well
});
";
head1.appendChild(s);
head1.appendChild(s1);
you only need to include a regular js file in the regular fashion like so and alias jQuery as a parameter, freeing up the dollar sign:
<script type="text/javascript">js/scripts.js</script>
and then add this to your scripts.js file:
;(function ( $ ) {
// all code in this anonymous function will not conflict with any other library
// and it will never get in to the global namespace which is good
$(document).ready(function() {
// works well
});
})( jQuery );
now you can just use the "$" for jQuery freely

Categories