UNPKG

1.67 kBMarkdownView Raw
1# `@shopify/react-tracking-pixel`
2
3[![Build Status](https://github.com/Shopify/quilt/workflows/Node-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI)
4[![Build Status](https://github.com/Shopify/quilt/workflows/Ruby-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI)
5[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-tracking-pixel.svg)](https://badge.fury.io/js/%40shopify%2Freact-tracking-pixel.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/react-tracking-pixel.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/react-tracking-pixel.svg)
6
7Allows React apps to easily embed tracking pixel iframes.
8
9## Installation
10
11```bash
12$ yarn add @shopify/react-tracking-pixel
13```
14
15## Usage
16
17This library exports a `<TrackingPixel />` component, which allows React apps to easily embed tracking pixel iframes.
18
19### Basic Example
20
21```jsx
22import TrackingPixel from 'react-tracking-pixel';
23
24// ...
25
26const myurl = 'myurl';
27
28<TrackingPixel url={myurl} />;
29```
30
31### With Proconnected Hosts
32
33```jsx
34import TrackingPixel from 'react-tracking-pixel';
35
36// ...
37
38const myurl = 'myurl';
39const myhosts = ['example.com', 'moreexamples.com'];
40
41<TrackingPixel url={myurl} preconnectHosts={myhosts} />;
42```
43
44## Interface
45
46```typescript
47export interface Props {
48 url: string;
49
50 /**
51 * Additional hosts to preconnect to. These should be hosts that
52 * are connected to by the page that will be loaded in an iframe.
53 */
54 preconnectHosts?: string[];
55}
56```