{"id":25930189,"url":"https://github.com/szymonexis/ngx-meta-pixel","last_synced_at":"2026-05-07T20:46:05.295Z","repository":{"id":278657500,"uuid":"936353847","full_name":"Szymonexis/ngx-meta-pixel","owner":"Szymonexis","description":"ngx-meta-pixel","archived":false,"fork":false,"pushed_at":"2025-02-21T00:45:53.000Z","size":315,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"latest","last_synced_at":"2025-02-21T01:19:21.385Z","etag":null,"topics":["angular","facebook","facebook-pixel","meta","meta-pixel","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-meta-pixel","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Szymonexis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-21T00:02:22.000Z","updated_at":"2025-02-21T01:03:12.000Z","dependencies_parsed_at":"2025-02-21T01:19:29.006Z","dependency_job_id":"045f2f8f-0250-4d42-bd07-c4af0e75be4a","html_url":"https://github.com/Szymonexis/ngx-meta-pixel","commit_stats":null,"previous_names":["szymonexis/ngx-meta-pixel"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Szymonexis%2Fngx-meta-pixel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Szymonexis%2Fngx-meta-pixel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Szymonexis%2Fngx-meta-pixel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Szymonexis%2Fngx-meta-pixel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Szymonexis","download_url":"https://codeload.github.com/Szymonexis/ngx-meta-pixel/tar.gz/refs/heads/latest","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241753170,"owners_count":20014251,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","facebook","facebook-pixel","meta","meta-pixel","typescript"],"created_at":"2025-03-03T23:00:57.833Z","updated_at":"2026-05-07T20:46:05.290Z","avatar_url":"https://github.com/Szymonexis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgxMetaPixel\n\nThis package enables you to setup Meta Pixel for your Angular application.\n\n## Versioning\n\n| ngx-meta-pixel version | supported Angular version |\n| ---------------------- | ------------------------- |\n| ^16.0.0                | ^16.0.0                   |\n| ^17.0.0                | ^17.0.0                   |\n| ^18.0.0                | ^18.0.0                   |\n| ^19.0.0                | ^19.0.0                   |\n| ^20.0.0                | ^20.0.0                   |\n\n## Installation\n\n```bash\nnpm install --save ngx-meta-pixel\n```\n\n## Quickstart\n\n### Standalone applications (Angular \u003e= 17.0.0)\n\nIf you are using standalone components, import the service and provide NgxMetaPixel providers with `provideNgxMetaPixel` environment provider function.\n\nIn your application-level configuration file (`app.config.ts` or `main.ts` in older Angular versions), add the `provideNgxMetaPixel` environment provider:\n\n```typescript\nimport { provideNgxMetaPixel } from \"ngx-meta-pixel\";\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    // ... other environment providers\n\n    provideNgxMetaPixel({\n      pathToMetaPixelHtml: \"assets/meta-pixel.html\",\n    }),\n  ],\n};\n```\n\nYou need to provide the function with the path of the html file containing the script and noscript tags for configuring through the `pathToMetaPixelHtml` attribute from the `NgxMetaPixelConfiguration` parameter.\n\n```typescript\nexport interface NgxMetaPixelConfiguration {\n  enabled?: boolean;\n  pathToMetaPixelHtml?: string;\n}\n```\n\n**Tracking is disabled at application start by default**, if you want to enable it automatically, set the `enabled` attribute to `true` in the configuration parameter or follow GDPR complience by implementing proper behavior. See more about GDPR compliant code in a section below.\n\n### Modular applications (Angular \u003c 17.0.0)\n\nAdd the `NgxMetaPixelModule` the the `AppModule` of your app:\n\n```typescript\nimport { NgxMetaPixelModule } from \"ngx-meta-pixel\";\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    HttpClientModule,\n    NgxMetaPixelModule.forRoot({ enabled: true, pathToMetaPixelHtml: 'assets/meta-pixel.html'  }),\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n### Standalone with module (Angular \u003e= 17.0.0)\n\nUsing standalone components, you can still import `NgxMetaPixelModule` the old way with Modules:\n\n```typescript\nimport { NgxMetaPixelModule } from \"ngx-meta-pixel\";\n\n@Component({\n  // ...\n  imports: [\n    NgxMetaPixelModule.forRoot({\n      enabled: true,\n      pathToMetaPixelHtml: \"assets/meta-pixel.html\",\n    }),\n  ],\n})\nexport class AppComponent {\n  // ...\n}\n```\n\n## Usage\n\n### Changes within the Meta provided Pixel code\n\nMeta provides users with pixel code similar to this:\n\n```html\n\u003c!-- Meta Pixel Code --\u003e\n\u003cscript\u003e\n  !(function (f, b, e, v, n, t, s) {\n    if (f.fbq) return;\n    n = f.fbq = function () {\n      n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);\n    };\n    if (!f._fbq) f._fbq = n;\n    n.push = n;\n    n.loaded = !0;\n    n.version = \"2.0\";\n    n.queue = [];\n    t = b.createElement(e);\n    t.async = !0;\n    t.src = v;\n    s = b.getElementsByTagName(e)[0];\n    s.parentNode.insertBefore(t, s);\n  })(window, document, \"script\", \"https://connect.facebook.net/en_US/fbevents.js\");\n  fbq(\"init\", \"\u003cYOUR_PIXEL_ID_HERE\u003e\");\n  fbq(\"PageView\");\n\u003c/script\u003e\n\u003cnoscript\u003e\n  \u003cimg height=\"1\" width=\"1\" style=\"display: none\" src=\"https://www.facebook.com/tr?id=\u003cYOUR_PIXEL_ID_HERE\u003e\u0026ev=PageView\u0026noscript=1\" /\u003e\n\u003c/noscript\u003e\n\u003c!-- End Meta Pixel Code --\u003e\n```\n\nYou will need to do a total of three changes within this code:\n\n1. Add an `id=\"meta-pixel-script\"` attribute to the `script` tag\n2. Add an `id=\"meta-pixel-noscript\"` attribute to the `noscript` tag\n3. Delete any `fbq` function calls except the `fbq(\"init\", \"\u003cYOUR_PIXEL_ID_HERE\u003e\")` from the `script` tag\n\nThen place the resulting html code in your assets directory or host it somewhere and provide relevant link to the `ngx-meta-pixel` as shown below.\n\n### Standard events\n\n```typescript\nimport { NgxMetaPixelService, NgxMetaPixelEventProperties, NgxMetaPixelEventName } from \"ngx-meta-pixel\";\n\n@Component({\n  // ...\n})\nexport class SomeComponent {\n  constructor(private readonly _ngxMetaPixelService: NgxMetaPixelService) {}\n  // ...\n\n  onSomeAction() {\n    const eventName: NgxMetaPixelEventName = \"PageView\";\n    const properties: NgxMetaPixelEventProperties = {\n      // ...\n    };\n\n    this._ngxMetaPixelService.track(eventName, properties);\n  }\n}\n```\n\n### Custom events\n\n```typescript\nimport { NgxMetaPixelService } from \"ngx-meta-pixel\";\n\n@Component({\n  // ...\n})\nexport class SomeComponent {\n  constructor(private readonly _ngxMetaPixelService: NgxMetaPixelService) {}\n  // ...\n\n  onSomeAction() {\n    const eventName: string = \"MyCustomEvent\";\n    const properties: object = {\n      foo: \"bar\",\n      baz: 42,\n    };\n\n    this._ngxMetaPixelService.trackCustom(eventName, properties);\n  }\n}\n```\n\n### Removing the script\n\n```typescript\nimport { NgxMetaPixelService } from \"ngx-meta-pixel\";\n\n@Component({\n  // ...\n})\nexport class SomeComponent {\n  constructor(private readonly _ngxMetaPixelService: NgxMetaPixelService) {}\n  // ...\n\n  onSomeAction() {\n    this._ngxMetaPixelService.remove();\n  }\n}\n```\n\n### Flow for GDPR compliant applications\n\nFirst initialize the `NgxMetaPixelModule` with the `enabled` fprop set to `false`:\n\n```typescript\nimport { NgxMetaPixelModule } from \"ngx-meta-pixel\";\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    HttpClientModule,\n    NgxMetaPixelModule.forRoot({ enabled: false, pathToMetaPixelHtml: 'assets/meta-pixel.html'  }),\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\nThen ask user for permission to track their activity using the Meta Pixel:\n\n```typescript\nimport { NgxMetaPixelService } from \"ngx-meta-pixel\";\n\n@Component()\n// ...\nexport class AppComponent {\n  constructor(private readonly _ngxMetaPixelService: NgxMetaPixelService) {}\n\n  onUserAgreement() {\n    this._ngxMetaPixelService.initialize();\n\n    // you can also call this function with the path provided - this will\n    // overwrite the `NgxMetaPixelModule.forRoot()` path, if provided\n    this._ngxMetaPixelService.initialize(\"assets/meta-pixel.html\");\n  }\n}\n```\n\n## Credits\n\nBased on the [ngx-multi-pixel](https://www.npmjs.com/package/ngx-multi-pixel) package by [Abhinav Akhil (abhinavakhil)](https://www.npmjs.com/~abhinavakhil)\n\n- [tiagosantini](https://github.com/tiagosantini) for help with v18\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszymonexis%2Fngx-meta-pixel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fszymonexis%2Fngx-meta-pixel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszymonexis%2Fngx-meta-pixel/lists"}