CMS Development

Florencenoblet
Participant

LinkedIn Insight Tag : Add specific event code

SOLVE

Hello,

 

I've juste figured out that it's not possible to add short code on button of forms or on CTA. LinkedIn Insight Tag actually provides additional short code to track button submission for example.

 

It's really usefull to be able to add those codes because it allows marketers to analyse how many forms (for example) were submitted with a specific ad on LinkedIn.

 

It should be really useful to add this to Hubspot!

 

Florence

1 Accepted solution
derekcavaliero
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

LinkedIn Insight Tag : Add specific event code

SOLVE

@MKl 

 

I would definately fire the pixel/event using Google Tag Manager rather than hard coding it into the form submission callback directly. There are more steps involved to set it up, but having your tracking abstracted in your HTML is a good practice to get into.

 

That being said, what you would want to do is add something like this into the landing page header/footer HTML inside the advanced settings panel:

 

<script>
window.addEventListener('message', function(event) {

    if (event.data.type !== 'hsFormCallback') return;

    if (event.data.eventName === 'onFormSubmit') {
        var dataLayer = window.dataLayer || []; // Ensures the dataLayer is defined to avoid an exception being thrown.
        dataLayer.push({
            event: 'hubspot.form_submit'
        });
    }

});
</script>

 

A couple notes:

  • You'll need to configure a GTM trigger using the "custom event" trigger type that looks for all events with a value of hubspot.form_submit
  • You'll need to configure a tag (Custom Image if using a pixel - Custom HTML if using a javascript event) for the LinkedIn conversion. Attach the trigger mentioned above to that tag.
  • You can add this script into the global header/footer html output in the site settings - doing so would make sure that all your hubspot forms emit the same GTM event when submitted.
  • When using this method - it is advised to make sure your forms are not set to redirect to a thank-you page, otherwise the tracking will not have enough time to execute before the page unloads. There are ways around this - fairly technical and harder to implement - but the easiest thing to do is just set your forms to show an inline message instead of a TY page.

If you need more assistance, shoot me a DM.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com

View solution in original post

10 Replies 10
derekcavaliero
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

LinkedIn Insight Tag : Add specific event code

SOLVE

@MKl 

 

I would definately fire the pixel/event using Google Tag Manager rather than hard coding it into the form submission callback directly. There are more steps involved to set it up, but having your tracking abstracted in your HTML is a good practice to get into.

 

That being said, what you would want to do is add something like this into the landing page header/footer HTML inside the advanced settings panel:

 

<script>
window.addEventListener('message', function(event) {

    if (event.data.type !== 'hsFormCallback') return;

    if (event.data.eventName === 'onFormSubmit') {
        var dataLayer = window.dataLayer || []; // Ensures the dataLayer is defined to avoid an exception being thrown.
        dataLayer.push({
            event: 'hubspot.form_submit'
        });
    }

});
</script>

 

A couple notes:

  • You'll need to configure a GTM trigger using the "custom event" trigger type that looks for all events with a value of hubspot.form_submit
  • You'll need to configure a tag (Custom Image if using a pixel - Custom HTML if using a javascript event) for the LinkedIn conversion. Attach the trigger mentioned above to that tag.
  • You can add this script into the global header/footer html output in the site settings - doing so would make sure that all your hubspot forms emit the same GTM event when submitted.
  • When using this method - it is advised to make sure your forms are not set to redirect to a thank-you page, otherwise the tracking will not have enough time to execute before the page unloads. There are ways around this - fairly technical and harder to implement - but the easiest thing to do is just set your forms to show an inline message instead of a TY page.

If you need more assistance, shoot me a DM.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
IAscenso
Participant

LinkedIn Insight Tag : Add specific event code

SOLVE

Hey Derek,

I have a question - I am trying to track form submissions for a specific form (I have more than one, on different landing pages), so that I only pay for LinkedIn clicks that lead to that specific form submission. On your answer, you mention:


doing so would make sure that all your hubspot forms emit the same GTM event when submitted.

So, my question is - if I add that script into the global header/footer html output in the site settings, will all form submissions (beyond the specific form I want to track) be tracked as conversions?

Also, why don't you recommend using TY pages for tracking?

Thanks!

- Ines

0 Upvotes
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

LinkedIn Insight Tag : Add specific event code

SOLVE

Correct - anything added via a global event listener/handler would fire for all forms - unless you wrote a condition into the listener for specific form GUIDs.

 

