I was recently inspired by Simo Ahava‘s post to send weather data to Google Analytics, so I decided to do the same with stock market data. This demo could be particularly useful for any publicly traded company with some of the following applications:

• Investor relations websites
• Analyzing trends in stock performance and website user behavior
• Measuring online sales data against stock performance

You could also use a similar method for analyzing stock performance with user behavior on broker websites.

The steps are very similar to Simo’s weather data post, so I won’t go into as much detail. I’ll primarily explain some of the nuances particular to this solution.

1. Create a custom event trigger

Create a custom event trigger and title the Event Name stockPrice. This event will fire on the first page view of a session.

2. Create the data layer variables

We’re going to create data layer variables for the stock price, stock price change and percentage change. You can also pull in market cap, volume, change YTD, change percent YTD, high, low and open price if you’d like, but I’m going to keep it simple for this exercise.

The values for each of these variables are as follows:

DLV – Stock Price: stockPrice
DLV – Stock Price Change: stockPriceChange
DLV – Stock Price Change Percentage: stockPriceChangePercentage

3. Create a first party cookie variable

Just like the weather exercise, you’ll want to create a first party cookie titled ‘Session alive’  and set the cookie name to ‘session’.

4. Create the custom metrics

Next, we’ll want to create custom metrics for the information we’re passing to the data layer. Now you might be thinking, if we add these numbers up, then it won’t accurately report the stock price in our reports. For example, if we had 3 sessions where the stick price was 100 at the time of the first page load, then the stock price in GA would report 300. That’s what we’ll use calculated metrics for in the next step.

 

5. Create the calculated metrics

Now we want to create calculated metrics that will take our custom metrics divided by Sessions. All of our calculated metrics will have a formatting type of float since we’ll want decimals.

The formulas for each of these variables are as follows:

• Average Stock Price = {{Stock Price}} / {{Sessions}}
• Average Stock Price Change = {{Stock Price Change}} / {{Sessions}}
• Average Stock Price Change Percentage = {{Stock Price Change Percentage}} / {{Sessions}}

6. Add custom metrics to an event tag

Create a new event tag that fires on the custom event trigger that we created in the first step. The category, action and label really don’t matter in this exercise, so name those dimensions whatever you like. If you’re interested, you could pass the data layer variables into the category, action, and label if you’d like to manipulate the individual hits. This really all depends on how you’d like to analyze the data.

Add the custom metrics like shown below. Just make sure that the index matches your set up in Google Analytics.

7. Create a variable for the ticker symbol

Create a new Constant Variable in GTM and set the value to the ticker symbol of the stock you’d like to query. Make sure to name it ‘CONST – Stock Ticker’; Otherwise, you’ll need to make sure you change the name in the HTML tag in the next step. In this example, I’m using GOOG for Google.

7. Create a custom HTML tag

Last but not least, we need to create a custom HTML tag that will grab the stock price data from the API. I’m going to use the Markit On Demand API because it’s super simple and doesn’t require creating an API key.

Copy the code below or use this link

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>(function() {
if ({{Session alive}} === 'undefined') {
try {
// Set up variables for the API call
var symbol = {{CONST - Stock Ticker}};
var endpoint = 'http://dev.markitondemand.com/MODApis/Api/v2/Quote/jsonp?symbol=' + symbol;

// Make the API call
jQuery.ajax({
type : 'POST',
dataType : 'jsonp',
url : endpoint,
async : true,
success : function(data) {
change = data.Change.toFixed(2);
changePerent = data.ChangePercent.toFixed(2);
price = data.LastPrice;

},
error : function(xhr, textStatus, errorThrown) {
console.log('Error while fetching stock price data :: ' + errorThrown);
},
complete : function() {
dataLayer.push({
'event' : 'stockPrice',
'stockPriceChange' : change,
'stockPriceChangePercent' : changePerent,
'stockPrice' : price
});
}
});
} catch(e) {
dataLayer.push({
'event' : 'APIError',
'APIErrorMSG' : e.message
});
}
}
// Reset "session" cookie with a 30-minute expiration
var d = new Date();
d.setTime(d.getTime()+1800000);
var expires = "expires="+d.toGMTString();
document.cookie = "session=1; "+expires+"; path=/";
})(); </script>

And that’s it! I’d be interested to hear if anyone has any other uses or findings for this data with their websites.