I am trying to add a facebook pixel to my ruby on rails application. Facebook asked me to add this javascript to the head of my page - so I added it to the application.html.erb layout in the head section:
<!-- Facebook pixel -->
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
_fbq.push(['addPixelId', 'thisismysecretid']);
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', 'PixelInitialized', {}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?id=938407189542791&ev=PixelInitialized" /></noscript>
Then I tested my pages by using the google chrome facebook pixel tester extension - and it continually says no pixel was found. When I look at the generated source from my application - i actually don't see any of this inside the head of the page, so I assume that's why its not working - but why isnt it being rendered or processed?
SO! Why?! What am I doing wrong? Many thanks for all your support.
Well - the problem was - the page I was testing this on was not being rendered using templates from rails - so this code was never being run! Silly but true - all fixed now. The code itself was absolutely fine.
Related
I'm using an online ordering solution (white label solution) that only allows code edits via Google Tag Manager. I want to display a chat widget on the solution. Currently using LiveChat but want to change to MessageBird. Having problems with inserting code on single page app.
https://developers.messagebird.com/api/omnichannel-widget/
I've inserted the MessageBird Omnichannel widget via Google Tag Manager firing on all pages or history change (to allow for single page web app).
<script>
var MessageBirdChatWidgetSettings = {
widgetId: '37d411fb-b884-4342-a226-5c8aac703e44',
initializeOnLoad: true,
};
!function(){"use strict";if(Boolean(document.getElementById("live-chat-widget-script")))console.error("MessageBirdChatWidget: Snippet loaded twice on page");else{var e,t;window.MessageBirdChatWidget={},window.MessageBirdChatWidget.queue=[];for(var i=["init","setConfig","toggleChat","identify","hide","on","shutdown"],n=function(){var e=i[d];window.MessageBirdChatWidget[e]=function(){for(var t=arguments.length,i=new Array(t),n=0;n<t;n++)i[n]=arguments[n];window.MessageBirdChatWidget.queue.push([[e,i]])}},d=0;d<i.length;d++)n();var a=(null===(e=window)||void 0===e||null===(t=e.MessageBirdChatWidgetSettings)||void 0===t?void 0:t.widgetId)||"",o=function(){var e,t=document.createElement("script");t.type="text/javascript",t.src="https://livechat.messagebird.com/bootstrap.js?widgetId=".concat(a),t.async=!0,t.id="live-chat-widget-script";var i=document.getElementsByTagName("script")[0];null==i||null===(e=i.parentNode)||void 0===e||e.insertBefore(t,i)};"complete"===document.readyState?o():window.attachEvent?window.attachEvent("onload",o):window.addEventListener("load",o,!1)}}();
</script>
This works fine on our desktop version - where the widget loads to an area "off screen" to the bottom right but it causes problems on the mobile version - slowing down page loads and interfering with page elements and other tags firing via Google Tag Manager. I suspect the problem relates to our online ordering solution being a single page web app?
I walk through the problem here on video: https://www.loom.com/share/efacb3ebe89e49ceb7b5049da8a31a58
I was previously using LiveChat and also inserted the code via GTM (same triggers). This worked fine and I have this currently on the website.
<script type="text/javascript">
window.__lc = window.__lc || {};
window.__lc.license = 11857671;
(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 -->
<script src="https://73b0e137397e4eceb870f14567b2e515.js.ubembed.com" async></script>
I have tried firing the MessageBird widget tag on only the main page, same problem. I have also tried not initializing the MessageBird widget, same problem.
I would appreciate any advice or suggestions.
Using the google CSE utilities I've made a HTML file that is a barebones version of Google Search (about 1/10th page size), which is as follows:
<script>
(function() {
var cx = '011947631902407852034:gq02yx0e1mq';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
I can open this in my browser like C:\Users\Me\Documents\MyWebpage.html?q=MyQuery and it shows something like this:
This is obviously not what's in the HTML file, so I assume it's generated via JavaScript. Indeed, when I look at the page in my browser there's a lot more HTML than is in the actual file. The 1/10th size comment refers to the size of all of this, if I download it using Inspect Element, selecting the topmost node, Edit HTML, and copying all the HTML and placing it in a file.
My question is: how can I read in all of this HTML for a given query with Python?
I have a single page website and I am trying to invoke multiple events for the same Facebook Custom pixel from here.
I am using Facebook Pixel Helper on Chrome to test.
Here is the scenario:
This is how my javascript file looks:
(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
_fbq.push(['addPixelId', '1634281670122256']);
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', 'PixelInitialized', {}]);
function trackFbEventDownloadBrochure() {
window._fbq.push(['track', 'ViewContent', {content_name: 'brochure-pdf'}]);
}
function trackFbEventDownloadTsaWay() {
window._fbq.push(['track', 'ViewContent', {content_name: 'tsa-way-pdf'}]);
}
It is included in my html just before the closing tag:
<script type="text/javascript" src="js/fb-custom-tracking.js"></script>
</head>
I can see that the pixel is initialized correctly through the Fb Pixel helper tool.
Now I am sending a 'PageView' event with content_name="download-brochure" when the user clicks a link "Download Brochure". This I am doing using "onclick=trackFbEventDownloadBrochure();" on the link.
This pixel also loads successfully, although with a warning that the pixel took too long to load. I am assuming its because the user took some time before she clicked the link and I can safely ignore this.
Next, I have another link "Download TSA Way PDF". On this link, I have "onclick=trackFbEventDownloadTsaWay();". However, when the user clicks on this link (after having clicked on the other link), I see an error on the Fb Pixel Helper tool.
Custom Audience Pixel activated 2 times.
Event ID: ViewContent
Custom Audience Pixel pixel activated multiple times on this web page, which can cause errors in your event tracking.Learn more
View Event Log
Pixel ID: 1634281670122256
URL Called: Show
Pixel Location: Show
Load Time: 82.86 ms
Time To Request: 5501.48 ms
content_name: brochure-pdf
Same thing happens if I click the "Download TSA Way PDF" link first and then "Download Brochure".
It appears that we cannot send the same event twice from the same page, even if its sent with different parameters.
Can somebody help me with this ?
Thanks in advance !
Piyush
I have went through a ton of answers, and I can not get anything to work for me. Please be patient and specific as I am a newbie when it comes to using JavaScript.
I am attempting to get an external JavaScript file to load on Desktop only. Below is the code I am currently using, but it is not working. Can someone please help me achieve this.
<script>
(function() {
if( window.innerWidth > 600 ) {
var theScript = document.createElement('script');
theScript.type = 'text/javascript';
theScript.src = 'www.siteminds.net/m/1.6/mind_loader.php?pid=y2w6z8B3N31&cast_id=v1532315&autoplay=1&avname=jackie&wc=1&avnum=15&band_type=av';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(theScript, s);
}
})();
</script>
I am placing this code in the head section, however, the script is not running.
The website is responsive using respond.js. I also added enquire.js in an attempt to use that method (which I also couldn't get to work)
Probably, the main issue is that you must include the protocol on the URL so:
'www.siteminds.net/m/1.6/mind_loader.php?pid=y2w6z8B3N31&cast_id=v1532315&autoplay=1&avname=jackie&wc=1&avnum=15&band_type=av'
needs to be:
'http://www.siteminds.net/m/1.6/mind_loader.php?pid=y2w6z8B3N31&cast_id=v1532315&autoplay=1&avname=jackie&wc=1&avnum=15&band_type=av'
Your code could also fail if there were not already some script tags. This version is not vulnerable to that:
<script>
(function() {
if( window.innerWidth > 600 ) {
var theScript = document.createElement('script');
theScript.type = 'text/javascript';
theScript.src = 'http://www.siteminds.net/m/1.6/mind_loader.php?pid=y2w6z8B3N31&cast_id=v1532315&autoplay=1&avname=jackie&wc=1&avnum=15&band_type=av';
var head = document.getElementsByTagName('head')[0];
head.appendChild(theScript);
}
})();
</script>
Note: a test for innerWidth > 600 is not even close to a fail-proof way to detect a desktop installation as even a tablet in landscape mode will pass that test.
This is what ended up working for me.
<script>
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
if ( width > 600) {
document.write('<script src="//www.siteminds.net/m/1.6/mind_loader.php?pid=y2w6z8B3N31&cast_id=v1532315&autoplay=1&avname=jackie&wc=1&avnum=15&band_type=av" async><\/script>');
}
</script>
I am trying to generate javascript code that can be provided to website owners for them to integrate into their HTML. This code would display a button somewhere on their page which opens up a feedback form in a modal view type overlap on their website.
I realize there are a few plugins for ruby online that go with jQuery to create the modal view on a website but how would I create an integration script like shown below
<script type="text/javascript">
var uvOptions = {};
(function() {
var uv = document.createElement('script');
uv.type = 'text/javascript';
uv.async = true;
uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/KwRuyHwCUkk17M8jW64HDA.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
})();
</script>
I am specifically looking for a gem or a plugin for rails 3 that would make the job easier. If none are available, how hard is it to implement this in rails?
Appreciate any help