hamlogic / nuxt-linkedin-insight-tag

Add Linkedin Insight Tag to your nuxt.js application.
https://hamjs.com
MIT License
4 stars 0 forks source link

Cannot read properties of undefined (reading 'linkedin') #2

Open telisjok opened 7 months ago

telisjok commented 7 months ago

I am getting the error ERROR Cannot start nuxt: Cannot read properties of undefined (reading 'linkedin')

The error is coming from this file

image

Any ideas?

jieverson commented 5 months ago

Hi, have you found an answer? I'm having he same problem on nuxt 3.

telisjok commented 4 months ago

Hey @jieverson , I was neither able to solve it nor use the library, therefore, I injected the linkedin script in the nuxt.config.ts, see below.

export default defineNuxtConfig({
  extends: "../../packages/shared",
  app: {
    head: {
      script: [
        {
          hid: "linkedin",
          children: `_linkedin_partner_id = your_id_here;
          window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
          window._linkedin_data_partner_ids.push(_linkedin_partner_id);
          (function(l) {
          if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])};
          window.lintrk.q=[]}
          var s = document.getElementsByTagName("script")[0];
          var b = document.createElement("script");
          b.type = "text/javascript";b.async = true;
          b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
          s.parentNode.insertBefore(b, s);})(window.lintrk);`,
          type: "text/javascript",
        },
      ],
      noscript: [
        {
          children: `<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=2051066&fmt=gif" />`,
          body: true,
        },
      ],
    },
  },
});
jieverson commented 4 months ago

Hi @telisjok , Nice to know! I also tried a different solution. To be honest, I think I liked your solution better, but this was what I did:

I ended up creating a Nuxt Plugin ~/plugins/linkedinInsightTag.ts with the code:

export default defineNuxtPlugin((nuxtApp) => {
    if (typeof window !== 'undefined') {
        window._linkedin_partner_id = "7198XXX";
        window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
        window._linkedin_data_partner_ids.push("7198XXX");

        (function(){var s = document.getElementsByTagName("script")[0];
        var b = document.createElement("script");
        b.type = "text/javascript";b.async = true;
        b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
        s.parentNode.insertBefore(b, s);})();
    }
});

I also added the img object at my ~/app.vue

<template>
  <NuxtLoadingIndicator />
  <div class="antialiased">
    <NuxtPage />
    <UNotifications />
  </div>

  <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=7198XXX&fmt=gif" />
</template>

The Insight Tag got verified and everithing seem to be working great. The only problem I found is that I started getting a javascript error at my Chrome Console:

❌Attestation check for Topics on https://xxxxxxx.com/ failed.

The error doesn't break anything, and just happens at Google Chrome. Any change you are also getting it?