Using the Reporting API with Javascript

Bear with me here. This sounds like an experiment with no real-life value or application. But like the makers of ‘Lost’, I have a plan. Well, unlike them, I actually do. It’ll become clear over the next months.

So, the question: Can we, and how can we extract data from Adobe Analytics using Javascript?

My gut reaction is: sure we can!

But I want to know, and for that, I need to do it. Whilst I am doing it, why not document it as well? I am a blogger, after all, am I not?

Getting Data

Let’s build upon the previous articles on the subject and start with the requirements:

  1. We need to be able to authenticate — we need Base64 encoding
  2. We will make a ReportDescription and send a request — we need JSON
  3. We get some data back and display or otherwise process it

Because we’re doing it in the browser, there’s actually one more requirement:

  1. We must handle the complexity of cross-site scripting

At this point, I have just deleted about 12 paragraphs of text because a colleague told me that there was a Marketing Cloud Javascript SDK on github. So this will make things easier, quite a lot even.

The library handles all of the requirements above beautifully, except the processing and displaying of the results, of course.

Check out the example code that comes with the library, it is ridiculously easy to use.

[Screenshot]
Simple example
[Screenshot]
Result of running simple example

Next step?

The next step is to use it for something slightly more complex than reading all report suites. We want to be able to add parameters to the call and get some actual data back!

The Analytics documentation on the Developer Connection is a good place to start, but I know an even better place: the API Explorer!

I can select an “API” and then a “method”. The UI will reflect that choice and tell me what the “method” variable in my code has to be.

Example: I select “Report” as the API and “Run” as the method. My variable has to be “Report.Run”.

[Screenshot]
API Explorer View
Yes, yes, you don’t need an API Explorer to tell you that there’ll be a “.” between those two, I know, I know.

But the API Explorer will also generate a list of all possible parameters, and that means you don’t have to look at the documentation.

Also: start putting values into some of the parameters, then hit the “Get Response” button, and the API Explorer will tell you whether your parameters are valid! You can then simply copy them into your Javascript code.

[Screenshot]
API Explorer – successful test run

Crunch Time

Let me show you a complete example here. My page is simple enough to be understandable, I hope.

When I load it, it queues a report. If the queueing is successful, it enables the “Get Result” button, which in turn, when clicked, retrieves the data and inserts it into a formerly emtpy <div>.

This is what it looks like when the page has loaded:

[Screenshot]
Sample page after load
The script has queued the request. If I press the button, I get this:

[Screenshot]
Sample page with data
And here is the complete code:

[Screenshot]
Sample Code
Want me to walk you through that? Sure.

Lines 7 — 14 take care of setup. I’m loading jquery and the two libraries I got from github. Then I set variables for credentials and endpoints because we need those in every call to the library.

Lines 15 — 19 are the HTML scaffold for the page. Yes, that is pretty lean.

The script on lines 22 — 32 is executed when the page has loaded. On line 22 I set the method I want to call and on line 23 I define the parameters. Line 24 contains the actual call.

Lines 25 — 31 define a call back function that the library executes when the API has replied. It spits out some debug information, extracts the report ID (line 28), attaches it to the button as a data ttribute (line 30), and enables the button (line 31).

All of this happens when you load the page, without any further interaction. But now the button is enabled and you can press it! So on lines 34 — 81, I attach a click handler to the button.

Same structure here: a click on the button triggers a call to the API via the library (lines 35 — 39) plus a callback function that handles the result.

You can clearly see that being a blogger, I have a certain tendency to over-share, even with my Javascript interpreter (lines 40 — 51). I then create some elements and add them into the designated space on the page.

Lines 53 — 57 deal with the table header, looping over the metrics and getting their names (lines 55 — 57).

Similarly, I am looping over the data set (lines 59 — 66) to get all numbers for each metric.

To put some icing on the cake, I do a final loop over the totals (lines 69 — 71), then add everything to a <table> element which I add to the page.

And that’s all, really.

Notes

Your next steps should be to use some charting library (like D3 or whichever works for you) and make the data look good.

You would also likely not use a button and user interaction for retrieving data but rather use a timer and repeat. Keep the data updated.

The result can be a very pretty and compelling visualisation on a big screen somewhere in your office. The more people look at it and discuss it the better!

And here is an idea: you could inject all of the Javascript above into any Intranet page if your Intranet has a tag management system like DTM… *off towards dark part of the room with evil laughter*

7 thoughts on “Using the Reporting API with Javascript

  1. Hi Jan, as always your articles are thought and idea provoking! I am wondering where most folks run applications which are using the APIs. Do they run on workstations, servers, etc.? I’m sure heavy duty production work runs on servers. But what about the analyst who needs to run “ad hoc” reports to satisfy off the cuff requests? This browser method provides a simpler alternative, but I still would like a 101 lesson on setting up my API report workbench on a local machine. Thank you for any ideas… links, a new post, etc. 🙂

    Liked by 1 person

    1. I personally run them locally, on my laptop. But I am a consultant, and that means I need flexibility rather than stability.
      From the projects that I have seen, I’d say a lot of people run it on some dedicated machine, not necessarily a server.

      Like

  2. Pingback: Setting up for using the Reporting API | Web Analytics for Developers

  3. HI Jan, This is a really great article, although I have not been able to replicate it. I have used your code lie for line.
    If I use API1 as an endpoint it stays pending for a minute, and then fails. If I use API3 i get a 404. Any ideas?

    Like

  4. HI Jan, This is a really great article, although I have not been able to replicate it. I have used your code line for line.
    If I use API1 as an endpoint it stays pending for a minute, and then fails. If I use API3 i get a 404. Any ideas?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s