Integrating an eCommerce Website with Flashy Using Tag Manager / Client Side Front-End

Flashy features one-click integration, "One-Click-Install", with the following platforms:

If your website is on another platform, one that Flashy does not have direct integration with, or if you wish to execute the integration through Tag Manager or on the client side, you can use the following guide which covers all the steps.

Preliminary Step: Create a Flashy Account and Identify Relevant Assets

To begin integration with Flashy you must have a viable Flashy account, an API key, and a LIST ID.

  •  A guide for creating a Flashy account (you may create an account for running tests
    and then a new account for production).
  •  A guide for identifying an API key.
  •  A guide for identifying the contact list (LIST-ID).

Step 1: Embedding the base pixel


The base Pixel is in your account, you must create a tag in the tag manager that will appear on all your website's pages with the base tag you created. This tag must be titled "Flashy Base Pixel".

Intermediate Notes: enclosing the codes in a function that Flashy is ready to use 


Since Flashy's code is uploaded using JS, and tag manager is used for this, we must always ensure that Flashy's global variable is available to us before we attempt to use it. To inform you when it is available we have added a brief helper that you use it for assistance, to prevent a situation where Flashy's global variable is used before the tag manager has uploaded it and it is ready to be used. 


An Example of the required code can be found here:

https://flashy.app/docs/install-via-google-tag-manager/

For each piece of code, we must create a tag and an event in the tag manager so that the information will be sent. Attached below are all the code pieces for the different events that must be reported. 

Step 2: Adding to Contact List / Creating a Customer

Each time we wish to create a customer on Flashy, whether at a purchase or a subscription, we must send the following event:

https://flashy.app/docs/installation-pixels/#subscribe-contact-to-a-list

Additional parameters can be exported, such as city, state, telephone number, etc. For more information click here – our recommendation is to export first name, last name, telephone number, city, email, and birth date (if available). 

We recommend sending this event when a customer subscribes (at the bottom of the website) to the newsletter, at signup to the private area in your website, and when credit card details are filled in during the purchase process, according to the following logic:

Please note, the LIST-ID must be changed for the list to which we wish to add the customer, if the customer does not consent to receive communications we can still create the customer without adding them to a mailing list, simply by not exporting the LIST-ID, this way a customer profile will be created but they will not be added to a mailing list. We will have all their information so that if they join a mailing list at a later date we will have records of all the actions they carried out on our website. 

Step 3: Users Entering the Private Area

If your system allows entering a private area, sending the following event to Flashy is recommended, so that we will know the identity of the visitor entering the private area:

https://flashy.app/docs/installation-pixels/#set-contact-by-email

Step 4: Sending an Ordinary Website-Page Viewing Event

When a visitor enters an ordinary page on your website (not a product page) the following event should be sent:

https://flashy.app/docs/installation-pixels/#page-view

Step 5: Sending a Product Page Viewing Event

When a visitor enters a product page the following event should be sent:

https://flashy.app/docs/installation-pixels/#view-content

Step 6: Sending Events of Adding / Removing Products from Shopping-Cart (shopping-cart updating)

Every time a change occurs to the content of a customer's shopping cart, whether it's adding a product, changing its quantity, or removing it, the following event should be sent:

https://flashy.app/docs/installation-pixels/#update-cart

Each time we will export the entire cart's content, the IDs of all the products, and the cart's total value. 

(The product's unique ID)

Step 7: Sending a Purchase Event

Once a customer makes a purchase, the following event should be sent with the products purchased, including the total sum paid:

https://flashy.app/docs/installation-pixels/#purchase

Step 8: Creating a Dynamic Product Catalog

A dynamic product feed should be created in JSON/XML/ONLINE CSV form, which can contain the parameters in the table found in the following link:

https://flashy.app/docs/import-products-catalog

Step 9: Tests

It is recommended to go over step after step without skipping any thus checking and cross-referencing with the Flashy interface that the events are sent properly. All tests must be conducted using an anonymous browser.

Once we have assimilated the base pixel and attached the Flashy token, we will expect to see, for instance, that if we activate a popup it will appear.

Regarding step 2 – we shall execute subscriptions in each of the different available possibilities (newsletter, private area, purchase process) and after each subscription, we will go to the Flashy interface and check to see if the contact has been created.

Regarding steps 4-6, we will see the events sent only if the contact is recognized by Flashy's pixel. To do this we can subscribe through a popup on an anonymous browser, which will lead to us being marked, or by adding ourselves in the URL with an email parameter (https://domainame.com/?email={{email}}). Only once we have been marked can we check if each of the events in the steps above works properly.

Regarding step 7 – we will execute purchases using an anonymous browser, and check to see that a contact is created on Flashy with each purchase including all its details, with all the parameters we expect to see.

Regarding step 8 – we shall check within the Flashy interface that the process has been updated and the products synchronized. We shall also make sure, within the Flashy interface itself, that we see in the customer's account the products following a purchase or one of the events in steps 4-6.