phonegap-build / GAPlugin

Google Analytics Plugin
MIT License
170 stars 141 forks source link

GAPlugin.js Not Loading? #45

Open kevinkembel opened 10 years ago

kevinkembel commented 10 years ago

Using PhoneGap Build, and been banging my head against a wall for hours. I'm sure I'm just being silly somewhere, but it seems so simple and I can't get it working at all.

My config.xml loads the plugin: <gap:plugin name="com.adobe.plugins.gaplugin"/>

My app in PhoneGap Build shows the "3rd Party Plugin", so I think the plugin is included properly in my app. com.adobe.plugins.gaplugin 2.1.5

My main index.html adds the phonegap.js and GAPlugin.js: <script src="phonegap.js" id="phonegap_script"></script> <script type="text/javascript" src="GAPlugin.js"></script>

PhoneGap seems to be loading fine, my app loads fine, but if I try and initialize the GAPlugin with even the first line, my app crashes.
var gaPlugin; document.addEventListener('deviceready', deviceReady(), false); function deviceReady() {   alert('device ready');   gaPlugin = window.plugins.gaPlugin; }

I get the 'device ready' alert, and then crash. It looks to me like 'window.plugins.gaPlugin' is undefined, 'window.plugins' is undefined for that matter.

Seems like I can't make it past the first line of code, and I've tried a million different things. Ok, maybe not a million, but too many variations to mention.

hx-markterry commented 10 years ago

put some debugging in GAPlugin.js so you know it is being included and execute correctly, as I've had the same problem when messing with the GAPlugin.js file and caused a syntax error

kevinkembel commented 10 years ago

Hi Mark,

Since I'm using PhoneGap Build, I don't include the GAPlugin.js file myself (according to the build docs, it gets injected automatically on build).

orenagiv commented 10 years ago

As far as I know - it does not. Where did you see that in the docs?

kevinkembel commented 10 years ago

Quote from PhoneGap Build plugin documentation: http://docs.build.phonegap.com/en_US/2.9.0/configuring_plugins.md.html#Plugins

Do not include the plugin javascript files or other plugin files in your app. These will be injected by PhoneGap Build, and including them may cause problems.

Using the Barcode Sanner example above, you should omit uploading the barcodescanner.js file when uploading the project to PhoneGap Build. (Also remember not to include the phonegap.js!)

orenagiv commented 10 years ago

They are referring to the actual JS file. I thought you were referring to the "script" tag - which must be included in the index.html file for the plugin to work. But I see you wrote above that you include that. Sorry about the confusion :)

kevinkembel commented 10 years ago

I tried to include the GAPlugin.js directly in my app, just for fun, but got this error when I uploaded to PhoneGap Build: "Error - A plugin asset was found in your app (remove any plugin assets from your app as they will be injected by Build): GAPlugin.js"

kevinkembel commented 10 years ago

Because of the platforms I was targeting, PhoneGap Build was using 2.9 with GAPlugin 2.1.5. I dropped all platforms except iOS/Android, built using 3.1 with GAPlugin 2.3.1 and it appears to be working fine now. Not sure what the problem was, but when I started with 3.1 I had some issues with my <access ... /> controls not working for some external resources in my app. I set an all-allowed access setting to get 3.1 working with my app, and then GAPlugin worked fine with it. So I'm not positive whether the problems I was having was with GAPlugin 2.1.5, or whether it was a problem with access.

phyp commented 10 years ago

Hi,

I seem to experience the same problem. The

gaPlugin = window.plugins.gaPlugin;

does not work. I tried the PlugIn with different versions (2.3.1 & PGB 3.1, 2.1.5 & PGB 2.9), I uncommented all other plugins in config.xml, I uncommented all other js-libraries in index.html but it does not work.

Is there a solution? Does it work using the CLI instead of PGB?

My config.xml

<?xml version="1.0" encoding="UTF-8" ?>
    <widget xmlns   = "http://www.w3.org/ns/widgets"
        xmlns:gap   = "http://phonegap.com/ns/1.0"
        id          = "com.example.tc"
        versionCode = "01" 
        version     = "0.0.1" >
    <preference name="phonegap-version" value="3.1.0" />

 ....

    <gap:platform name="android" />

    <gap:plugin name="com.adobe.plugins.gaplugin" version="2.3.1" />

</widget>

My index.html

