x-cq-linkchecker="skip" is breaking adobe-datalayer json

I am disabling link checker so that I can allow broken links and its a business requirement. I have added x-cq-linkchecker="skip" which solves my problem.
But when I add x-cq-linkchecker="skip" to my button component its breaking the adobe data layer json. Here is the screenshot where json is showing extra character. We haven't changed any encoding and other stuffs.

The Problem:

The button component is inherited from core component v1 button. The button component markup is given below:

<div class="example-button--wrapper"
     data-sly-use.button="com.example.aem.models.Button"
     data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
     data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
     data-sly-test="${button.text}">
    <button
        data-sly-element="${button.link ? 'a' : 'button'}"
        type="${button.link ? '' : 'button'}"
        id="${component.id}"
        class="cmp-button  ${(properties.buttonIcon && properties.buttonIcon!='none')?'button-icon relative':''}"
        href="${button.link}"
        x-cq-linkchecker="skip" //this is the only change we have made.
        aria-label="${button.accessibilityLabel}"
        data-cmp-clickable="${button.data ? true : false}"
        data-cmp-data-layer="${button.data.json}">
        <span data-sly-test="${button.text}" class="cmp-button__text">${button.text}</span>
        <sly data-sly-test="${properties.buttonIcon && properties.buttonIcon!='none'}">
            <span class="material-icons">${properties.buttonIcon == 'custom' ? properties.iconName : properties.buttonIcon}</span>
        </sly>
    </button>
</div>
<sly data-sly-call="${templates.placeholder @ isEmpty=!button.text, classAppend='cmp-button-empty'}"></sly>

What could be the possible solution? thanks in advance.