# Integration QA Steps: Conversion

## Conversion QA Checklist

### Reviewing your code

* [ ] [**Verify that subscriptions.js loads**](#verify-subscriptions.js-loads)**:** In order to begin tracking conversion events with Chartbeat, the subscriptions.js script must load on your pages. 
* [ ] [**Verify events are tracked**](#verify-events-are-being-tracked): Review the conversion event ping data being sent to Chartbeat by using your browser's developer tools.

### Conversion Event Guidelines

Review the guidelines below to ensure your conversion events are being fired according to our best practices:

* [ ] **Fire a Chartbeat event on every page in a single conversion flow.** \
  \
  Events with `Shown` or `Complete` in their name should only be fired **once** per conversion flow but those with `Start` or `Cancel` may be called multiple times if needed. \
  \
  Below is an example of a conversion flow that spans multiple pages:<br>

  <table><thead><tr><th>Page Path</th><th width="284">Chartbeat Event Name</th><th>Optional Parameter</th></tr></thead><tbody><tr><td>example.com/articleA</td><td><code>trackPaywallShown</code></td><td><code>eventLabel: 'Modal paywall'</code></td></tr><tr><td>example.com/signup1</td><td><code>trackPaywallStart</code></td><td><code>eventLabel: 'Enter customer info'</code></td></tr><tr><td>example.com/signup2</td><td><code>trackPaywallStart</code></td><td><code>eventLabel: 'Enter payment info'</code></td></tr><tr><td>example.com/signup-complete</td><td><code>trackPaywallComplete</code></td><td><code>eventValue: 100</code></td></tr></tbody></table>

  <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>You can use one of our <a href="#event-parameters">optional parameters</a> – e.g. an <code>eventLabel</code> or <code>eventValue</code> – to distinguish events with the same name.</p></div>

* [ ] **Use the `trackPaywallShown` event on the&#x20;*****article*****&#x20;page associated with a paywall.**\
  \
  The path associated with the `trackPaywallShown` event is used to determine the content a user last viewed prior to a conversion event. <br>

* [ ] **Use events from the same category to track a single conversion flow.**\
  \
  Use the same category when tracking a single conversion. Do not start a conversion flow with `trackPaywallShown` and end with `trackRegistrationComplete`.<br>

* [ ] **Use `trackPaywallComplete` at a place in the code that runs after a successful conversion.** \
  \
  Call `Complete` events after a successful conversion – for all event tracking methods.<br>

* [ ] **Fire Chartbeat events only when you are sure they have occurred.**\
  \
  If you fire an event e.g. `trackPaywallComplete` on page load, make sure you account for edge cases. If users can visit that page directly, your logic should first check that the user is completing a paywall flow by, for example, checking the referrer or the user's subscriber status<br>

* [ ] **Fire Chartbeat events only on your site's domain.** \
  \
  Some conversion pages, like checkout pages, are hosted on separate domains. If a conversion event occurs on a separate domain, the corresponding Chartbeat `Complete` event should be called on your domain's article page, **after** the user is redirected from the checkout page. \
  \
  Below is an example of a conversion flow that includes pages hosted on a separate domain:<br>

  | Page Path                    |    Chartbeat Event Name    |
  | ---------------------------- | :------------------------: |
  | example.com/articleA         |     `trackPaywallShown`    |
  | example.com/signup1          |     `trackPaywallStart`    |
  | payment.com/example-checkout | :x: *DO NOT FIRE AN EVENT* |
  | example.com/articleA         |   `trackPaywallComplete`   |

### Verify subscriptions.js loads

In order to track events with Chartbeat, the subscriptions.js script must load first. Use your browser's developer tools to confirm that it is loading.

Select the **Network** tool and filter for `subscriptions.js`:

<figure><img src="https://225322705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYD2YiVXfNNRnSgJXb4%2Fuploads%2FqnUiKqB9WrkYEBgiI6yu%2Fimage.png?alt=media&#x26;token=669618bf-07ca-449d-9876-4578b30552c7" alt="" width="563"><figcaption></figcaption></figure>

### Verify events are being tracked

Conversion data is sent via a ping request to Chartbeat, you can review the data being sent by using using your browser's developer tools:\
\
Select **Network** and filter for `conversion_event` :

<figure><img src="https://225322705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYD2YiVXfNNRnSgJXb4%2Fuploads%2F3Uh1xpsFwbTjJAmIxr1j%2Fimage.png?alt=media&#x26;token=8687f1d3-f974-4ef9-b39d-40a1929a1e6d" alt="" width="563"><figcaption></figcaption></figure>

Click **Payload** and review the query string parameters. Verify that the values match what you intended to send.

| Parameter | Value                           |
| --------- | ------------------------------- |
| p         | path                            |
| h         | siteID or host                  |
| d         | actual domain                   |
| cec       | event category (e.g. `paywall`) |
| cet       | event type (e.g. `shown`)       |
| cel       | event label                     |
| cev       | event value                     |

{% hint style="info" %}
If you are using the optional `pathOverride` parameter, make sure to check that the `p`  parameter contains the `pathOverride` value. Otherwise `p` should match the article's page path that you're sending to Chartbeat in your [standard configuration](https://docs.chartbeat.com/cbp/tracking/standard-websites/our-javascript).
{% endhint %}

## Using Debug Mode

When debug mode is enabled for each event, the event details will display in the console.&#x20;

**Enable Debug Mode for an Event:** Add the `debug` parameter set to `true` for an event method to print the event configuration to the console. This will only print to the console if a ping was successfully sent to Chartbeat.&#x20;

```
chartbeat('trackPaywallStart', {
    debug: true
})
```

In your browsers's developer tools, select **Console** to find your event debug details:

<figure><img src="https://225322705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYD2YiVXfNNRnSgJXb4%2Fuploads%2FDKMQV9BVJJDkbBqFBXhn%2Fimage.png?alt=media&#x26;token=b9c29189-73ad-4381-bfe2-6a1bf6fcbd41" alt="" width="563"><figcaption></figcaption></figure>

## Implementation Review

Our Implementation Review dashboard lets Admin users view data snapshots from the latest full calendar day we have on hand. The [Conversions Audit tab](https://chartbeat.com/publishing/settings/implementation-review/conversions) provides a way to verify correct Conversion implementation and to help self-diagnose data discrepancies or issues.

#### To access Implementation Review:

1. [**Sign in**](https://help.chartbeat.com/hc/en-us/articles/360017718093) to your Chartbeat account.
2. Navigate to Settings from the menu top right-head
3. Click the Implementation Review pages on the left side menu
4. Navigate to the Conversions Audit Tab

{% hint style="warning" %}
**Tip:** If you cannot access the Implementation Review, verify with your organization if your account has the required Admin role. &#x20;
{% endhint %}

## Next Steps

Read through the next article in this guide to review a list of **supported conversion flows**