The Audiohook Pixel
How to install the Audiohook Pixel
TLDR; This articles covers how to edit the Audiohook pixel for installation. It will cover how to track multiple events, how to verify the pixel is installed correctly in the UI and provide a path to additional resources that can assist you in installing a pixel onto your website.
Pixel Event Tracking
To track one or multiple events and attribute them to your campaigns, you will need to add a "pixel" to your website. Your Audiohook pixel will look like this (words surrounded by {{curly braces}}
are meant to be replaced with the appropriate values):
<img src="https://listen.audiohook.com/{{COMPANY-ID}}/pixel.png?type={{EVENT-TYPE}}&order={{ORDER-ID}}&value={{ORDER-AMOUNT-USD}}" style="display: none;"></img>
When implementing a new pixel for multiple event tracking, we support the following events:
Pageviews
To track “pageviews”, you should put your pixel on EVERY page that you'd like to track a page view. You will then need to change the EVENT-TYPE
to "pageview". You can also remove the "order" and "value" parameters if you don’t want to assign a value to pageviews.
Example of an edited "Pageview" pixel below:
<img src="https://listen.audiohook.com/{{COMPANY-ID}}/pixel.png?type=pageview" style="display: none;"></img>
- Note: Your pixel will have a unique COMPANY-ID.
Purchases
For “purchases”, you will need to add this pixel to your Order Confirmation page. In this case you will change the EVENT-TYPE
(shown below) to "purchase", and set the ORDER-ID
to the order number and ORDER-AMOUNT
to the value of the purchase. This can be set to a static This is usually done on your server using a programming language (like PHP for WordPress) or in the web browser using JavaScript
Example of an edited "purchase" pixel below:
<img src="https://listen.audiohook.com/{{COMPANY-ID}}/pixel.png?type=purchase&order={{ORDER-ID}}&value={{ORDER-AMOUNT-USD}}" style="display: none;"></img>
Implementing the Audiohook Pixel via GET request
The Audiohook Pixel helps advertisers track and measure the performance of their audio campaigns.
The basic implementation of a tracking pixel on an advertiser's website is via a client-side GET request. This is where the user's browser loads the pixel when they load the advertiser's website. Here's is what that basic implementation looks like:
<img src="https://listen.audiohook.com/unique-advertiser-specific-uuid/pixel.png?type=pageview" style="display: none;">
Note that the only parameter in this pixel is the event type, no additional parameters required. The Audiohook system then automatically collects the Hashed IP address, User Agent String, and Timestamp when this information is received.
However this is not the only way to implement the Audiohook Pixel. You can also implement it server-side via GET (as well as via POST which we cover here).
Implementing the Audiohook Pixel server-side works the exact same way except you need to append a few additional parameters, namely Hashed IP address and User Agency String (encoded) both of the user since the IP address and User Agent String that the Audiohook system auto detects will be of the server and not of the users. Here is an example of what that looks like:
curl https://listen.audiohook.com/unique-advertiser-specific-uuid/pixel.png?ip={{insert_hashed_ip_address}}&ua={{insert_encoded_user_agent_string}}&type=pageview
Note that in this case, there are no image tags because this is not being loaded client-side. Rather we have included a curl command (though it could be implemented in Python, Java, or any other language).
Regardless of how you implement the Audiohook Pixel, you can pass any number of optional parameters.
- order={{order_id}}
- value={{value_of_purchase_usd}}
- userid={{anonymous_1st_party_user_id}}
- session={{id_or_string_for_current_user_session}}
- pageurl={{encoded_url_of_current_page}}
- referralurl={{encoded_url_of_previous_page}}
Implementing the Audiohook Pixel via POST request
The Audiohook Pixel helps advertisers track and measure the performance of their audio campaigns.
The basic implementation of a tracking pixel on an advertiser's website is via a client-side GET request. However this is not the only way to implement the Audiohook Pixel. You can also implement it server-side via POST request (as well as via GET which we cover here).
Implementing the Audiohook Pixel server-side works in a similar way except you need to pass parameters into the Body of the request. The two required parameters are the Hashed IP address and User Agency String (encoded) of the user. Here is an example of what that looks like:
curl -X POST https://listen.audiohook.com/unique-advertiser-specific-uuid/pixel.png -H "Content-Type: application/json" -d '{"ip_address": %%hashed_user_ip_address%%, "ua": %%user_agent_string%%, "type": "pageview"'}
Note that while type is technically not required it is highly recommended. While we have included a curl command, it can be implemented in Python, Java, or any other language.
Regardless of how you implement the Audiohook Pixel, you can pass any number of optional parameters.
{"order": %%order_id%%, "value": %%value_of_purchase_usd%%, "userid": %%anonymous_1st_party_user_id%%, "session": %%current_session_id%%, "referralurl": %%url_of_previous_page%%, "etc": "etc"}
How to verify if the Audiohook Pixel is installed correctly
Within the Audiohook platform, you can check to see if the Audiohook Pixel is installed and that we are receiving data. Once you are logged in, click on the Events tab in the side menu. Once there you should see events reporting. If you do not see any events listed as shown in the example screenshot below, then we are not receiving data from the Audiohook Pixel.
If we are receiving data, events will be listed as shown in the example below.
The data shown here is unfiltered. We recommend that you verify the data for each event (i.e. Type, Value, Date, Event ID, etc.) as well as the number of events (i.e. all purchases are showing up for the past 24 hrs). Note that there may be a delay of up to an hour for the events to show here.
You can click Customize Columns at the top of the screen to show more data for each event.