Re: why I don't think TY page tracking is wise:
I've seen it bite marketing teams in the behind often, you want to tie your conversion as close to the action as possible, a TY page visit after submitting a form introduces a lot of possibilities for false positive scenarios. The "conversion" is the submission - not the page being viewed. Also - if you aren't using clean and organized TY page url patterns it can get out of hand quickly - especially if you do A/B testing on TY page experiences.

TL;DR;
Thank you pages are good for user experience - but are fundamentally flawed as an approach to scalable and accurate conversion tracking.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
IAscenso
Participant

LinkedIn Insight Tag : Add specific event code

SOLVE

Thanks!


@derekcavaliero wrote:

Correct - anything added via a global event listener/handler would fire for all forms - unless you wrote a condition into the listener for specific form GUIDs.


Could you please tell me how to do that?

Thanks again!

0 Upvotes
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

LinkedIn Insight Tag : Add specific event code

SOLVE

Using a placeholder value for the specific form GUID of xxxxyyyy-zzzz-aaaa-bbbb-ccccddddeeee

 

 

<script>
window.addEventListener('message', function(message){

  // Only listen for HubSpot Form Messages - otherwise early return.
  if (message.data.type !== 'hsFormCallback') return; 

  // the GUID of the form sending the message.
  var formGuid = message.data.id; 

  // Ensure you're listening to the onFormSubmit event
  if (message.data.eventName === 'onFormSubmit') {
    
    // Do something for a specific form submission
    if (formGuid == 'xxxxyyyy-zzzz-aaaa-bbbb-ccccddddeeee') {
      // do something here
    }
 
  }

});
</script>

 

 

Full disclosure, I would highly advise sending the data in an abstract dataLayer event to something like GTM (Google Tag Manager) instead of implementing the conversion code directly into the site.

 

For example you could emit an event to GTM's dataLayer like so:

 

dataLayer.push({
  event: 'hubspot.form_submit',
  form: {
    id: formGuid // Assuming you have message.data.id stored in a separate variable.
  }
});

 

 

From there, you woud create a dataLayer variable to grab the form.id value, and then create a custom event trigger that looks for both the event hubspot.form_submit and a specific value to the variable storing the form id. That allows you to have better debugging tools at your disposal via GTM.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
0 Upvotes
MKl
Participant

LinkedIn Insight Tag : Add specific event code

SOLVE

Hi Derek,

 

This is exactly what I'm trying to do: 

Conversion tracking w/ HubSpot forms gets a bit more tricky as it will likely involve setting up custom javascript event listeners if you aren't using thank you pages (I don't recommend using TY pages for tracking regardless).

 

I'm a novice in code and HTML, can you help me figure out how to do this with the custom javascript event listeners? 

 

Thank you!!

-Marla

0 Upvotes
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

LinkedIn Insight Tag : Add specific event code

SOLVE

@VGalvis do you need to implement the main tracking script (insight tag) that LinkedIn provides? Or are you trying to implement a conversion event pixel/tag to track form submissions/leads for your campaigns?

 

If its the former - I would highly recommend using something like Google Tag Manager to implement all website tracking code to keep it in an easily auditable and accessible place. If you don't want to spend the time migrating all your tracking to a GTM container - you can add the LinkedIn Insight Tag into the header or footer code output in the pages settings for the particular domain for your portal.

 

Conversion tracking w/ HubSpot forms gets a bit more tricky as it will likely involve setting up custom javascript event listeners if you aren't using thank you pages (I don't recommend using TY pages for tracking regardless).

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

LinkedIn Insight Tag : Add specific event code

SOLVE

Depending on what you're trying to do - I may have a solution for you. Send me a direct message and maybe I can help you out.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
0 Upvotes
VGalvis
Member

LinkedIn Insight Tag : Add specific event code

SOLVE

Hi Derek,

 

I need to install a LinkedIn Insight Tag in Hubspot to have a better tracking of the campaigns made in LinkedIn, linked to the Hubspot landing pages. Can you help me? I don't know where to insert the tag.

 

Thanks,

Vanessa

0 Upvotes
MauleeChainani
Member

LinkedIn Insight Tag : Add specific event code

SOLVE

Hi Derek,

 

I am trying to understand how to add event-specific LinkedIn Insights tag to CTA on my landing page. Can you please elaborate on it? 

 

Many Thanks,

0 Upvotes