Use a LinkedIn Pixel to Track CTA Form Submits

Follow

Objective

Add a LinkedIn event-specific image pixel to your Hub to track conversions on gated assets in LinkedIn Campaign Manager.

 

Prerequisite: Create Pixel in LinkedIn Campaign Manager

Before you can implement the tracking pixel on your Uberflip Hub, you'll need to create an event-specific image pixel in LinkedIn Campaign Manager. To do so, follow the instructions in this article from LinkedIn:

LinkedIn: Setting Up an Event-Specific Image Pixel for Conversion Tracking

Once you've set up your pixel, you should have a copy of its code snippet. It will look something like this:

<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=[XXXXXX]&conversionId=[XXXXXX]&fmt=gif"/>

(Your own tracking pixel code snippet will have the appropriate `pid` and `conversionId` filled in).

In addition, you will also need the Item ID for the Item you want the pixel to fire on. You can get this by navigating to the Item in your Hub backend (Content > Items tab > Edit Item) and looking at the URL, where the Item ID is the 9-digit number in second-to-last place in the URL:

Hubs___Edit_Article_-_Uberflip.png

 

Set Up LinkedIn Tracking Pixel on Your Hub

Now that you have the tracking pixel code, you can add it to your Hub using custom code. Follow the instructions below to set up the tracking pixel so that it fires when a Form CTA is submitted on a specific Item.

Create a code block and name it anything you'd like (for instructions, see this article). For the placement of the code block, select 'Body Bottom'. 

The basis of your code block will be the following:

<script>
(function($, Hubs, undefined) {

// ADD ALL YOUR CODE HERE

}(window.jQuery, window.Hubs));
</script> 

The first piece of code you'll want to add is a function that will break down the tracking pixel into an object using Javascript. The pixel will then be added to the page.

Add the following code snippet to your code block:

function dropPixel(){

var imgtag = document.createElement('img');
imgtag.height = '1';
imgtag.width = '1';
imgtag.style = 'border-style:none;';
imgtag.alt = '';
imgtag.src = 'https://dc.ads.linkedin.com/collect/?pid=[XXXXX]&conversionId=[XXXXX]&fmt=gif';

$("#item-content").append(imgtag);
}

You'll need to swap out 'imgtag.src' value with your own tracking link that you acquired when you set up the tracking pixel. That will include your unique `pid` and `conversionId`. 

Now that we have the function setup, we need to have it fire only when a CTA is submitted on the asset you are tracking. For this, we'll need to use the `ctaFormSubmitSuccess` Hub event and a conditional statement that contains the 9-digit Item ID for the asset you want this pixel to fire on.

Add the following code snippet to your code block:

Hubs.Events.on('ctaFormSubmitSuccess', function(){

var item = $('#page-type-identifier').attr('data-item-id');
if (item == 'XXXXXXXXX'){
dropPixel();
}

});

Where you see XXXXXXXXX, replace this with the 9-digit Item ID for the Item gated with the Form CTA that you want to track.

Now all you have to do is save and enable your code block, and your Linkedin tracking pixel will be deployed on your Hub.

 

Additional Notes

This article covers conversion tracking on specific form submits. If you are looking to implement the site-wide Insight Tag from LinkedIn, see this article for instructions

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.