Pinterest Tag and Conversions API PWA Studio for Magento Adobe Commerce

Compatible with Magento v2 Adobe Commerce - Open Source (CE), Commerce on-prem (EE), and Commerce on Cloud (ECE)!

Provides Apptrian Pinterest Tag and Conversions API extension functionality to PWA Studio (Venia) storefront. Requires both the original (base) extension and the GraphQL (add-on) extension to be installed. Adds Pinterest Tag (Pinterest Pixel) and Pinterest API for Conversions (Pinterest Conversions API / Pinterest Server-Side API) with standard events on appropriate pages. Supports Enhanced Match and has the ability to add custom parameters. Easy to install and use.

The Pinterest Tag (Pinterest Pixel) is a piece of JavaScript code for your website that enables you to measure, optimize and build audiences for your ad campaigns. Using the Pinterest pixel, you can leverage the actions people take on your website across devices to inform more effective Pinterest advertising campaigns.

The Pinterest API for Conversions (Pinterest Conversions API / Pinterest Server-Side API) (for web) allows advertisers to send web events from their servers directly to Pinterest. Server-side events are linked to a pixel and are processed like browser pixel events. This means that server-side events are used in measurement, reporting, and optimization in the same way as browser pixel events.

Optionally Pinterest Tag block can be added to any other Magento page or any other extension page (blogs, form pages, etc.) via our extension config by typing the page handle (full action name). The Pinterest Tag allows you to place a single pixel on your entire website to report conversions, build audiences and get rich insights into how people use your website.

Conversion measurement lets you track actions people take after viewing your Pinterest Ads across multiple devices, including mobile phones, tablets, and desktop computers. By creating a Pinterest Tag and adding it to the pages of your website where conversions happen, like the checkout page, you will see who converts as a result of your Pinterest Ads. The pixel will continue to monitor the actions people take after clicking on your ad. You can see which device they saw the ad on and which device they ultimately converted on.

Compatible with PWA Studio (Venia) frontend without the need for any additional coding. It works out of the box.

Account & Pricing

To use this extension, a free Pinterest Ads Manager account is required.

NOTE: Pinterest Advertising service is not free; additional charges apply to users running Pinterest Ad Campaigns.

Features

Pinterest Tag (Pinterest Pixel)

• An easy way to enable or disable Pinterest Tag.
• Optimized loading of the base code.
• Enhanced Match
• Works out of the box just type your Pinterest Tag ID (or comma-separated IDs for multipixel setups) in our extension config.
• Option to type page handles (full action names) where you want Pinterest Tag. Using this option Pinterest Tag can be added to any other Magento page or any other extension page (blogs, form pages, etc.).
• Option to enable or disable Pinterest Tag base code.
• Option to enable or disable Pinterest Tag noscript tag.
• Option to enable or disable Pinterest Tag first-party cookies.
• Option to enable or disable Pinterest Tag metadata enrichment.
• Individual options to enable or disable AddToCart, AddToWishlist, Signup, InitiateCheckout, Lead, Checkout, Search, PageVisit, and ViewContent events.
• Option to fire Lead event with other events: Signup, InitiateCheckout, Checkout, Search, PageVisit, and ViewContent.
• Options to detect selected SKU for configurable products.

Pinterest API for Conversions (Pinterest Conversions API / Pinterest Server-Side API)

• An easy way to enable or disable Pinterest API for Conversions (Pinterest Conversions API / Pinterest Server-Side API).
• Enhanced Match
• Option to type your Pinterest Access Token in our extension config.
• Option to type your Pinterest Ad Account ID in our extension config.
• Option to type your Pinterest API Version in our extension config.
• Option to type your Test Event Code in our extension config.
• Option to log server-side fired events in the Magento log file.
• Individual options to enable or disable AddToCart, AddToWishlist, Signup, InitiateCheckout, Lead, Checkout, Search, PageVisit, and ViewContent events.
• Option to fire Lead event with other events: Signup, InitiateCheckout, Checkout, Search, PageVisit, and ViewContent.
• Options to detect selected SKU for configurable products.

Category (Category Page)

• Option to type page handles (full action names) where you want category-related code.
• Option to type the event name you want to use for category tracking.
• Options to add custom parameters to your category-related event with parameters to attributes mapping. Example: product_category=name|google_product_category=google_product_category. The format is simple param1=attribute1|param2=attribute2 Pinterest Tag custom parameter and Magento category attribute are connected by = sign and pairs are separated by | sign.

Product (Product Page - AddToCart, AddToWishlist, PageVisit, ViewContent Events)

