DERMAPHARM

Configuration
Integration instructions and usage documentation below
Basic settings
required
Finderpage
optional
Tracking
optional
Snippet / Preview
Instructions / Documentation
Include the script tag once on every page the buynow-button component is used: 

    <script src=https://webcomponent.buynowsw.com/buynow-button.js async></script>
Make sure to apply the necessary CSS code as well (see examples from snippet generator).

Configuration

The default mode only requires two attributes to be set: product="{PRODUCT_ID}" and design="{DESIGN_ID}". Make sure to replace {PRODUCT_ID} and {DESIGN_ID} with the correct values. 

    <buynow-button design={DESIGN_ID} product={PRODUCT_ID}></buynow-button>
Finderpage
Use finderpage="/your/path/to/finder.html" to define the page you have implemented the pharmacyfinder on. You can integrate the pharmacyfinder on any page by adding the following component, where the finder should render (set {PRODUCT_ID} to the value of a button you already use on your page) 

    <buynow-finder product={PRODUCT_ID}></buynow-finder>

    <script src=https://finder.buynowsw.com/build/buynow-finder.js async></script>
If the finderpage attribute is not set, it defaults to apothekensuche.html relative to the current page. 

    <buynow-button design={DESIGN_ID} product={PRODUCT_ID} finderpage=/your/path/to/finder.html></buynow-button>
Tracking
Add the enablecentralizedtracking attribute to send events to the central BuyNow GA4. This will only happen if gtag (Analytics) is already loaded on the page. BuyNow will not inject or load GTM, Analytics or gtag by itself. 

    <buynow-button design={DESIGN_ID} product={PRODUCT_ID} enablecentralizedtracking></buynow-button>
To receive BuyNow events in you own GA4 please refer to the following documentation.
Receiving BuyNow Events
BuyNow sends Custom Events called BuyNow_Event which can be listened to. There are two ways to work with those Custom Events. You can either send it to your DataLayer and send the events via Google Tag Manager (requires additional setup. See below) to your Analytics or you can send them directly from your Page to your Google Analytics.
Please note: Sending them directly requires you to have gtag initiliazed. Read here for further information on how to initilaze gtag 

    // Listening to Custom Events
    window.addEventListener('BuyNow_Event', (event) => {
        // event.details contains following parameters
        //Brand
        //BrandOwner
        //Emitter
        //Product
        //Price
        //Estore
        //EventName
    });
Common ways to send these Events to GA4
Send Events to DataLayer:

via Code: 

    // Push into your DataLayer
    window.addEventListener('BuyNow_Event', (event) => {
        window.dataLayer.push({ event: 'GA4BuyNowEvent', ...event.detail });
    });
via GTM: 

    <script>
        window.addEventListener('BuyNow_Event', function(event) {
            var eventObj = event.detail;
            eventObj.event = 'GA4BuyNowEvent';
            window.dataLayer.push(eventObj);
        });
    </script>
Send directly to Analytics: 

    // Send Events directly to your Google Analytics
    window.addEventListener('BuyNow_Event', (event) => {
        gtag('event', event.detail.EventName, {
            send_to: YOUR_ANALYTICS_ID,
            ...event.detail,
        });
    });

GTM Setup

Use the following steps to setup your GTM for BuyNow tracking via GTM.

Step 1: Create the following data layer variables:
Step 2: Create the following trigger:
Step 3: Create the following tag with your Configuration Tag. Add the previously created Trigger as your Firing Trigger. If the tag should only be fired with user consent, add a corresponding exception:

Setup your GA4 Custom Definitions

Create the custom dimensions in your GA4 Admin Panel to collect the BuyNow custom parameters.

Custom definitions overview:
Add custom dimension according to this scheme:
Configuration
Integration instructions and usage documentation below
Basic settings
required
Tracking
optional
Snippet / Preview
Instructions / Documentation
Include the script tag once on every page the ratings-and-reviews component is used: 

    <script src=https://components.buynowsw.com/ratings-and-reviews.js type=module></script>
Make sure to apply the necessary CSS code as well (see examples from snippet generator).

Configuration

The component only requires one attribute to be set: product="{PRODUCT_ID}". Make sure to replace {PRODUCT_ID} with the correct value. 

    <ratings-and-reviews product={PRODUCT_ID}></ratings-and-reviews>
Tracking
Add the enablecentralizedtracking attribute to send events of Ratings and Reviews to the central BuyNow GA4. This will only happen if gtag (Analytics) is already loaded on the page. BuyNow will not inject or load GTM, Analytics or gtag by itself. 

    <ratings-and-reviews product={PRODUCT_ID} enablecentralizedtracking></ratings-and-reviews>
To receive BuyNow events in you own GA4 please refer to the following documentation.

Receiving Ratings and Reviews Events

If you have already implemented BuyNow Tracking into your page, you are already set up to receive events from the ratings-and-reviews component. No additional setup is needed in this case.

The ratings-and-reviews component sends Custom Events called BuyNow_Event which can be listened to. There are two ways to work with those Custom Events. You can either send it to your DataLayer and send the events via Google Tag Manager (requires additional setup. See below) to your Analytics or you can send them directly from your Page to your Google Analytics.
Please note: Sending them directly requires you to have gtag initiliazed. Read here for further information on how to initilaze gtag 

    // Listening to Custom Events
    window.addEventListener('BuyNow_Event', (event) => {
    // event.details contains following parameters
    //Brand
    //BrandOwner
    //Emitter
    //Product
    //Price
    //Estore
    //EventName
    });
Common ways to send these Events to GA4
Send Events to DataLayer:

via Code: 

    // Push into your DataLayer
    window.addEventListener('BuyNow_Event', (event) => {
    window.dataLayer.push({ event: 'GA4BuyNowEvent', ...event.detail });
    });
via GTM: 

    <script>
    window.addEventListener('BuyNow_Event', function(event) {
    var eventObj = event.detail;
    eventObj.event = 'GA4BuyNowEvent';
    window.dataLayer.push(eventObj);
    });
    </script>
Send directly to Analytics: 

    // Send Events directly to your Google Analytics
    window.addEventListener('BuyNow_Event', (event) => {
    gtag('event', event.detail.EventName, {
    send_to: YOUR_ANALYTICS_ID,
    ...event.detail,
    });
    });

GTM Setup

Use the following steps to setup your GTM for BuyNow tracking via GTM.

Step 1: Create the following data layer variables:
Step 2: Create the following trigger:
Step 3: Create the following tag with your Configuration Tag. Add the previously created Trigger as your Firing Trigger. If the tag should only be fired with user consent, add a corresponding exception:

Setup your GA4 Custom Definitions

Create the custom dimensions in your GA4 Admin Panel to collect the BuyNow custom parameters.

Custom definitions overview:
Add custom dimension according to this scheme: