Tuesday, February 19, 2013

Declaration source files and google analytics

What is Declaration source files?

Declaration source files are restricted to contain declarations only. Declaration source files can be used to declare the static type information associated with existing JavaScript and expose their behavior.

I have started to implement TypeScript in my projects at work :-)

In that case I had to implement google analytics but ran into the problem, that I did not have intellisence for the that.

I googled a bit and could not find any declaration file for that, so I made my own.
I can now acces ga, _gaq, _gat and the Tracker object with intellicense in my TypeScript file, nice...

Example

describe("tester Google Analytics Code  _gaq object", () => {
    it("can create _push", () => {
        _gaq.push(['_setAccount', 'UA-XXXXXXX-YY']);
        _gaq.push(['_gat._anonymizeIp']);
        _gaq.push(['_trackPageview']);

        _gaq.push(() => {
                var tracker = _gat._getTrackerByName('UA-65432-1');
                tracker._trackPageview();
            }
        );
    });  
});

I have pushed it to https://github.com/borisyankov/DefinitelyTyped but until it is merged you can get the files here https://github.com/RonnieHegelund/DefinitelyTyped/tree/master/google.analytics



6 comments:

  1. I'm a little embarrassed. I got the TypeScript definitions downloaded, referenced them from my new TypeScript file, and intellisense is working perfectly. But I cannot, for the life of me, figure how to get it to work. I'm using something like this:

    ga = document.createElement("script");
    ga.async = true;
    ga.src = '//www.google-analytics.com/analytics.js';
    ga.type = 'text/javascript';
    document.body.appendChild(ga);

    But when I try to compile the .ts file, I get the following error: "Type 'GoogleAnalytics' is missing property 'nodeType' from type 'Node'."

    Any chance you could put up a SUPER-simple example .ts file to just load the analytics script and track a pageview?

    ReplyDelete
  2. Hi Eric,
    Thanks for the comment, don't be embarrased, you found a bug ;-)

    I made a test on your example, and I also gets the error. This is because ga doesn't extends Node. I thought I have committet this months ago! it's now committet, the change to the d.ts file is pasted below

    interface GoogleAnalytics extends Node {
    type: string;
    src: string;
    async: bool;
    }

    /ronnie

    ReplyDelete
    Replies
    1. @Ronnie, thanks much for the update. I really appreciate that :)

      Delete
  3. Still embarrassed. Still can't get a simple page view to track, though I can confirm extending Node fixed the original compilation problem.

    Here is my current .ts file contents:
    ga = document.createElement("script");
    ga.async = true;
    ga.src = '//www.google-analytics.com/analytics.js';
    ga.type = 'text/javascript';
    document.body.appendChild(ga);

    var tracker = _gat._createTracker('UA-XXXXXX-1', 'mydomain.com');
    tracker._trackPageview();

    Now the exception I get is: "JavaScript runtime error: '_gat' is undefined."

    Like I said, I'm NEW to TypeScript. I figured this would be a simple thing to try out to get started. Was I wrong? Maybe I just need to go read the documentation.

    ReplyDelete
    Replies
    1. Nevermind. I got around to playing with this again immediately realized I was referencing the newer "Universal Analytics" script instead of the old ga.js. Changing the referenced script fixed the problem.

      Delete
  4. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from TypeScript Training in Chennai . or learn thru Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete