Disqus plugin not work in ionic v1 - angularjs

I am using Disqus in my ionic v1 project. The browser is working fine but the problem after build apk is not working show me the error
'we were unable to load Disqus. If you are a moderator please see our Troubleshooting guide'
<script type="text/javascript">
var disqus_shortname = 'shortname';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = 'https://'+disqus_shortname+'.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<div id="disqus_thread"></div>

Related

Insert Google Tag Manager (gtag.js) Tracking Id dynamically for AngularJS

I need to insert Google Tag Manager (gtag.js) dynamically for AngularJS. I manage a multi-tenant site where the Tracking Id is unique per tenant.
We did this previously (the old way using Google Analytics - analytics.js) like this:
index.html -
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
</script>
app.controller.js -
function setupAnalytics() {
var googleTagEnabled = $settings.checkTrue('Analytics/GoogleTagEnabled');
var googleTag = $settings['Analytics/GoogleTag'];
if (googleTagEnabled) {
$window.ga('create', googleTag, 'auto');
$rootScope.$on('$stateChangeSuccess', function (event) {
$window.ga('send', 'pageview', $location.path());
});
}
}
How can this be done using the new gtag method?
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-YY"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXXX-YY');
</script>
Solved it.
Kudos to Luke Boris's answer here:
https://stackoverflow.com/a/66530446/1098620
Combine with Chris Anker's answer here:
https://stackoverflow.com/a/48124899/1098620
index.html
<!-- no code here. -->
app.controller.js
function setupAnalytics() {
var googleTagEnabled = $settings.checkTrue('Analytics/GoogleTagEnabled');
var googleTag = $settings['Analytics/GoogleTag'];
if (googleTagEnabled) {
// Setting dataLayer & gtag to window because I'm using a custom code text field in a tag management system
window.dataLayer = window.dataLayer || [];
window.gtag =
window.gtag ||
function() {
window.dataLayer.push(arguments);
};
window.gtag("js", new Date());
window.gtag("config", googleTag);
// Set initial gtag/js?id=<first ID> script to <head>
var script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = "//www.googletagmanager.com/gtag/js?id=" + googleTag;
document.getElementsByTagName("head")[0].appendChild(script);
$rootScope.$on('$stateChangeSuccess', function (event) {
$window.gtag('config', googleTag, {'page_path': $location.path()});
$window.gtag('event', 'page_view');
});
}
}

Piwik tracking code

I am adding piwik script into my website. And I have added the trackingcode js file ie
if(domains && tracker_url && site_id ) {
var _paq = _paq || [];
_paq.push(["setDomains", [domains]]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u= tracker_url;
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', site_id]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
}
My question is do we need to include any piwik files other than this? ie whether we need to include the piwik.js file and all? Is there any package that is to be included into web root?
No, there is nothing else that needs to be included.
The tracking code loads the piwik.js (asynchronously) which then includes everything needed for the tracking.

Cordova In-App browser opening external scripts

//Actual webscript
<script type="text/javascript">
var lhnAccountN = "310904-1";
var lhnButtonN = 38;
var lhnInviteEnabled = 1;
var lhnWindowN = 0;
var lhnDepartmentN = 36316;
var lhnChatPosition = 'bottomright';
</script>
best live chat
<script src="//www.livehelpnow.net/lhn/widgets/chatbutton/lhnchatbutton-current.min.js" type="text/javascript" id="lhnscript"></script>
//the data is storing on session. every time connection is lost.
//so I'm using in-app browser to open the script in ionic mobile app. I'm unable to open the window please help me out
$rootScope.testChat=function(){
var options = {
location: 'no',
clearcache: 'yes',
toolbar: 'yes'
};
var ref=window.open('http://www.livehelpnow.net/products/live-chat-system', '_blank', options);
ref.addEventListener('loadstop', function() {
ref.executeScript({
code:"var lhnAccountN = '310904-1';var lhnButtonN = 38;var lhnInviteEnabled = 1;var lhnWindowN = 0;var lhnDepartmentN = 36316;var lhnChatPosition = 'bottomright';"
})
ref.executeScript({
code:"var chat; chat.src='www.livehelpnow.net/lhn/widgets/chatbutton/lhnchatbutton-current.min.js' chat.id='lhnscript'"
})
})
}
best live chat
Replace window.open() function with cordova.InAppBrowser.open(). You can consult https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/index.html for further info .

ng-repeat not printing resp.items from cloudendpoint on webpage

I'm new to angularjs. I'm working on a web application using angularjs and cloud endpoints. I'm getting the response from endpoint and I can see that in Console.log also. but when I'm trying to print that response it's not working. I'm not getting what's going wrong. Can anyone fix this?
Here's my code.
HTML Page
<div ng-repeat="lister in lists">
</div><h2>{{lister.title}}</h2>
</div>
AngularJs Code
<script>
function init() {
window.init();
}
</script>
<script>
var app = angular.module('list',[]);
app.controller('listCtrl',function($scope,$window){
$window.init= function() {
$scope.loader();
};
$scope.loader= function(){
gapi.client.load('MyEndPoint', 'v1', function(){
gapi.client.MyEndPoint.MyMethod1({
'latitude':'24.5555','longitude':'45.55555'
}).execute(function(resp) {
$window.console.log(resp);
$scope.lists = resp.items;
});
}, 'https://MyEndpointURL.appspot.com/_ah/api');
};
</script>

Angular Load LinkedIn Scripts From Partial

I am using LinkedIn API and I need to load their login scripts when my user hits a certain route. However , from what I've read in stackoverflow it is not possible to just put the script elements inside a partial .
my code is straight forward :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js">
...
<script src="http://platform.linkedin.com/in.js">
api_key: ...
authorize: true
onLoad: onLinkedInLoad
</script>
<script type="in/Login">
Hello, <?js= firstName ?> <?js= lastName ?>.
</script>
<script src="js/linkedinFuncs.js"></script>
</div>
The 3 last scripts (the linkedin ones) only needs to be included when the user hits the 'login' route . Any thoughts?
If anyone experiences this issue :
1)Make sure you load jquery BEFORE angular
2)Run the latest angular (this issue is resolved on 1.2.9 but was unresolved for me on 1.2.0)
You could load it from the code in your relevant congtroller programmatically by using something like this
(function injectScript() {
var src = 'http://platform.linkedin.com/in.js',
script = document.createElement('script');
script.async = true;
script.src = src;
var api_key = 'YOUR_KEY_HERE';
//script.authorize = true;
script.text = 'api_key: ' + api_key + '\n' + 'authorize: true\n';
script.onload = function() {
IN.Event.on(IN, 'systemReady', function() {
loadDeferred.resolve(IN);
});
};
document.getElementsByTagName('head')[0].appendChild(script);
})();

Resources