AWS Web Beacon/Tracking Pixel’s Stack: A Technical Walkthrough for Tracking site events
Are you interested in tracking the interactions of your website visitors? Then you are in the right article.
Today, we will guide you through the process of creating a tracking pixel or web beacon to track data from your website, such as content viewing and content loading. But don’t worry, this process is easier than you might think.
Our Objective is to keep a track on the performance of our advertisement banners on our website. This guide will show you how to create a web beacon stack using AWS to monitor content viewing and content loading interactions on this site.
First, let’s start with a pipeline that we going to implementing:
Our website will request a 1x1 px .gif through proxied DNS on Cloudflare, which will forward it to the designated API Gateway’s URL. A Lambda function will then ingest URL parameters on the event handler for a POST to insert data to TreasureData(any Big-data service or database). With this pipeline in place, you will be able to track important data that will help you monitor your site visitor.
To set up this tracking pixel, you’ll need to configure some settings on AWS API Gateway. Here’s how:
- Create an entry point for lambda function request and response configuration by going to console.aws.amazon.com/apigateway and selecting the ‘Resources’ tab. From there, click on the ‘Actions’ dropdown and choose ‘Create Resource.’ Then, create a method for /[anyname-track-pixel] > /{path} (*proxy resource) > GET.
2. Define method request parameters and integration request to Lambda function in the Method Execution pane. Under ‘Method Request,’ expand ‘URL Query String Parameters’ and create all the params you need in index.js, such as
adsName,
adsPosition,
adsWidth,
adsHeight,
campaign,
event,
pageUrl,
device,
sessionId,
IP
3. Under ‘Integration Request,’ select ‘Mapping Templates’ and choose ‘Generate template: Method request passthrough.’
4. Define the method response body and integration response to Lambda function in the Method Execution pane. Under ‘Method Response,’ edit ‘Response Body for 200’ Content-Type to be “image/gif”.
5. Under ‘Integration Response,’ click ‘Add mapping template’ and input Content-Type as “image/gif”.
Lambda Error Regex=”Invalid.*”,
Method response status=”400",
Content handling=”Convert to text (if needed)”
Then, paste the template provided as following code line to handle errors from Lambda function as below:
#set($inputRoot = $input.path(‘$’)) $inputRoot.body #set($context.responseOverride.header[‘cache-control’] = ‘no-cache, no-store, max-age=0’)
6. Deploy the API by selecting ‘Deploy API’ under the ‘Actions’ dropdown in the ‘Resources’ pane.
Fill in all the required information and click on ‘Deploy.’ Then, go to the ‘Stages’ tab on the left-hand menu and select your stage name.
Browse to your method GET to see the ‘Invoke URL’ for testing the API endpoint.
Now that the API Gateway is set up, you’ll need to bind it to a custom domain name on Cloudflare’s DNS. Lets move on into:
- Set up custom domain names on API Gateway by going to API Gateway > Custom domain names. Click on ‘Create’ and fill in the following details:
Domain details: Domain name = [WEBBEACON_DOMAIN_NAME]Then click ‘Submit’ to create the domain name.
ACM certificate: *.[MAIN_SITE_DOMAIN_NAME]
ex. WEBBEACON_DOMAIN_NAME = web-beacon.mysite.com
MAIN_SITE_DOMAIN_NAME = mysite.com
2. Select ‘API mappings’ pane to add new configure API mapping and type down ‘API Gateway domain name’ to be linked by Cloudflare’s DNS. Select API name and stage from dropdown then ‘Save’
3. Set up DNS on Cloudflare by going to Cloudflare’s DNS management and adding a record with the following details: Name=’web-beacon’, Content/Target=’[GENERATED_ID].execute-api.ap-southeast-1.amazonaws.com’ (API Gateway domain name).
4. Save the record and set up Google Public DNS (Mac OSX) by going to System Preferences > Network > Advanced > DNS and adding the following DNS servers: 192.168.1.1 (your router address from TCP/IP) and 8.8.8.8.
Therefore, test the final entry point from DNS customization by checking the network response on the URL: ‘https://web-beacon.yoursite.com/your-tracking-pixel'.
Now, we have a tracking pixel endpoint ready for lambda function to handling the request parameters send from our website.
We finally reaching the end of the pipeline AWS Lambda,
Every journey has its final day, Don’t rush
These steps is to import your index.js file on the AWS Lambda console and connect it to your API Gateway.
Below are index.js sample that we use to importing WebBeacon request params to the Big-data service of your choice:
const url = require('url');
const https = require('https');const GIF = Buffer.from(`R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=`, `base64`)function postRequestToBigData(data) {
// This is where we implement the exporting data to Big-data
}exports.handler = async (event, context, callback) => {
try {
if (event["params"]["path"].path === 'pixel.gif') {
// send TD request
if (event["params"]["querystring"]) {
await postRequestToBigData(event["params"]["querystring"]);
}
const imageHex = "\x42\x4d\x3c\x00\x00\x00\x00\x00\x00\x00\x36\x00\x00\x00\x28\x00"+
"\x00\x00\x01\x00\x00x00\x01\x00\x00\x00\x01\x00\x18\x00\x00\x00"+
"\x00\x00\x06\x00\x00\x00\x27\x00\x00\x00\x27\x00\x00\x00\x00\x00"+
"\x00\x00\x00\x00\x00\x00\xff\xff\xff\xff\x00\x00";
const response = {
statusCode: 200,
body: imageHex,
headers: {
cacheControl: 'no-cache, no-store, max-age=0',
contentLength: GIF.length,
contentType: 'image/gif',
end: GIF
}
};
context.done(null, response);
} else {
callback(new Error("Invalid path"));
}
} catch (e) {
console.log('error', e)
callback(new Error(e));
}
};
First, navigate to your created Lambda Functions or create a new one.
Then copy index.js code(modify it to your usage) as following
Next, head over to the “Configuration” tab and select “Add trigger.” Choose the API Gateway that will be responding to this Lambda function, and make sure to enter the corresponding API name.
With these steps, you’re well on your way to deploying your own Lambda function with API Gateway and Big-data service integration. Give it a try on 1x1 pixel destination url: ‘https://web-beacon.yoursite.com/your-tracking-pixel/pixel.gif?[REQUEST_PARAMETERS_HERE]'.
and see how to funnel the data with TrackingPixel/WebBeacon through AWS Stack.
