Access function on index.html ( FB Pixel )

Stencil
1

Hi to all, this is my first post/question on the forum.

I have been working with stenciljs for some months now, and It’s an awesome tool ( was my first contact with components )

This is the issue I’m facing right now and I don´t know how to handle it, I will try to be clear!

  1. I’m developing a PWA with Ionic + stenciljs
  2. Implemented the Facebook Pixel code on index.html into as FB recommended
  3. FB is tracking “pageViews” correctly ( the tracking is on index.html tag ) I assume that every “page” visited on the PWA gets that tag

Everything works just fine, the pixel is working, etc…

The problem:
I’m trying to manually add tracking for a button click as this:
on

render() { 
   ...
   <ion-button href={ this.buttonValue } size="default" class="pulse" onClick={ () => this.sendMessage() }><span class="button-subscibirme">ENVIAR MENSAJE</span></ion-button>
   ...
}

The on the export class of my component I try to put:
export class MyComponent {

   ...
     sendMessange () {
       fbq( 'track', 'AddToCart' );
     }
   ...

and I get this message:
image

In index.html tag It’s the function fbq()

image

Also the FB Pixel put this into the 

    <noscript><img height="1" width="1" style="display:none"
        src="https://www.facebook.com/tr?id=2657556234283734&ev=PageView&noscript=1" /></noscript>

Maybe this is what is loaded into every page?

One curious thing: I can place this code in render() and track on the component ( this work )
image

Conclusion: I don´t know how MyComponent ca recognize the fbq() function that it’s added on the index.html

I assume that I’m doing something wrong, and the proper way to add the FB pixel is not directly on the index.html of the ionci+stencil PWA

Please, I just need a little help if someone can point me in the right direction! I’m new to PWA!

thank you, Bruno.