Using Scripts in Portals and Landing Pages Pro for Google Analytics, FB Pixel, Chatbots and Other Custom Behaviour

1. Feature Overview

Portals and Landing Pages Pro are modular and can be altered, extended, or enhanced using JavaScript. They can be extended to accommodate additional functionality like –

• Integrating analytics services to capture page views, engagement events, conversion events –
  • Portals and Landing Pages Pro broadcast specific engagement activities during the lead journey which can be subscribed to and posted to the respective analytics service.
• Integrating third-party chatbot services.
• Fetching/Updating data from external databases or apps using JavaScript.
• Overriding the style of a specific component inside the designer using your own custom scripts.

2. Integrating Google Analytics and Facebook Pixel on Portals

On integration, both Google Analytics and Facebook Pixel track pageviews, visitor count, and other basic events. However, in order to track custom engagement or conversion activities, you must write custom push events specific to the analytics service.

1. Navigate to Workflow>Manage Portals.
2. Select the Portal you need to view and click Continue Editing.
3. Click   and then Configurations.
4. Click the Script dropdown.
5. Paste the script obtained in the Inside Head and End of Body sections as per the specifications.

3. Integrating Google Analytics and Facebook Pixel on Landing Pages Pro

1. Navigate to Marketing>Landing Pages Pro.
2. Select a Landing Page.
3. Click on the Settings icon .
4. Select Scripts.
5. Paste the script obtained in the Inside Head and End of Body sections as per the specifications.

4. Troubleshooting

4.1  Frequent Issues Encountered

• Wrong trigger configuration: The conditions you have targeted must be present for the expected trigger behaviour.
• Extra specific triggers: Triggers must not be too specific. Example: A URL trigger that is set to fire on http://www.example.com will not fire if the URL is https://www.example.com . Use a common fragment for the trigger criteria, such as “example.com”.

4.2 Issues Encountered with Facebook Pixel

Refer to the following checklist to ensure that Pixel is firing properly.

1. Check whether your raw pixel fires match. If you’re using Facebook pixel, you can check how many times your specific standard events were triggered in your pixel dashboard.
2. If your raw pixel fires match but there’s a discrepancy in conversion values, check your currency, decimal places, and other variables in your purchase event codes.
3. Do not use a combination of conditional and unconditional firing with your tags. Also, expect minor discrepancies while using conditional firing.
4. If Facebook is reporting more conversions than your other analytics tools, use the Pixel Helper tool to check for duplicate pixel fires, which can sometimes be caused by redirects.
5. If Facebook is reporting fewer conversions, check if the pixel piggybacking on existing tag managers has been implemented correctly.

4.3 Debugging Google Analytics and Facebook Pixel

The tools mentioned below can be used to debug Google Analytics and Facebook Pixel.

1. Facebook Pixel Helper – Works in the background to look for conversions or Facebook pixels and provides real-time feedback on the implementation.
2. Google Tag Assistant Recordings – Validates, diagnoses, and troubleshoots issues with your Google Analytics implementation in real-time. You can record typical user flows through your website and get an immediate analysis of your setup. Google Tag Assistant Recordings can help you find missing or mangled tags, invalid events, filters, and much more.

5. Overriding the Style of Portal and Landing Page Pro Components with Custom Scripts

You can use custom JavaScript to override a style property of a component that is not available in configurations. To override the CSS properties of a component, use its class name. The properties will be applied to all components with the class name. If you want to isolate this to a specific component, set a custom class name to the component and use this class with JavaScript to style it.

Select a portal component and tag it with a custom CSS class name –

• Click the Advanced dropdown and enter a value in the Custom class name field.
• Use this class name in your custom scripts to isolate and override its style and behavior without affecting any other components in the portal.

6. Extending Portals with Custom Behaviour

Portals track various engagement events performed by leads. You can consume these events via custom scripts and –

• Post them to –
  • Analytics services like Google Analytics
  • Advertisement services like Facebook Ads
• Display a pop-up message on the portal, etc.

These events can be consumed via custom scripts written at the Portal Designer > Configurations > Script: a) Inside Head <head> b) End of body <body>

window.addEventListener("LSQ_FORM_SIGNUP_SUCCESS", (event) => { 
    console.log("Printed when user has registered.", event.detail);
    // Your logic goes here. Push Google Analytics / Facebook Pixel events here or any other custom behaviour you intend to achieve.
    // Example: Track a Google Analytics Event
    //gtag('event', 'portal_sign_up', {'event_category' : 'admission_portal', 'event_label' : '2022_admission'});
    // Example: Track a Facebook Pixel Event
    //fbq('track', 'ViewContent', {content_name: 'Sign Up Form'});
});