Chartable Web Pixel Best Practices

Purpose

The Chartable web pixel (JavaScript SDK) is required in order to conduct podcast ad attribution on your website. In this guide, we will provide guidance on getting your Chartable web pixel properly implemented.



What is the Chartable web pixel?

The Chartable web pixel (JavaScript SDK) is a snippet of JavaScript code that the advertiser places on their website in order to send Chartable the required data about web visits and activity - so we can attribute that activity back to the podcast campaigns.

The "basic" implementation will allow you to attribute (Household) visits and measure response rate. You may optionally include some of the relevant "advanced" endpoints like "add to cart" events, "checkout" started events, and "purchase" events - this will give you a better sense of how your podcast campaigns are impacting your sales funnel and conversions



Why do advertisers need to implement the Chartable web pixel?

Chartable SmartAds features powerful pixel-based attribution that enables advertisers to measure the success of the ads they are running on podcasts. When a listener downloads (or streams) a podcast with your ad, the podcast publisher passes us the IP address & user agent of that device. We further process that data, but for the purposes of this article, the important thing to understand is that we match it back to similar data we receive from the advertiser's website. This enables Chartable to "close the loop" and attribute website visits and events to the podcast ads.



How do I implement the Chartable web pixel on my website?

Your Chartable web pixel instructions can be found in your SmartAds dashboard by clicking on the "Pixel Integration" link on the left side menu. At that link you'll also find the Google Tag Manager (GTM) instructions if you are using a tag manager. Chartable can also be used with Google Floodlight as well as the tag manager, Tealium (using their Tag Marketplace).
Once you'd on the web pixel integration/instructions page, you'll notice a basic "Installation" Javascript snippet in a box towards the top of the page, like this: We recommend placing this basic implementation on every page (or at a minimum the primary entry points to their site - like homepage and any vanity URLs you may be using). The more pages you place this on, the more activity we'll be able to attribute to your podcast ad campaigns. 

What are the "Advanced Endpoints"? How do I implement those?

Further down the web pixel instructions page, you'll see the various optional Advanced Endpoints that you may implement to track funnel events and conversions. In order for them to work, the basic implementation we described in the last section must be implemented on the same page (and above the advanced endpoint). The various parameters available in each endpoint are also optional. For instance, in the purchase endpoint, you don't have to pass an order ID or value if you don't wish to.
The available advanced endpoints are:

Identify

You could trigger the "identify" endpoint if you wanted to measure signups, leads, or any other event where you may wish to pass a hashed user ID (please do not send personal data like email addresses!). The "identify" endpoint has one optional variable called "userId" where you can populate the hashed user ID.

Attribution Code

The "code" endpoint could be triggered when a user enters a discount code or attribution code. Optionally provide the "code" name and "codeType" (like 'discount' or 'attribution', etc.).

Lead

The "lead" endpoint can be used similarly to the "identify" endpoint. However, the "lead" endpoint has a few additional variables: "id", "productId", "quantity", "value", and "currency." Feel free to use any, or none, of them.

Add To Cart

Use the "addToCart" endpoint when a customer adds an item to their shopping cart. Optionally provide the productId, quantity, value, and currency.

Checkout

The "checkout" endpoint can be triggered when someone starts a checkout process on your website. You can optionally pass "id", "value", and "currency."

Purchase

The "purchase" endpoint can be triggered when an order is complete. Optionally pass the order "id", "value", and "currency".  Note that if you want Chartable SmartAds to report on attributed revenue, you must pass the order value.


What do you recommend for e-commerce/DTC companies?

We recommend placing this basic implementation (in the "Installation" box) on every page (or at a minimum the primary entry points to their site - like homepage and any vanity URLs you may be using). The more pages you place this on, the more activity we'll be able to attribute to your podcast ad campaigns.

