Overview

Magento is an open source ecommerce platform, that more than 150K online stores use. This document covers the multiple ways and the steps involved in integrating Moengage Web SDK into your Magento store.

Moengage<>Magento integration can be done in two ways:

• Via Google Tag Manager
• Direct Integration

Using Google Tag Manager

• Add Google Tag Manager (GTM) to your Magento store. Refer to this Magento documentation for detailed steps. 
• Complete the GTM<>MoEngage integration by following the integration steps here.
• You can track any user event and/or User properties from your store to MoEngage via GTM. 
• This integration allows you to further integrate with the following MoEngage channels:
  

  On-site messaging	Yes
  Web personalization	Yes
  WebPush	No

Direct Integration with Magento

• Install and set up your Magento store. Refer to the Magento documentation for help.
• Login into your store's admin panel, and Navigate to Admin Panel > Content > Configuration
• Please choose the store view you want the head tag to be changed on or select Global to change it on every store view.
  
• Find the HTML Head section and add the SDK script code in the Scripts and Style Sheets field.
  
• Please save the configuration and flush the cache.

To overcome any potential customer data privacy issues, please whitelist the MoEngage WebSDK URLs. Follow their official documentation to add the rules. Here is the list of URL that you should whitelist.

Data Tracking

In Magento, to track events or user attributes on the existing elements, you would need to edit the default HTML. For example, to track an event on click of "Add to Cart" button:

Add a script in your phtml file where the Add to Cart button is defined. You can usually find the add to cart button in catalog/product/view/addtocart.phtml file.

<script> 

      document.querySelector('.tocart').addEventListener('click', function() { 

      Moengage && Moengage.track_event('Add to Cart', {productTitle: '<?= $_product->getName() ?>'}) 

      }); 

</script>

This integration allows you to use the MoEngage for:

For Webpush support service worker file can be added to the root of the project; usually inside /pub folder. This requires changes in .htaccess file. If this is not possible due to any reasons, then please put the serviceworker inside the media folder or any custom folder inside the /pub directory.

if the service worker file is not placed in the root directory, then swPath and swScope can be added while initializing the SDK.