Load pixel on Form Submit

[Chirag_Agarwal1]

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!

[SanfordWhiteman · Accepted solution]

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;
  });
});

[Chirag_Agarwal1]

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

[Brandon_Ratliff]

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

[SanfordWhiteman]

If you want, as long as you follow https://blog.teknkl.com/add-forms-behaviors-inside-rich-text/ 

[Brandon_Ratliff]

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; 
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[SanfordWhiteman]

Sure!

[Jin_Nakao]

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.

[SanfordWhiteman]

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.