Jump to content

How do I add LinkedIn conversion tag in a form?

Go to solution Solved by iamdavehart,

Recommended Posts

You add the linked in pixel. Best place to do this is probably in the page footer code injection part. (you'd need business/premium for this as it's javascript). For your form conversion you need to add a conversion event in LinkedIn campaign manager. this gives you some javascript to execute, which you'll have to hook up with a code block.

installing the pixel

Probably best to do this in the code injection part.

  • Get your pixel code from the LinkedIN Campaign Manager: Account Assets > Insight Tag. Go to the Install Tag section and expand "I will install this myself". Copy that code in its entirety.
  • In Squarespace go to Settings > Advanced > Code Injection, and paste the code into the Footer section, click Save

installing a conversion

Set up your conversion in the LinkedIn Campaign Manager. Account Assets > Conversions. See here: Set Up LinkedIn Conversion Tracking | Marketing Solutions Help

  • In step 3, make sure you select Insight Tag, and then Event from the Track dropdown
  • Copy the code at the bottom of that page. it will look like this: window.lintrk('track', { conversion_id: xxx })
  • Now go to the page where your form is and add a code block after the form
  • we need to attach the li tracking code to the button, so add the below code to that code block (but insert your own conversion_id from step above.
<script>
  const btn = document.querySelector("form input[type=submit]");
  if (btn && btn.addEventListener) { 
  	btn.addEventListener("click",function() { 
      window.lintrk('track',{ conversion_id: xxxxxxx }); 
    });
  }
</script>
  • this assumes you've only got one form on your page. if you've got more than one you'll need to find the block ID of your form (use the Squarespace Block ID chrome extension) and add that before the form in the query selector

 

There are other alternatives for link tracking if you're not using the LI pixel. you can use Squarespace's marketing section to build urls for LinkedIn Ads, and then look at tracking sources etc. you can also add hidden inputs to your form during the form design process and set the variable names to ss_source and ss_campaign_name and then the form will have the campaign submitted with it.

Creating trackable links – Squarespace Help

 

Edited by iamdavehart

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 7 months later...

@iamdavehart The script I received from LI is window.lintrk('track', { conversion_id: #### });

I noticed that in your code you changed 'track' to 'click'. I am trying to track conversions as submitting a demo form. Would I need to use your script and switch 'track' for 'click'? Or would my function need to switch to 'track' and keep the LI script as is? 

Thanks!

Link to comment
  • 9 months later...
On 9/10/2021 at 6:29 AM, iamdavehart said:

You add the linked in pixel. Best place to do this is probably in the page footer code injection part. (you'd need business/premium for this as it's javascript). For your form conversion you need to add a conversion event in LinkedIn campaign manager. this gives you some javascript to execute, which you'll have to hook up with a code block.

installing the pixel

Probably best to do this in the code injection part.

  • Get your pixel code from the LinkedIN Campaign Manager: Account Assets > Insight Tag. Go to the Install Tag section and expand "I will install this myself". Copy that code in its entirety.
  • In Squarespace go to Settings > Advanced > Code Injection, and paste the code into the Footer section, click Save

installing a conversion

Set up your conversion in the LinkedIn Campaign Manager. Account Assets > Conversions. See here: Set Up LinkedIn Conversion Tracking | Marketing Solutions Help

  • In step 3, make sure you select Insight Tag, and then Event from the Track dropdown
  • Copy the code at the bottom of that page. it will look like this: window.lintrk('track', { conversion_id: xxx })
  • Now go to the page where your form is and add a code block after the form
  • we need to attach the li tracking code to the button, so add the below code to that code block (but insert your own conversion_id from step above.
<script>
  const btn = document.querySelector("form input[type=submit]");
  if (btn && btn.addEventListener) { 
  	btn.addEventListener("click",function() { 
      window.lintrk('click',{ conversion_id: xxxxxxx }); 
    });
  }
</script>
  • this assumes you've only got one form on your page. if you've got more than one you'll need to find the block ID of your form (use the Squarespace Block ID chrome extension) and add that before the form in the query selector

 

There are other alternatives for link tracking if you're not using the LI pixel. you can use Squarespace's marketing section to build urls for LinkedIn Ads, and then look at tracking sources etc. you can also add hidden inputs to your form during the form design process and set the variable names to ss_source and ss_campaign_name and then the form will have the campaign submitted with it.

Creating trackable links – Squarespace Help

 

Thanks for the detailed explanation. Could you also provide some steps if this is not working? I inserted the code snippet to the page with the form and added the linkedin generated code to the footer through code injection, but the tracking status for this conversion is still offline. 

Any ideas as to why it would not link back to the actual tracking?

For context, this tracking id is for a form submission to request a quote. 

Thanks in advance

Link to comment
  • Solution

I don't know if it doesn't work because I don't actually use this on my site, I just read the instructions on linkedin to answer the question. I did test it at the time though and it was working. I suspect that the person who pointed out that the second "click" should be "track" was probably right, so I'd try that and see if it works.

so the script inside the code block should be this

<script>
  const btn = document.querySelector("form input[type=submit]");
  if (btn && btn.addEventListener) { 
  	btn.addEventListener("click",function() { 
      window.lintrk('track',{ conversion_id: xxxxxxx }); 
    });
  }
</script>

with the correct conversion_id subbed in

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 7 months later...
On 9/10/2021 at 3:29 AM, iamdavehart said:

this assumes you've only got one form on your page. if you've got more than one you'll need to find the block ID of your form (use the Squarespace Block ID chrome extension) and add that before the form in the query selector

Can you clarify exactly where the block ID should go?

Link to comment

@MKrause18 sure. either find the block id or the section id and then just insert that in the query selector. like this

// using a block id
const btn = document.querySelector("#block-yui_3_17_2_1_1693644183227_2008 form input[type=submit]");
// using a section id
const btn = document.querySelector("section[data-section-id='64f2f5bebec5b306ece83a42'] form input[type=submit]");

 

Edited by iamdavehart
tagging mkrause18

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 4 months later...

If it's a Squarespace contact form submission that you want to track, you'll need the ID of the block, and then listen for the event 'contact-form-submit'
 

<script>
        document.addEventListener('DOMContentLoaded', function() {
            var yourForm = document.getElementById('block-IDxxxxxxxx');

            if (yourForm) {
                yourForm.addEventListener('contact-form-submit', function() {
                    window.lintrk('track', { conversion_id: XXXXXXXX });  
                });
            }
    </script>

 

Edited by hharvey
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.