<!doctype html>
<html>
    <head>
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8" src="GAPlugin.js"></script>

    <script type="text/javascript" charset="utf-8"> 

        // Setting up Google Analytics variables
        var myAnalyticsAccount = "UA-xyz";
        var gaPlugin;

        // Wait for PhoneGap to load
        document.addEventListener("deviceready", onDeviceReady(), false);

        // PhoneGap is ready

        function onDeviceReady() {
        // Initializing Google Analytics
        alert("onDeviceReady1");
        gaPlugin = window.plugins.gaPlugin;
        alert("onDeviceReady2");
        gaPlugin.init(successHandler(), errorHandler(), myAnalyticsAccount, 10);
        alert("onDeviceReady3");
        }

        // Google Analytics Error Handlyer
        function errorHandler(e) {
        alert("errorHandler1");
        }

        // Google Analytics Success Handler     
        function successHandler() {
        alert("successHandler1");
        gaPlugin.trackEvent(function() {}, errorHandler(), "App", "Open", "App", new Date());
        }       

        // Show a custom alert
        function showAlert() {
        alert("showAlert1");
        // Send Google Analytics Event
        gaPlugin.trackEvent(function() {}, errorHandler, "Button", "Click", "Getan", new Date());   
        }
</script></head>
<body data-theme="a" onload="">
        <p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p>
</body>
</html>

I get the "onDeviceReady1"-Alert after starting the app. And I get the "showAlert1"-Alert after clicking the link. So I assume the gaPlugin is not set. Is there a way to see any error messages (I copy the apk to my Galaxy S3, Android 4.3, but where to see the error message?)?

Thanks, Patrick

peterGecko commented 10 years ago

Hi Patrick,

I have resolved this issue by placing my the tracking code into the index.js file that comes with the phonegap white app. You can get my test here: https://github.com/peterGecko/WhiteAppTest Just update with your own tracking GA tracking code and it will work.

Simply using the onDeviceReady function within index.js instead of creating my own fixed the issue.

I hope this helps.

Thanks, Pete

joomapp commented 10 years ago

Hi Pete,

I see that in index.js you have: // Initializing Google Analytics gaPlugin = window.plugins.gaPlugin;
gaPlugin.init(nativePluginResultHandler, nativePluginErrorHandler, "UA-xyz", 10); gaPlugin.trackPage( nativePluginResultHandler, nativePluginErrorHandler, "/index");

And in index.html you also have: function trackPage() { //alert("successHandler1"); gaPlugin.trackPage( openSuccessHandler("App opening tracked"), errorHandler("trackPage Failed"), "/index"); //gaPlugin.trackEvent(openSuccessHandler(), errorHandler("trackEventFailed"), "App", "Open", "App","app opned"); }

So i see 2 times the "gaPlugin.trackPage" function. I am just wondering; is this normal behaviour of putting them both there?

Jasper

peterGecko commented 10 years ago

Hi Jasper,

That was an oversight on my part. I have updated the repo now to only use one gaPlugin.trackPage.

I would not recommend using two gaPlugin.trackPage instances as it will cause your date to double every page opening.

You can use multiple gaPlugin.trackEvent instances but they should be bound to an event. The example I have there calls an event when the app is opened.

Thanks, Pete

joomapp commented 10 years ago

Hi Pete,

Oke thnx clear. I was also struggling with the integration. It can be done in so many ways. If i can ask 1 question :-) since you also have experiences integrating this?

I am searching for a way that GAplugin.js will also work in a WepAPP (phonegap written). But i think the function will not be initialized because the XML part is not written by a normal webbrowser, right?

I can use normal Google analytics tracking code for this but that one will not work again if i package the html in a phonegap build.

Yes, i have the impossible idea again i think.. i need the same app packaged and as webAPP but i do need GA.

Jasper

peterGecko commented 10 years ago

Hi Jasper.

If you are building the app using phonegapBuild you will need to use the GAplugin by putting it into your XML.

If you are hosting the files on a server and providing them via the web you will need to use standard google analytics rather than the mobile app google analytics.

This is my understanding anyway.

Thanks, Pete

joomapp commented 10 years ago

Hi,

Yes thought so. I found another way which works on both with standard GA: https://github.com/ggendre/GALocalStorage/wiki/How-to-use

With "GALocalStorage" you can define pages in phonegap; still need to figure it out