1 | # `@shopify/react-tracking-pixel`
|
2 |
|
3 | [![Build Status](https://travis-ci.org/Shopify/quilt.svg?branch=master)](https://travis-ci.org/Shopify/quilt)
|
4 | [![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)
|
5 |
|
6 | Allows React apps to easily embed tracking pixel iframes.
|
7 |
|
8 | ## Installation
|
9 |
|
10 | ```bash
|
11 | $ yarn add @shopify/react-tracking-pixel
|
12 | ```
|
13 |
|
14 | ## Usage
|
15 |
|
16 | This library exports a `<TrackingPixel />` component, which allows React apps to easily embed tracking pixel iframes.
|
17 |
|
18 | ### Basic Example
|
19 |
|
20 | ```jsx
|
21 | import TrackingPixel from 'react-tracking-pixel';
|
22 |
|
23 | // ...
|
24 |
|
25 | const myurl = 'myurl';
|
26 |
|
27 | <TrackingPixel url={myurl} />;
|
28 | ```
|
29 |
|
30 | ### With Proconnected Hosts
|
31 |
|
32 | ```jsx
|
33 | import TrackingPixel from 'react-tracking-pixel';
|
34 |
|
35 | // ...
|
36 |
|
37 | const myurl = 'myurl';
|
38 | const myhosts = ['example.com', 'moreexamples.com'];
|
39 |
|
40 | <TrackingPixel url={myurl} preconnectHosts={myhosts} />;
|
41 | ```
|
42 |
|
43 | ## Interface
|
44 |
|
45 | ```typescript
|
46 | export interface Props {
|
47 | url: string;
|
48 |
|
49 | /**
|
50 | * Additional hosts to preconnect to. These should be hosts that
|
51 | * are connected to by the page that will be loaded in an iframe.
|
52 | */
|
53 | preconnectHosts?: string[];
|
54 | }
|
55 | ```
|