CTA button embed generates error 'Uncaught ReferenceError: hbspt is not defined'

cokobware · ‎Aug 25, 2020

Problem: clicks aren't registering with Hubspot CTA analytics when embed code is used.

Details: I'm using Vue.js and Nuxt.js to generate my pages. In my page template, I stripped out non-essential code, and only have the embed code for one of my buttons. Here is the page output HTML below:

<!doctype html>
<html data-n-head-ssr>
    <head>
        <title>Imagination Design Studios - </title>
        <meta data-n-head="ssr" charset="utf-8">
        <meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
        <meta data-n-head="ssr" data-hid="description" name="description" content="Meta description">
        <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
        <script data-n-head="ssr" src="//code.jquery.com/jquery-3.5.1.min.js"></script>
        <script data-n-head="ssr" src="//www.googletagmanager.com/gtm.js?id=GTM-PPVQ9LF&l=dataLayer" async></script>
        <link rel="preload" href="/_nuxt/runtime.472c005.js" as="script">
        <link rel="preload" href="/_nuxt/commons.app.4531234.js" as="script">
        <link rel="preload" href="/_nuxt/styles.0a167c8.css" as="style">
        <link rel="preload" href="/_nuxt/styles.096b692.js" as="script">
        <link rel="preload" href="/_nuxt/vendors.app.e81ad0c.js" as="script">
        <link rel="preload" href="/_nuxt/app.d77f0c1.css" as="style">
        <link rel="preload" href="/_nuxt/app.fec8440.js" as="script">
        <link rel="stylesheet" href="/_nuxt/styles.0a167c8.css">
        <link rel="stylesheet" href="/_nuxt/app.d77f0c1.css">
    </head>
    <body>
        <noscript data-n-head="ssr" data-hid="gtm-noscript" data-pbody="true">
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-PPVQ9LF&l=dataLayer" height="0" width="0" style="display:none;visibility:hidden"></iframe>
        </noscript>
        <div data-server-rendered="true" id="__nuxt">
            <!---->
            <div id="__layout">
                <div>
                    <p>Button 1: </p>
                    <span id="hs-cta-wrapper-3fa54181-2a31-4811-b487-0a1347d6f2cb" class="hs-cta-wrapper">
                        <span id="hs-cta-3fa54181-2a31-4811-b487-0a1347d6f2cb" class="hs-cta-node hs-cta-3fa54181-2a31-4811-b487-0a1347d6f2cb">
                            <a href="https://cta-redirect.hubspot.com/cta/redirect/7692378/3fa54181-2a31-4811-b487-0a1347d6f2cb">
                                <img id="hs-cta-img-3fa54181-2a31-4811-b487-0a1347d6f2cb" src="https://no-cache.hubspot.com/cta/default/7692378/3fa54181-2a31-4811-b487-0a1347d6f2cb.png" alt="CLICK TO VIEW PROJECT" class="hs-cta-img" style="border-width:0">
                            </a>
                        </span>
                        <script type="text/javascript">
                            hbspt.cta.load(7692378, "3fa54181-2a31-4811-b487-0a1347d6f2cb", {})
                        </script>
                        <script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script>
                    </span>
                </div>
            </div>
        </div>
        <script>
            window.__NUXT__ = {
                layout: "empty",
                data: [{}],
                fetch: [],
                error: null,
                serverRendered: !0,
                routePath: "/button-test",
                config: {}
            }
        </script>
        <script src="/_nuxt/runtime.472c005.js" defer></script>
        <script src="/_nuxt/commons.app.4531234.js" defer></script>
        <script src="/_nuxt/styles.096b692.js" defer></script>
        <script src="/_nuxt/vendors.app.e81ad0c.js" defer></script>
        <script src="/_nuxt/app.fec8440.js" defer></script>
        <script data-n-head="ssr" src="//js.hs-scripts.com/7692378.js" data-body="true"></script>
    </body>