• Option to type page handles (full action names) where you want product-related code.
• Option to select SKU you want to use for bundle products. Options: Product SKU as (id), Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for configurable products. Options: Product SKU as (id), Child SKU as (id), Child SKU as (id) and Product SKU as (item_group_id)
• Option to select SKU you want to use for downloadable products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for grouped products. Options: Product SKU as (id), Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for simple products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for virtual products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Options to add custom parameters to your product-related events with parameters to attributes mapping. Example: product_category=product_category|google_product_category=google_product_category|color=color. The format is simple param1=attribute1|param2=attribute2 Pinterest Tag custom parameter and Magento product attribute are connected by = sign and pairs are separated by | sign.

Quote (Checkout Page - InitiateCheckout Event)

• Option to type page handles (full action names) where you want quote-related code.
• Option to select SKU you want to use for bundle products. Options: Product SKU as (id), Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for configurable products. Options: Product SKU as (id), Child SKU as (id), Child SKU as (id) and Product SKU as (item_group_id)
• Option to select SKU you want to use for downloadable products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for grouped products. Options: Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for simple products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for virtual products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to type parameter name if you want to use Magento quote ID.
• Options to add custom parameters to your quote-related event with parameters to attributes mapping. Example: product_category=product_category|google_product_category=google_product_category|color=color. The format is simple param1=attribute1|param2=attribute2 Pinterest Tag custom parameter and Magento product attribute are connected by = sign and pairs are separated by | sign.

Order (Checkout Success Page - Checkout Event)

• Option to type page handles (full action names) where you want order-related code.
• Option to select SKU you want to use for bundle products. Options: Product SKU as (id), Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for configurable products. Options: Product SKU as (id), Child SKU as (id), Child SKU as (id) and Product SKU as (item_group_id)
• Option to select SKU you want to use for downloadable products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for grouped products. Options: Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for simple products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for virtual products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to type parameter name if you want to use Magento order ID.
• Option to type parameter name if you want to use Magento order increment ID.
• Option to type parameter name if you want to use Magento quote ID.
• Options to add custom parameters to your order-related event with parameters to attributes mapping. Example: product_category=product_category|google_product_category=google_product_category|color=color. The format is simple param1=attribute1|param2=attribute2 Pinterest Tag custom parameter and Magento product attribute are connected by = sign and pairs are separated by | sign.

Search (Search Result Page - Search Event)

• Option to type page handles (full action names) where you want search-related code.
• Option to type the event name you want to use for search tracking.
• Option to type the parameter name you want to use for search tracking.
• Option to type request parameters you want to include for search tracking.

Miscellaneous

• Option to select Pinterest product identifier. Magento product SKU (Recommended) or Magento product ID.
• Option for Enhanced Match data mapping. Example: external_id=external_id|em=em|ph=ph. The format is simple param1=key1|param2=key2 Pinterest parameter and data key are connected by = sign and pairs are separated by | sign. Available customer data keys are: em, ph, fn, ln, ge, db, ct, st, zp, country, and external_id.
• Option to enable Limited Data Processing.
• Option to type the page event alternative. The page event does not exist in Conversions API. Alternative events are lead or custom.
• Options to connect default Magento "Cookie Restriction Mode" cookie or any third-party cookie consent extension or theme customization via the following options: Enable Cookie Consent, Consent Cookie Name, Consent Cookie Key, Consent Cookie Value, and Consent Button.

Installation Instructions

This extension is not a standalone extension. It is an add-on extension. Requires both original (base) extension and GraphQL (add-on) extension. Please do not attempt to install it before the required extensions. Once you installed both the original (base) extension and GraphQL (add-on) extension, you may proceed.

There are several ways you can install any Magento extension. Our extension is no different. We will show you three ways to install the extension, but you must not mix them. Choose one and stick to it.

If you do not know how to install an extension or you wish a professional to do it for you, we offer an additional installation service for a small fee.

Installation via file uploading
(If you purchased the extension on our site)

Step 1. Backend installation instructions

If you purchased the extension on our site, unpack the .zip file from /Magento2/InstallByUploadingFiles/ directory inside your Magento root.
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

php bin/magento module:enable --clear-static-content Apptrian_PinterestTagApiPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/app/code/Apptrian/PinterestTagApiPwaStudio/pwa-studio/@apptrian, or if you do not have access to this directory, it is also in a .zip file you downloaded in Step 1.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/pinterest-tag-and-conversions-api-pwa-studio extensions/@apptrian/pinterest-tag-and-conversions-api-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/pinterest-tag-and-conversions-api-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/pinterest-tag-and-conversions-api-pwa-studio

