SOLVED

Load pixel on Form Submit

Go to solution
Highlighted

Load pixel on Form Submit

We're trying to integrate LinkedIn Ad conversion pixel with our Marketo form which links to a PDF file as Thank you URL.

The pixel tag is below:

<img src="https://dc.ads.linkedin.com/collect/?pid=xxxx&conversionId=xxxx&fmt=gif" height="1px">

Since LinkedIn tracks conversions based on number of times this pixel is loaded, is it possible to load this pixel only when the visitor hits Submit on the Marketo form?

Any thoughts/ideas or better ways to track conversions with LinkedIn Ads would be appreciated!

Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 10 - Community Moderator

Re: Load pixel on Form Submit

Actually "when the visitor hits Submit" is not when you want to load a conversion pixel. I see people make this mistake all the time and it totally mangles their conversion numbers.

Hitting the Submit button doesn't mean the form was successfully submitted. Any validation error will reject the form, so you will get "conversion" after "conversion" and may not have a successful submission at all.

What you want to do is catch the Success event.

Like so:

MktoForms2.whenReady(function(form){

  var liPixelSrc = "https://dc.ads.linkedin.com/whatever/the/img/url/is";

  form.onSuccess(function(vals,thankYouURL){

    var liPixel = new Image();

    liPixel.onload = function(e){

      document.location.href = thankYouURL;

    };

    liPixel.src = liPixelSrc;

    return false;

  });

});

View solution in original post

8 REPLIES 8
Highlighted
Level 10 - Community Moderator

Re: Load pixel on Form Submit

Actually "when the visitor hits Submit" is not when you want to load a conversion pixel. I see people make this mistake all the time and it totally mangles their conversion numbers.

Hitting the Submit button doesn't mean the form was successfully submitted. Any validation error will reject the form, so you will get "conversion" after "conversion" and may not have a successful submission at all.

What you want to do is catch the Success event.

Like so:

MktoForms2.whenReady(function(form){

  var liPixelSrc = "https://dc.ads.linkedin.com/whatever/the/img/url/is";

  form.onSuccess(function(vals,thankYouURL){

    var liPixel = new Image();

    liPixel.onload = function(e){

      document.location.href = thankYouURL;

    };

    liPixel.src = liPixelSrc;

    return false;

  });

});

View solution in original post

Highlighted

Re: Load pixel on Form Submit

Definitely, the best way of doing this! Thank you Sanford

Re: Load pixel on Form Submit

Do you insert this as rich text HTML on the form?

Highlighted
Level 10 - Community Moderator

Re: Load pixel on Form Submit

Highlighted

Re: Load pixel on Form Submit

Right on - thanks Sanford, then I am guessing we insert the pixel load into your //now continue section (replacing the console log bit with the below:

var liPixelSrc = "https://px.ads.linkedin.com/collect/?pid=xxxxx&conversionId=xxxx&fmt=gif"; 
form.onSuccess(function(vals,thankYouURL){
var liPixel = new Image();

liPixel.onload = function(e){
document.location.href = thankYouURL;
};
liPixel.src = liPixelSrc;

return false;
});‍‍‍‍‍‍‍‍‍‍‍
Highlighted
Level 10 - Community Moderator

Re: Load pixel on Form Submit

Sure!

Highlighted
Level 1

Re: Load pixel on Form Submit

Hi, would you be able to specify which forms whenReady would fire?

I have a case of multiple forms embedded in a page and wondering how I can set different pixels to different forms.

Highlighted
Level 10 - Community Moderator

Re: Load pixel on Form Submit

Like so:

MktoForms2.whenReady(function(form){  
var formId = form.getId();

form.onSuccess(function(vals,thankYouURL){
var liPixel = new Image(),
liPixelSrc;

liPixel.onload = function(e){
document.location.href = thankYouURL;
};

switch( formId ){
case 123:
liPixelSrc = "https://dc.ads.linkedin.com/whatever/the/img/url/is/for/form/123";
break;
case 456:
liPixelSrc = "https://dc.ads.linkedin.com/whatever/the/img/url/is/for/form/456";
break;
default:
liPixelSrc = "https://dc.ads.linkedin.com/whatever/the/default/img/url/is";
}

liPixel.src = liPixelSrc;

return false;
});
}); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Or set up a mapping object between form IDs and pixel URLs, etc.