If you are an e-commerce company, we recommend you implement the following Advanced Endpoints:
  1. Add To Cart (when someone adds an item to the shopping cart)
  2. Checkout (when someone begins a checkout)
  3. Purchase (when someone completes a purchase)
Note that the basic implementation must also be included on every page above the Advanced Endpoint implementation. If you use the Purchase advanced endpoint, you should include the Order ID and Order Value as well.


What do you recommend for B2B companies?

We recommend placing this basic implementation (in the "Installation" box) on every page (or at a minimum the primary entry points to their site - like homepage and any vanity URLs you may be using). The more pages you place this on, the more activity we'll be able to attribute to your podcast ad campaigns. 

If you are a B2B company, we recommend you implement the following Advanced Endpoints:

  1. Identify (when someone registers an account)
  2. Lead (when someone submits a lead or contact form)

Note that the basic implementation must also be included on every page above the Advanced Endpoint implementation.


How do I confirm that my pixel is properly placed?

Once you have placed the web pixel on your site, you need to confirm whether Chartable is receiving any event data from your web pixel. To do this, log into your Chartable SmartAds account, click on "Pixel Integration" on the left side menu. If you see the following message at the top of the page, the pixel has not been placed properly (we haven't received any data yet at all). Sometimes this takes an hour or two to update depending on the traffic volume to your website:

If you see the following message, then Chartable has at least received some data from your web pixel (but it does not necessarily mean that the pixel is properly instrumented):

Once you see "Status: Active" then you also must verify that Chartable is receiving the expected data.

In your Chartable SmartAds account, click on "Reports" on the left side menu. Click the "Create" tab at the top, and then click "Web Pixel Events". Select "init" as well as any of the Advanced Endpoints you implemented. Then click "Generate Report." 

This will generate a CSV spreadsheet report that may take up to an hour to produce. When it's complete, you'll receive an email and see it available for download in the Reports section of your Chartable dashboard.

Once you've decompressed/unzipped the file, you'll have a .csv spreadsheet that can be opened in Microsoft Excel. Open up the file and you'll see a row for every triggered event that Chartable has received during the dates of the report. Note that "init" events are triggers of the basic implementation, so you can imagine those as a proxy for pageviews, for instance.

Confirm that the data shown in this report is what you'd expect. Note that this is not attributed events, but raw event data - so it includes everything, not just events associated with podcast campaigns. These are the events that Chartable will ultimately be comparing back to the data we received from the podcast to see which events are attributed to your podcast campaigns.

See the article "How do I check that my Chartable web pixel is properly installed?" for more detailed information on verifying that your Chartable web pixel is properly placed.

Chartable is not responsible for improperly placed pixels, so please follow all of the steps to confirm your web pixel is in place.


Key things to remember!


  • Chartable can not provide technical support on pixel implementation or verify pixel placement. You must closely follow the directions outlined above in the section "How do I confirm that my pixel is properly placed?" and consult the article "How do I check that my Chartable web pixel is properly installed?"
  • Note that though our web pixel is compatible with various third party software systems like Google Tag Manager, Google Floodlight, and Tealium, Chartable cannot provide technical support for third party software. You must follow the directions outlined above in the section "How do I confirm that my pixel is properly placed?" and consult the article "How do I check that my Chartable web pixel is properly installed?" to affirm that the proper data is being sent to Chartable.
  • The "Advanced Endpoints" are optional. If you implement the basic implementation (in the "Installation" box) we can report on Household visit and response rate data. Integrating advanced endpoints gives more insight into attributed funnel activity including conversions.
  • If you are using an "Advanced Endpoint" like "purchase" or "lead", you must make sure that the basic Chartable pixel implementation (in the "Installation" box) is also implemented on the same page where you are triggering the advanced endpoint.  The basic implementation also must be called before you call the advanced endpoint. 
  • The parameters in the "Advanced Endpoints" are optional. For instance, you can trigger the "purchase" endpoint, and omit the order ID or order value (though it is recommended that you include that information).
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us