Wordpress plugin script double ID attribute

Develop, Build & Integrate APIs & Integrations
1

Hello,

We are using Wordpress plugin for Hubspot (HubSpot All-In-One Marketing - Forms, Popups, Live Chat)

And that plugin adds a Javascript to our pages, like :

<script async defer id="hs-script-loader" type='text/javascript' src='//js.hs-scripts.com/2470523.js?integration=WordPress' id='leadin-script-loader-js-js'></script>

There are 2 id attributes in this script:

  1. hs-script-loader
  2. leadin-script-loader-js-js

First one comes from

leadin/src/class-assetsmanager.php (enqueue_script_loader function)

while second one is from

leadin/src/class-pagehooks.php (add_id_to_tracking_code function)

It doesn’t look good to have 2 ids (even if it des not break anything)

Please fix.

Thank you!

2

Hey @danny_briskin,

I believe the both the id attributes:

  1. hs-script-loader
  2. leadin-script-loader-js-js

are required for the tracking and form to show up successful.

Is there a reason why your team had like to remove either one of the code?

If the intentional is to combine the ids as one, this is currently not possible.

3

Hi @WendyGoh ,

The intention is to have a page that complies HTML standards. W3C validator says “duplicate specification of attribute id”.

It does not sound logical to have it twice. Any parser should ignore second occurence.

4

Hey @danny_briskin,

Just an update from our team!

We understand that having the same attribute twice is technically not correct from the standard point of view.

In the practice, what browsers do is ignoring the second attribute they find while they are parsing the DOM Element. In this case leadin-script-loader-js-js should be ignored by the browser.

While I do not have a deadline, we are aware of this issue and would study the possibility of removing the second id id='leadin-script-loader-js-js' in future releases.

5

I ran into this same issue and I am wondering if there is a reason not to use teh following:

$tag = str_replace( "id='leadin-script-loader-js-js'", "", $tag);

So the code in class-pagehooks.php could become:

$tag = str_replace( '<script', '<script async defer ', $tag );
$tag = str_replace( "id='leadin-script-loader-js-js'", 'id="hs-script-loader"', $tag);

I made the modification via a mu-plugin as follows:

<?php
add_filter( 'script_loader_tag', 'dd_fix_hs_duplicate_id_issue', 20, 3 );

function dd_fix_hs_duplicate_id_issue( $tag, $handle, $src ) {
 if( !class_exists( "\Leadin\AssetsManager" ) )
 return $tag;

 if ( \Leadin\AssetsManager::TRACKING_CODE === $handle ) {
 $tag = str_replace( "id='leadin-script-loader-js-js'", "", $tag);
 }
 return $tag;
}