Installation via Composer
(If you purchased the extension on our site)

Step 1. Backend installation instructions

If you purchased the extension on our site and you want to install the extension via composer public and private keys. (To find your public and private keys, login to your Apptrian.com customer account and look at the My Downloadable Products section.)
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

composer config --auth http-basic.packages.apptrian.com $PUBLIC_KEY $PRIVATE_KEY

composer config repositories.apptrian-pinterest-tag-and-conversions-api-pwa-studio composer https://packages.apptrian.com/pinterest-tag-and-conversions-api-pwa-studio/

composer require apptrian/pinterest-tag-and-conversions-api-pwa-studio

php bin/magento module:enable --clear-static-content Apptrian_PinterestTagApiPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/vendor/apptrian/pinterest-tag-and-conversions-api-pwa-studio/pwa-studio/@apptrian, or if you do not have access to this directory, it is also in a .zip file you can download from your account on our site in the My Downloadable Products section.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/pinterest-tag-and-conversions-api-pwa-studio extensions/@apptrian/pinterest-tag-and-conversions-api-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/pinterest-tag-and-conversions-api-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/pinterest-tag-and-conversions-api-pwa-studio

Installation via Composer
(If you purchased the extension on Adobe Commerce Marketplace)

Step 1. Backend installation instructions

If you purchased the extension on Adobe Commerce Marketplace then you must use Composer. Adobe Commerce Marketplace does not allow extension downloads.
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

composer require apptrian/pinterest-tag-and-conversions-api-pwa-studio

php bin/magento module:enable --clear-static-content Apptrian_PinterestTagApiPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Please make sure your Magento public and private keys are in your Magento root auth.json file. Usually, people install Magento with one Adobe Commerce Marketplace account (public and private keys) and then purchase an extension with another Adobe Commerce Marketplace account (different public and private keys). Check the Adobe Commerce Marketplace account you used to purchase the extension and make sure its public and private keys are in the Magento root auth.json file. WARNING! If you already have keys there, be very careful because maybe some other extensions are purchased with another Adobe Commerce Marketplace account.

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/vendor/apptrian/pinterest-tag-and-conversions-api-pwa-studio/pwa-studio/@apptrian, or if you do not have access to this directory, use composer to download the package to your computer. If you get stuck, use the contact form on our site and provide your order number and full name as it is on order, and we will provide you with further instructions.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/pinterest-tag-and-conversions-api-pwa-studio extensions/@apptrian/pinterest-tag-and-conversions-api-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/pinterest-tag-and-conversions-api-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/pinterest-tag-and-conversions-api-pwa-studio

Configuration

Our extension works out of the box. If you want to configure it differently log to your Magento Admin and go to:

Stores > Configuration > Apptrian Extensions > Pinterest Tag and Conversions API

There are more than several options for customization. They are all self-explanatory and have comments and tooltips.

After changing options make sure you refresh your Magento cache.

FAQ

Q: In the Pinterest Tag Helper extension for Chrome, I get "Warning - This event was sent via POST request. This is normal with large event data, but parsing event data for POST requests in Tag Helper is not supported. This does not indicate an issue with setup."?
A: This is a deficiency of a Pinterest Tag Helper extension for Chrome, not our extension. You can ignore this.

Q: Why is the Pinterest Tag Helper extension for Chrome reporting "More than one event was found for X" (where X is any of the Pinterest standard or custom events)?
A: The Pinterest Tag Helper extension for Chrome does not work well with PWA/SPA applications. In PWA/SPA applications, there is no reload of the web page when navigating from one page to another. As a result, the Pinterest Tag Helper extension for Chrome retains previously fired events in its panel. This is a deficiency in the Pinterest Tag Helper extension for Chrome, not in our implementation of Pinterest Tag.

Q: Why is the console reporting "Pinterest Tag Error: 'load' command was called multiple times."?
A: The Pinterest load function does not work well with PWA/SPA applications. In PWA/SPA applications, there is no reload of the web page when navigating from one page to another. As a result, whenever customer data changes (a new customer creates an account or logs in to an existing account), the Pinterest load function must be called with the new updated customer data. Since there are no page reloads in PWA/SPA applications, the load function is executed multiple times. This should not be reported by Pinterest as an error for PWA/SPA applications. We tested the real Pinterest Tag and Conversions API, and there is no error in the Pinterest Business account. The Conversions are reported properly without any issue. You can ignore this console log.

Q: Does the extension work with multi-store setups?
A: Yes, it does work with multi-store setups. It functions in the same way as the core Magento modules, and it is fully automated.