</html>

I check the hubspot analytics for this CTA and it's not registering the clicks for the page, just the views.

When I look at the page through the debug console in Chrome to see what's going on with the Javascript side of things, I see a 'Uncaught ReferenceError: hbspt is not defined' error. This tells me the embed the way it is written by the Hubspot CTA team does not work with Nuxt.js and Vue.js out of the box. Other reactive frameworks like React and Angular likely would have similar issues.

The Vue page template I'm using looks like this:

<template>
    <div>
        <p>Button 1: </p>
        <!--HubSpot Call-to-Action Code -->
        <span class="hs-cta-wrapper" id="hs-cta-wrapper-3fa54181-2a31-4811-b487-0a1347d6f2cb">
            <span class="hs-cta-node hs-cta-3fa54181-2a31-4811-b487-0a1347d6f2cb" id="hs-cta-3fa54181-2a31-4811-b487-0a1347d6f2cb">
                <!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]-->
                <a href="https://cta-redirect.hubspot.com/cta/redirect/7692378/3fa54181-2a31-4811-b487-0a1347d6f2cb" >
                    <img class="hs-cta-img" id="hs-cta-img-3fa54181-2a31-4811-b487-0a1347d6f2cb" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/7692378/3fa54181-2a31-4811-b487-0a1347d6f2cb.png"  alt="CLICK TO VIEW PROJECT"/>
                </a>
            </span>
            <script type="text/javascript"> hbspt.cta.load(7692378, '3fa54181-2a31-4811-b487-0a1347d6f2cb', {}); </script>
            <script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script>
        </span>
        <!-- end HubSpot Call-to-Action Code -->
    </div>
</template>

<script>
export default {
    
    layout: "empty",

}
</script>

I did some research and there was another thread here that talked about using a Vue.js component and apparently the person had some success, as their solution was quite clever. I tried their approach, and it didn't work for me. So I went with the above vanilla approach and it still didn't work.

I think it's safe to say that the Hubspot CTA is not robust enough to handle modern web development techniques, unless there is something I'm missing.

I would like to get some guidance, support, and a solution by the Hubspot team on how to get this to work correctly in a vanilla situation like I've outlined above, since I need these CTAs to function properly to improve our business.

semonbright · ‎Jan 19, 2021

If you are using any script file and getting "Uncaught ReferenceError:" which means 'x' is either a variable or a method which you are trying to use before declaring it using var keyword. This means that there is a non-existent variable referenced somewhere. This variable needs to be declared, or you need to make sure it is available in your current script or scope otherwise , it will endup throwing this 'x' is not defined error . This usually indicates that your library is not loaded and JavaScript does not recognize the 'x'.

To solve this error: Load your library at the beginning of all your scripts.

There can be multiple other reasons for this issue:

Path to CDN library you included is not correct
The library file is corrupted
Working offline
Conflict with Other Libraries

Derek_Gervais · ‎Aug 26, 2020

Hey @cokobware ,

the "hbspt is not defined" generally means that required scripts aren't being loaded, or loaded before they're called. Are you loading the HubSpot tracking code before the hbspt.cta.load function is called? Are any of the required CTA scripts being lazily loaded?

cokobware · ‎Sep 8, 2020

Hey @Derek_Gervais,

I've reimpelmented my code to load the hbspt component, and I no longer get the error that the reference is uncaught. This is good. However, the clicks still aren't registering, and I'm wondering what mechanisms your code snippets rely on to register the clicks. When I embed the regular code you supply into a plain-jane HTML page, it definitely works. When the code is embedded in a Nuxt.js page, the Click event doesn't register on the analytics side.

What JS function triggers on the click event of the hyperlink that is supplied with the embed code? Is there any code at all that triggers once it's clicked, or is it all captured server side from the URL after the hbspt.cta.load() function has done its magic and rewritten the URL?

APIs & Integrations